- Project Overview
- Features
- Getting Started
- API Endpoints
- Technologies Used
- Accessibility and SEO Documentation
- Tracking Implementation Documentation
- Security Threats and Mitigation Documentation
- Contributing
This is a full-stack Ecommerce Application built with Next.js for the frontend and a Node.js/Express backend. The project is designed to provide a seamless shopping experience with features like product browsing, adding to cart, and managing inventory.
- Built with Next.js for server-side rendering and optimized performance.
- Styled with Tailwind CSS and DaisyUI for pre-designed, customizable components.
- Responsive design for mobile, tablet, and desktop devices.
- Product listing and detailed product pages.
- Add-to-cart functionality.
- User Authentication: Users can register, log in, and manage their profiles.
- Built with Node.js and Express.
- RESTful API for managing products.
- MongoDB database for storing product and user data.
- Sequential product IDs for better readability.
- Authentication and Authorization:
- Users must log in to perform actions like creating, updating, or deleting products.
- Protected routes ensure only authenticated users can modify the database.
Make sure you have the following installed:
- Node.js (v16 or higher)
- npm or yarn
- MongoDB (MongoDB Atlas)
- Clone the repository:
git clone git@github.com:odai-dh/ecommerce.git
cd ecommerce-project- Install dependencies for both the frontend and backend:
# Install backend dependencies
cd backend
npm install
# Install frontend dependencies
cd ../frontend
npm installEnvironment Variables
Create a .env file in the backend directory and add the following:
MONGO_URI= Connect with me so I can give you the URL PORT=5001
For the frontend, create a .env file in the frontend directory and add:
** Connect with me so I can give you the URL
- Start the backend server:
cd backend
npm run dev- Start the frontend development server:
cd frontend
npm run dev- Open your browser and navigate to:
Frontend: http://localhost:3000 Backend API: http://localhost:5001
- GET /api/products - Fetch all products.
- GET /api/products/:id - Fetch a single product by ID.
- POST /api/products - Add a new product.
- PUT /api/products/:id - Update a product by ID.
- DELETE /api/products/:id - Delete a product by ID.
- GET /api/auth/products - Fetch the product so it could be updated or deleted.
- POST /api/auth/register - Register a new user.
- POST /api/auth/login - Log in a user and receive a JWT token.
- PUT /api/auth/profile - Update user profile (requires authentication).
- Next.js - React framework for server-side rendering and static site generation.
- Tailwind CSS - Utility-first CSS framework for styling.
- DaisyUI - Tailwind CSS-based component library for pre-styled UI components.
- Node.js - JavaScript runtime for building the backend.
- Express - Web framework for building RESTful APIs.
- MongoDB - NoSQL database for storing product and user data.
- Mongoose - ODM for MongoDB.
- JWT (JSON Web Tokens) - For secure user authentication and authorization.
- Users can register and log in to the application.
- A JWT token is issued upon successful login and is stored in the browser's localStorage.
- The token is used to authenticate requests to protected routes.
- Only authenticated users can perform the following actions: ・ Add a new product. ・ Update an existing product. ・ Delete a product.
- Unauthorized users attempting to access protected routes will receive a 401 Unauthorized response.
- Passwords are hashed using bcrypt before being stored in the database.
- Protected routes are secured using a custom authenticate middleware that verifies the JWT token.
The frontend can be deployed on platforms like Vercel or Netlify.
The backend can be deployed on platforms like Heroku, Render, or AWS.
Contributions are welcome! To contribute:
- Fork the repository. 2 .Create a new branch:
git checkout -b feature-name- Commit your changes:
git commit -m "Add feature-name"- Push to your branch:
git push origin feature-name- Open a pull request.
To make the app accessible, I used semantic HTML elements like < header >, < main >, and < section > ecs.. for better screen reader support. All images have descriptive alt text, and buttons/links are keyboard-friendly with visible focus styles. ARIA roles were added where necessary to improve accessibility for assistive technologies. Additionally, color contrast ratios were tested to meet WCAG standards, ensuring readability for users with visual impairments.
For SEO, I added unique titles, descriptions, and Open Graph tags using Next.js’s Metadata API. I also included a sitemap and robots.txt to help search engines crawl the site. Lazy loading improves performance and user experience. Accessibility and SEO were validated using tools like Lighthouse and Axe to ensure compliance with best practices.
This project uses Google Analytics, to gather insights on how users interact with the site — such as which pages are visited and how long users stay. This information helps guide improvements to the user experience.
Currently, tracking is activated by default when the site loads. No cookie banner or consent mechanism is yet in place. However:
- No personally identifiable information is collected.
- IP anonymization is enabled in GA.
- The data is used solely for internal, non-commercial insights during development.
Since this is a non-commercial, educational project, and does not collect any user-submitted data, I’ve chosen not to implement a consent banner at this stage.
What i could do next is:
This project is launched on Netlify for show casing only, and adding consent mechanism would be necessary to fully align with privacy regulations like GDPR.
If you have any concerns please contact me on my email how u can find in my GitHub bio.
Passwords are securely hashed using bcrypt before being stored in the database, ensuring user credentials are protected even in the event of a data breach.
JWT tokens are used for authentication, and they are stored localStorage which is risky beacuse of: XSS Vulnerability: If an attacker injects malicious JavaScript into the application, they can access the JWT stored in localStorage and use it to impersonate users. No Automatic Protection: Unlike cookies, localStorage does not have built-in security features like HttpOnly or Secure flags.
To enhance the security of the application, several measures have been implemented. Sensitive routes like login and registration are protected using rate limiting with express-rate-limit to prevent brute force attacks.
What I can do in the futur is using libraries like Joi and express-validator to ensure only valid data is processed. Additionally also in the futur , express-mongo-sanitize could be used to prevent NoSQL injection attacks by removing malicious payloads from incoming requests.