In today’s digital age, building a robust e-commerce platform is essential for businesses looking to thrive. The MERN stack (MongoDB, Express, React, Node.js) provides a powerful solution for creating dynamic e-commerce applications. This blog will walk you through the process of implementing a MERN e-commerce store, featuring buyer, seller, and admin functionalities.

Understanding the Structure

The MERN e-commerce application is composed of three main user flows:

• Buyers can browse categories, products, and brands.
• Sellers or Merchants manage their own brand components.
• Admins oversee and control all components of the store.

Key Features of the MERN E-commerce Application

Our e-commerce store leverages the following technologies:

• Node.js: Provides the backend environment.
• Express: Middleware used for handling requests and routes.
• Mongoose: Schemas to model the application data.
• React: For displaying user interface components.
• Redux: Manages the application state effectively.
• Redux Thunk: Facilitates handling asynchronous Redux actions.

Deploying the Application

You can check out a live demo of the application deployed on Vercel here: Demo. For administrative purposes, you can view the admin dashboard [demo](https://mernstore-bucket.s3.us-east-2.amazonaws.com/admin.mp4).

Running the Project Locally with Docker

To get started with local development, you can use Docker Compose. Here’s how to run the project locally:

• Clone the repository using: git clone https://github.com/mohamedsamara/mern-ecommerce.git
• Edit the docker-compose.yml file to set the values for MONGO_URI and JWT_SECRET.
• Run the following commands to build and start Docker:
  • docker-compose build
  • docker-compose up

Database Seeding

You can create an initial admin user in your database with the seed command. Execute the command below by replacing the brackets with your email and password:

npm run seed:db [email-***@****.com] [password-******]

To learn more about the seeding process, check out the code here.

Installing Dependencies

Navigating the project root and running npm install will install the necessary dependencies for both the client and the server:

git clone https://github.com/mohamedsamara/mern-ecommerce.git
cd project
npm install

Environment Configuration

Be sure to create a .env file for both the client and the server. You can see examples in the following files:

• Frontend ENV
• Backend ENV

Vercel Deployment

For deployment on Vercel, both the frontend and backend are hosted from the same repository. While deploying, specify the root directory as client and server. For reference, see the client vercel.json and server vercel.json.

Starting Development

You can start the development server using the command:

npm run dev

Code Formatting

To maintain consistent code formatting, follow these steps:

• Create a .vscode directory in your project.
• Inside it, create a settings.json file and install Prettier.
• Use the following snippet in your settings.json:

{
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    "prettier.jsxSingleQuote": true,
    "prettier.trailingComma": "none",
    "javascript.preferences.quoteStyle": "single"
}

Troubleshooting

If you run into any hiccups while setting up the application, consider the following troubleshooting ideas:

• Ensure that the Docker and Docker Compose are installed and properly configured.
• Verify that the MONGO_URI and JWT_SECRET values in the docker-compose.yml are correct.
• Check that you’ve cloned the repository correctly and installed all dependencies.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Happy Coding!