This project is a full-stack web application designed to provide a seamless browsing and shopping experience for mobile accessories. It features a dynamic front-end for users to explore products and a robust back-end for managing inventory. The application allows customers to browse, and add products to their cart while administrators can manage the product catalog effectively.
-- Features
If you need to see the endpoints of my backend using Swagger you can the documentation for it
http://localhost:3000/api-docs/
Product Catalog Management: Administrators can add, edit, and delete products, ensuring an accurate and up-to-date inventory of mobile accessories.
Search and Filtering: Users can quickly search for specific accessories and filter products by categories such as brand, type, or price.
Responsive Design: The application is fully responsive, providing a smooth and consistent user experience across all devices and screen sizes.
Dynamic Cart Management: Customers can add products to their cart and view updates in real-time as they shop.
RESTful API Integration: The front-end communicates with the back-end via a RESTful API for smooth data synchronization and scalability.
Node.js: Core runtime environment for server-side JavaScript execution.
Express: Framework for building the RESTful API that powers the application.
Swagger: Used for API documentation and testing, ensuring clarity and maintainability.
MongoDB: NoSQL database for efficient and scalable data storage.
Mongoose: ODM (Object Data Modeling) library for MongoDB, simplifying schema definition and data validation.
Crypto.js: Implements cryptographic functions for hashing and securing sensitive data.
JWT: Used for user authentication and secure session management.
Vite: Fast development build tool to bundle and serve the application.
React.js: Front-end library for building dynamic and reusable UI components.
JWT Decode: Decodes JSON Web Tokens to manage user sessions on the client-side.
Tailwind CSS: Utility-first CSS framework for responsive and modern designs.
HTML: Defines the structure of web pages.
CSS: Styles and layouts web pages
To run this project locally, ensure you have the following tools installed and properly configured:
-- Back-End Prerequisites
Node.js (version 14 or higher): Check the installation by running:
node -v
npm (Node Package Manager, included with Node.js): Verify installation with:
npm -v
MongoDB: Ensure MongoDB is installed and running. You can check the service status with:
sudo systemctl status mongod
Or verify the version with:
mongod --version
-- Front-End Prerequisites
Vite (for local development): Installed as a dependency in the project. To ensure it's working, you'll need Node.js and npm.
Modern Browser: Any modern browser (e.g., Chrome, Firefox, Edge) to test the application on the client side.
-- Optional Tools
Postman or Swagger UI:
Useful for testing API endpoints during development.
After ensuring these prerequisites, you can proceed to set up the project by following the installation and setup instructions.
-
Setup Environment Backend
-
Install Node.js, Express, MongoDB
-
Create Database Schema with Mongoose
-
Implement Authentication (JWT, Crypto.js)
-
Develop REST APIs for Products, Cart, Orders and Users
-
Implement API Security (JWT Authentication)
-
Swagger Documentation for APIs
-
Setup Environment Frontend
-
Install Vite, React, Tailwind CSS
-
Develop Home Page and Product Listings
-
Develop Product Detail Page
-
Implement JWT Authentication on Frontend
-
Implement User Profile
-
Responsive Design for Mobile and Desktop
-
Bug Fixes and Refinements
-
Implement Cart and Checkout System
-
Integrate Payment Gateway (future feature)
-
Implement Search Functionality (Filter by Category, Price, etc.)
-
Setup Deployment Environment (Docker, Nginx, etc.)
-
Parameterized Routes (Product and Category Pages)
-
Production Launch
-
Feature Enhancements (Recommendations, Reviews, etc.)
-
Payment Integration (Stripe, PayPal, etc.)
-
SEO Optimization and Analytics Setup