Simple E-Commerce App (MERN Stack)

A simple E-commerce MERN stack application for managing products. This application allows users to create, view, edit, and delete products using MongoDB, Express, React, and Node.js.

MERN App URL

https://mern-app-d6q9.onrender.com/

Features

• Create new products
• View all products
• Edit existing products
• Delete products

Technologies Used

• MongoDB: NoSQL database for data storage
• Express: Web framework for Node.js
• React: Frontend library for building user interfaces
• Node.js: JavaScript runtime for server-side logic
• Chakra UI: Modular and accessible component library for React

Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)

1. Installation

Clone the repository:

git clone https://github.com/mahirsust/mern-app.git
cd mern-app

2. Install Dependencies

npm run build

3. Environment Configuration

Create a .env file in the root directory of the project. Refer to .env.example for the required variables:

# db settings
MONGO_URI = Your MongoDB URI

# server settings
NODE_ENV = Node Environment
DEV_PORT = Development Port
PROD_PORT = Production Port

Setting NODE_ENV:

• Use NODE_ENV=development for running the app in development mode.
• Use NODE_ENV=production for running the app in production mode.

Replace the placeholders with your actual MongoDB URI.

4. Running the App

In Development Mode

npm run dev

The application will run on the port defined in DEV_PORT for the backend server.

Then, open another terminal and execute the following command for the frontend development server.

cd fronend
npm run dev

The application will run on another port for the frontend.

In Production Mode

Execute this command given below in the root folder (mern-app).

npm run build
npm run start

The application will run on the port defined in PROD_PORT.

Usage

• Create Product: Navigate to the product creation form to add a new product.
• View Products: All products are displayed on the main page.
• Edit Product: Click on the edit button next to a product to modify its details.
• Delete Product: Click on the delete button next to a product to remove it.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Express
• React
• MongoDB
• Node.js
• Chakra UI