G-Mart: MERN Stack Grocery Web App Project Report

Introduction: G-Mart is a full-stack grocery web application designed to provide an online

platform for users to browse, order, and purchase groceries seamlessly. The app leverages the
MERN stack (MongoDB, Express.js, React.js, Node.js) for robust, scalable development. It
integrates PayPal as a payment gateway to facilitate secure transactions.

Objective:

 To develop a functional e-commerce grocery web application.

 To explore and implement a complete MERN stack development workflow.
 To demonstrate understanding of database integration, user authentication, and admin
functionalities.

Modules:

1. Frontend (React.js):
o User-friendly interface for browsing products.
o Categories, search, and filter options for easy navigation.
o Responsive design for enhanced user experience.
2. Backend (Node.js, Express.js):
o RESTful API to handle user requests.
o Middleware for authentication and error handling.
3. Database (MongoDB):
o Schema for users, products, orders, and categories.
o Data storage for efficient retrieval and management.
4. Admin Panel:
o Product management (add/edit/delete).
o Order tracking and management.
o Role-based authentication to secure admin access.
5. Payment Integration:
o PayPal gateway setup using public and private keys.
o Secure transactions for customer purchases.

Software Requirement Specifications:

 Frontend: React.js, React Router, Axios.

 Backend: Node.js, Express.js, JWT for authentication.
 Database: MongoDB Atlas.
 Tools: Visual Studio Code, Postman, Git.
 Payment Gateway: PayPal (sandbox environment for testing).
 Hosting (Optional): Deployment using platforms like Heroku or Vercel.
Technology Used:

 MERN stack (MongoDB, Express.js, React.js, Node.js).

 PayPal API for payment transactions.
 GitHub for version control and project resources.

Implementation Steps:

1. Followed the tutorial YouTube: Ecommerce MERN Stack App.

2. Retrieved base code from GitHub repository.
3. Configured MongoDB Atlas for database connectivity.
4. Set up environment variables for PayPal API keys.
5. Customized admin panel to add product images and categories independently.
6. Deployed backend and tested API endpoints using Postman.

Features Implemented:

1. User Interface:
o Displays a categorized list of grocery items with images.
o Users can browse products and add them to the cart.
2. Admin Role:
o Added new products with categories and uploaded images.
o Managed orders and tracked customer transactions.
3. Secure Payments:
o Integrated PayPal for payment processing.
o Used public and private keys to ensure transaction security.

Challenges Faced:

 Configuring MongoDB and PayPal keys for the first time.

 Understanding and modifying the admin panel functionalities.
 Debugging API issues during testing phases.

Conclusion: The G-Mart project successfully demonstrates the development of a modern e-

commerce application using the MERN stack. It showcases skills in integrating third-party
payment gateways, managing databases, and creating an admin panel for product
management. The project highlights real-world development scenarios and their solutions.
Bibliography:

1. YouTube Tutorial: "Ecommerce MERN Stack App"

2. GitHub Repository: "TechInfo - Ecommerce App"
3. MongoDB Atlas Documentation.
4. PayPal Developer Documentation.

1. Backend: Node.js + Express

Create a folder backend, initialize it, and install dependencies:

bash
npm init -y
npm install express mongoose body-parser cors dotenv

Create server.js:

javascript
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('MongoDB connection error:', err));

// Schema and Model

const productSchema = new mongoose.Schema({
name: String,
price: Number,
});

const Product = mongoose.model('Product', productSchema);

// Routes
app.get('/products', async (req, res) => {
const products = await Product.find();
res.json(products);
});

app.post('/products', async (req, res) => {

const product = new Product(req.body);
await product.save();
res.status(201).json(product);
});

// Start the server

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Create .env for MongoDB URI:

env
MONGO_URI=your_mongodb_connection_string

2. Frontend: React

Create a React app in the frontend folder:

bash
Copy code
npx create-react-app frontend
cd frontend
npm install axios

Replace the content in src/App.js with:

javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

const [products, setProducts] = useState([]);
const [newProduct, setNewProduct] = useState({ name: '', price: '' });
 // Fetch Products
useEffect(() => {
axios.get('http://localhost:5000/products')
.then(res => setProducts(res.data))
.catch(err => console.error(err));
}, []);

// Add Product
const addProduct = () => {
axios.post('http://localhost:5000/products', newProduct)
.then(res => {
setProducts([...products, res.data]);
setNewProduct({ name: '', price: '' });
})
.catch(err => console.error(err));
};

return (
<div style={{ padding: '20px' }}>
<h1>Product List</h1>
<ul>
{products.map(product => (
<li key={product._id}>{product.name} - $
{product.price}</li>
))}
</ul>
<h2>Add Product</h2>
<input
type="text"
placeholder="Name"
value={newProduct.name}
onChange={e => setNewProduct({ ...newProduct, name:
e.target.value })}
/>
<input
type="number"
placeholder="Price"
value={newProduct.price}
onChange={e => setNewProduct({ ...newProduct, price:
e.target.value })}
/>
<button onClick={addProduct}>Add</button>
</div>
);
};

export default App;

3. Connecting Frontend and Backend

 Start the backend server:

bash
Copy code
node server.js

 Start the frontend development server:

bash
Copy code
npm start

 Make sure the backend server runs on http://localhost:5000.

4. Folder Structure
project
│
├── backend
│ ├── server.js
│ ├── package.json
│ ├── .env
│
└── frontend
├── src
│ ├── App.js
├── package.json