Welcome to MERN Stack Project

MERN Stack Warning:

You have to Very good understanding of JavaScript before start MERN Stack.

Table of Contents

• File Structure

• JavaScript

• Technologies Used

  • MongoDB
  • Express
  • React
  • NodeJS

• npm package

• Getting Started

  • Prerequisites
  • Installation
    • Client
      • Tailwind CSS
      • React Router DOM
      • Flowbite React
      • React Icons
    • Server

File Structure

Here are the complite project structure You should allys flow this structure.

project-root/
|-- client/             # React client-side code
|   |-- public/
|   |-- src/
|       |-- components/
|       |-- containers/
|       |-- api/        # Here add the api data
|       |-- App.js
|       |-- index.js
|   |-- package.json
|   |-- README.md       # This one if you want then you can use
|-- server/             # Node.js Express server-side code
|   |-- routes/
|   |-- controllers/
|   |-- models/
|   |-- config/
|   |-- server.js
|   |-- package.json
|   |-- README.md      # This one if you want the you can use
|-- .gitignore
|-- package.json
|-- README.md          # Must be use this one

Technologies Used

• Frontend:

  • React: JavaScript library for building user interfaces.
  • Redux Toolkit: State management library for React applications.
  • React Router: Declarative navigation for React.js.
  • Axios: Promise-based HTTP client for making API requests.

• Backend:

  • Node.js: JavaScript runtime for server-side development.
  • Express.js: Web application framework for Node.js.
  • MongoDB: NoSQL database for storing blog data.
  • Mongoose: MongoDB object modeling for Node.js.

• Authentication:

  • JSON Web Tokens (JWT): Secure and compact way of representing claims to be transferred between two parties.

Next: JavaScript | Next:Technologies Used | Next: Getting Started