This is a starter project i use to quickly start my MERN application with some basic features

Demo video: YouTube link

The project contains to main folders:

• client: It's the frontend application built with React and Typescript running on port 3000. it's based on the starter generated by create-react-app

• server: It's the backend application built with Node.js, Express, MongoDB and Typescript running on port 7430

• SERVER:

  • Registration: Account creation with sent of email confirmation

  • Authentication: User authentication with JWT

  • Password reset: Two endpoint to reset user password

  • Logging: Log event which when application is running

  • Internationalization: The client can define the language he want the API to respond with only English and French are supported

  • Authentication Middleware: Check if an user is authenticated before access to the resource

  • Refresh token: Refresh the user's access token before it's expire

  • Socket integration: Socket is configured to communicate with any client who connect to him.

  • Request validator: Validation of the request's body

  • Response transformer: You can customize the data coming from the database before send it to the client

• CLIENT:

  • Redux integration: Redux is used for global state management. Some middlewares has been to make his use straightforward like promise middleware to make add promise capablity on redux action, dynamic middleware to automatically create three redux action's type

  • Routing: Use of React router to configure the routing for public, protected and nested routes

  • Lazy loading: Main component are loaded dynamically and combined with React Suspense to define a loader when the component is loading

  • Internatinalization: Four languages is available by default: English, French, German and Spanish. React Context API is used to manage the languages. I find it more better than Redux

  • Socket integration as Redux middleware: A custom redux middleware is created for socket. With that, Redux can handle socket request and response to update state in the reducer.

  • Two main High Order Component: They have the same features but act at differents part. One enhance components public part (Register, Login, Password Reset, etc.) and the second enhance component of the protected part. Once we wrapped our component with, the component can access to Router history, Locale provider, Redux actions and Redux states

  • Translation utility: With that, you can write the text in one language (default) and translate them to the others languages. it uses the Google translate API at the bottom so an API key will be required
    You need to set an environment variable for the current shell session named GOOGLE_APPLICATION_CREDENTIALS with the value of the path of your Google API credentials

URL: https://react-starter.tericcabrel.com
Email address: [email protected]
Password: 123456