Skip to content

A dynamic MERN stack based website for displaying the available products and a dashboard that displays the sales and customer data at Margam Farms.

Notifications You must be signed in to change notification settings

SJ-Kumar/MargamFarms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Margam Farms


A dynamic website for displaying the available organic products at Margam Farms, a admin dashboard that displays the sales and customer data of Margam Farms. Also provides multiple API's for other similar businesses to interact with Margam Farms.
Margam Farms is developed using a MERN stack, which includes MongoDB, Express.js, React.js, and Node.js. This stack delivers an exceptional user experience, robust backend functionality, and efficient data storage and retrieval capabilities.

Made with

Tech used For
HTML + CSS + JavaScript Frontend
Node + Express Backend
MongoDB Database
Render Hosting

Admin Dashboard

Admin Dashboard

Admin Dashboard

Admin Panel

  • The admin panel view is meant to handle all the orders, products, and registered users
  • An order can be marked as delivered, after the user has completed the payment
  • The admin can create a product for the shop, which makes it easier to add/remove more products to replicate a real world e-commerce site
  • The users detail can altered, only by setting them as admin or not. Other than this, the admin cannot change any other detail about the registered user.
  • Helps give an estimate of the total number of orders and users on the app.

Home Page

Home Page

Latest Products

Latest Products

Sign In

Sign In

Side Cart Pop up

Side Cart Page

Shopping Cart

Shopping Cart

Setup process

Run the below command in the root directory to install all required packages for the backend server:

npm install

Create a .env file in the root directory with content like below:

PORT = 5000
CLIENT_URL=http://localhost:3000
MONGO_URI = <MongoDB url>
JWT_SECRET = <JWT Secret Key>
PAGINATION_LIMIT=4
REACT_APP_YOUTUBE_ID=<Video ID from Youtube>
REACT_APP_YOUTUBE_API_KEY=<Youtube Account API Key>

Running process

Run the below command in the root directory:

npm run dev

Technology Stack

The MERN Stack is a popular full-stack development solution that combines MongoDB, Express.js, React.js, and Node.js. These components seamlessly work together to create robust web applications.

MERN Stack Components:

MongoDB: A flexible NoSQL database for storing data in JSON-like documents. It excels in performance, availability, and scalability, making it ideal for handling large volumes of data and complex queries.

Express.js: A minimalistic and flexible web application framework for Node.js. It simplifies building web APIs and handling HTTP requests, providing robust features and middleware for web and mobile applications.

React.js: A JavaScript library for building user interfaces, especially Single Page Applications (SPAs). Its component-based architecture enables code reusability and maintainability.

Node.js: A JavaScript runtime based on Chrome's V8 engine, enabling server-side JavaScript execution. It focuses on performance, making it perfect for scalable and efficient back-end development.

About

A dynamic MERN stack based website for displaying the available products and a dashboard that displays the sales and customer data at Margam Farms.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published