Full-Stack Ecommerce with Admin Dashboard & stripe Payment Gateway. First, let's define what the MERN stack is:
M: MongoDB (a NoSQL database) E: Express (a backend framework for Node.js) R: React (a frontend library for building user interfaces) N: Node.js (a JavaScript runtime environment)
Set up the backend using Node.js and Express:
Install Node.js and Express
Create a server.js file and set up your server
Create routes for your API endpoints (e.g. GET, POST, PUT, DELETE)
Use a middleware like body-parser to parse incoming requests
Connect to your MongoDB database using a library like Mongoose.
Create your database schema and models:
Define the structure of your data (e.g. products, orders, users)
Create models for each data type using Mongoose.
Build the frontend using React:
Create a React app using create-react-app
Set up your components (e.g. product listings, shopping cart, user profile)
Use React Router to handle navigation between pages
Use Axios to make API requests to your backend server.
Implement payment processing:
Choose a payment processing platform (e.g. stripe).
Use the platform's API to handle payments and transactions.
This application is deployed on Render Please check it out : 😀 smile Website load may take some time, so please wait.
Frontend:
Backend:
Payment Gateway:
Deployed On:
Image Management: Cloudinary Mail Service: mailtrap
- custom title on each page
- auto login
- Login/Signup User Account
- Update Profile/Password User Account
- Reset Password Mail using Mailtrap
- User can view Single Product
- Cart Add/Remove Items | Update Quantities
- Products Pagination (Default 8 Products Per Page)
- Product Search
- Product Filters Based on Category, Ratings
- Shipping Info in Session Storage
- Before payment user passes 3 steps Shipping Address | Confirm Order | Card Details
- My Orders (With All Filters)
- Order Details of All Ordered Item
- Review Products User Account
- Admin: Dashboard access to only admin roles
- Admin: Add/Update Products
- The seed command will put products in database
- For more information, see code here
npm run seed