MERN Stack CRUD Application

Working with a Freecodecamp MERN application lesson while building alongside on my wn server was extremely informational. The app allows users to view products, add them to the cart, and perform CRUD (Create, Read, Update, Delete) operations. I have used several modern technologies and tools to build both the backend and frontend, creating a seamless user experience and managing data efficiently.

The main idea is to improve skills required for building web applications, handling both frontend and backend development, and integrating databases and state management systems, like Zustand.

Features

1. User Interface: Built with React and styled using Bootstrap for a responsive, user-friendly interface.
2. State Management: Utilized Zustand for effective state management on the frontend.
3. Backend API: Built with Express and connected to a MongoDB database using Mongoose for smooth data interaction.
4. Database Integration: Used MongoDB Atlas for cloud-based database storage and management.

Technologies Used

Frontend

1. React: Used for building user interfaces, and the app's frontend.
2. React-Bootstrap: Used to implement a Bootstrap Toast component to make the UI responsive.
3. React-Router-Dom: I used it to provide routing functionality to navigate between different components and views in the app.
4. Zustand: This is the first time I used Zustand for applicatoin's state management.
5. React-Icons: Utilized for adding icons in the app.

Backend

1. Node.js: I have learned that Node.js provides a runtime environment outside of the browser
2. Express: We are using Express here to handle routing and to build an API based on CRUD principles.
3. MongoDB: A NoSQL database for storing product and user data.
4. Mongoose: We built the schema using mongoose to create the data based on this schema.
5. MongoDB Atlas: We have also used Atlas in order to connect a database to our app

Development Tools

1. Nodemon: Used for automatically restarting the server during development, ensuring a smooth workflow.
2. Dotenv: Used to manage environment variables securely (e.g., API keys and database URIs).
3. Cross-env: Ensures consistent setting of environment variables across different environments.

Other Dependencies

1. CORS: Middleware to enable cross-origin resource sharing, allowing the frontend and backend to communicate without issues.
2. Bootstrap: A popular CSS framework used to build responsive, mobile-first designs.

Installation

Prerequisites

1. Node.js (v16.x or higher)
2. MongoDB Atlas account (for cloud database setup)

Steps to Set Up Locally

Clone the repository:

git clone https://github.com/uroobaCodes/mern-ecommerce-app.git

Install dependencies for both frontend and backend:

npm run build

Set up environment variables:

In the backend directory, create a .env file and add your MongoDB URI (you can get this from MongoDB Atlas), and the PORT.

MONGO_URI=your-mongodb-atlas-uri
PORT: 5000

Run the app:

npm run start

Visit the app in your browser at http://localhost:5000.