Next.js, NestJS, MobX and how I structured my open-source project

• MyWay-server

  1 3 0.0 TypeScript
  

This is part of a series of articles about my open-source project (backend and frontend). if you want to join me feel free to contact me at - [email protected].

• MyWay-client

  1 11 0.0 TypeScript

  A website for dog trainers to keep track of their customers' progress

  

This is part of a series of articles about my open-source project (backend and frontend). if you want to join me feel free to contact me at - [email protected].

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• task-management-frontend

  1 166 0.0 JavaScript

  Front-end application for the Task Management application (NestJS Zero to Hero course)

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios"; import Router from "next/router"; import { APIErrorResponse } from "../dto/api/api-error-response"; import { APIResponse } from "../dto/api/api-response"; // Taken from https://github.com/arielweinberger/task-management-frontend/blob/master/src/services/base-http.service.js export default class BaseHttpService { BASE_URL = process.env.BASE_URL || "http://localhost:3000"; // _accessToken: string = null; async get( endpoint: string, options: AxiosRequestConfig = {} ): Promise { Object.assign(options, this._getCommonOptions()); return axios .get>(`${this.BASE_URL}${endpoint}`, options) .then((res: AxiosResponse>) => res.data.data) .catch((error: AxiosError) => this._handleHttpError(error) ); } async post( endpoint: string, data: any = {}, options: AxiosRequestConfig = {} ): Promise { Object.assign(options, this._getCommonOptions()); return axios .post>(`${this.BASE_URL}${endpoint}`, data, options) .then((res: AxiosResponse>) => res.data.data) .catch((error: AxiosError) => this._handleHttpError(error) ); } async delete( endpoint: string, options: AxiosRequestConfig = {} ): Promise { Object.assign(options, this._getCommonOptions()); return axios .delete>(`${this.BASE_URL}${endpoint}`, options) .then((res: AxiosResponse>) => res.data.data) .catch((error: AxiosError) => this._handleHttpError(error) ); } async patch( endpoint: string, data: any = {}, options: AxiosRequestConfig = {} ): Promise { Object.assign(options, this._getCommonOptions()); return axios .patch>(`${this.BASE_URL}${endpoint}`, data, options) .then((res: AxiosResponse>) => res.data.data) .catch((error: AxiosError) => this._handleHttpError(error) ); } _handleHttpError(error: AxiosError) { if (error?.response?.data) { const { statusCode } = error?.response?.data; const requestUrl = error.response?.config.url; if ( statusCode !== 401 || requestUrl?.endsWith("/api/auth/login") || requestUrl?.endsWith("/api/auth/register") ) { throw error.response.data; } else { return this._handle401(error); } } else { throw error; } } _handle401(error: AxiosError) { this.get("/api/auth/refresh") .then(() => axios.request(error.config)) .catch((e) => Router.push("/login")); } _getCommonOptions() { // const token = this.loadToken(); // return { // headers: { // Authorization: `Bearer ${token}`, // }, // }; return {}; } // get accessToken() { // return this._accessToken ? this._accessToken : this.loadToken(); // } // saveToken(accessToken : string) { // this._accessToken = accessToken; // return localStorage.setItem("accessToken", accessToken); // } // loadToken() { // const token : string = localStorage.getItem("accessToken") as string; // this._accessToken = token; // return token; // } // removeToken() { // localStorage.removeItem("accessToken"); // } }

• Next.js

  2,046 120,572 10.0 JavaScript

  The React Framework

  

I tried to find a similar solution to the front-end part, and eventually I chose Next.JS. It mainly provides the ability to pre-render, but I liked that it contained a special pages directory which automatically created routes according to the file's name. However, NextJS does not provide a clear project structure and it still gives much freedom to each developer, which didn't fit for me.

• Nest

  312 64,419 9.9 TypeScript

  A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀

  

I consulted an open source community Facebook group named "Pull Request", and I was recommended to use NestJS. At first, it was really hard for me to get used to a whole new framework, which is written in Typescript rather than Javascript (although it is possible to use it with JS), and contains a whole new set of classes, objects, and methodologies. Nonetheless, it felt like the right thing to do, as Nest helps to keep your code organized, and much less error-prone.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project