A dynamic e-commerce platform that showcases a variety of mobile phone brands and models, allowing users to customize and order their preferred devices by selecting RAM sizes, colors, and storage capacities.
- MongoDB - NoSQL database for scalable product and order management
- Express.js - Backend web framework for RESTful APIs
- React - Frontend library for building interactive user interfaces
- Node.js - JavaScript runtime for backend development
- Tailwind CSS - Utility-first CSS framework for responsive UI
- Redux Toolkit - State management
- React Router - Client-side routing
- Chart.js - Analytics and data visualization
- Stripe.js - Payment gateway integration
- Mongoose - MongoDB object modeling
- JWT - JSON Web Token for authentication
- bcryptjs - Password hashing
- Cloudinary - Image hosting and management
- Nodemailer - Email notifications (optional)
- Stripe - Payment processing API
PhoneHub is a full-stack e-commerce web application designed to provide users with a seamless phone shopping experience.
It supports product filtering, secure payments, admin product management, and responsive design for both desktop and mobile users.
Before you begin, ensure you have the following installed:
You should also be familiar with:
- JavaScript (ES6+)
- React & Redux Toolkit
- RESTful API architecture
- Environment variable configuration
NODE_ENV=development
PORT=
MONGODB_URI=
JWT_SECRET=
ADMIN_EMAIL=
ADMIN_PASSWORD=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
STRIPE_SECRET_KEY=REACT_APP_STRIPE_PUBLIC_KEY=
VITE_STRIPE_PUBLIC_KEY=git clone https://github.com/Gambit142/PhoneHub.git
cd PhoneHubcd server
npm installcd ../client
npm installCreate .env files in both server/ and client/ directories as shown above.
If running locally:
mongodGenerate a secure JWT secret using:
node server/src/utils/generateSecret.js
Create the initial admin user using:
node server/src/utils/createAdmin.js
Seed the database with phone data by using:
node server/src/utils/seedDatabase.js
npm run startnpm run devOpen your browser and go to:
http://localhost:5173
| Category | Technologies |
|---|---|
| Frontend | React, Vite, Tailwind CSS, Redux Toolkit, Chart.js |
| Backend | Node.js, Express.js, Mongoose |
| Database | MongoDB |
| Authentication | JWT |
| Media Storage | Cloudinary |
| Payments | Stripe |
| Email Service | Nodemailer |
| State Management | Redux Toolkit |
| Testing | Jest |
| Utilities | bcryptjs, dotenv |
- User registration and login (JWT-based authentication)
- Browse and filter phones by brand, RAM, storage, and color
- Secure payment integration with Stripe
- Product management dashboard for admin users
- Cloud-based image upload via Cloudinary
- Order tracking and user purchase history
- Responsive design optimized for mobile and desktop
- Real-time stock update and order status changes
- Wishlist feature for saving favorite products
- Multi-language support for international users
- Product reviews and ratings system
- AI-based product recommendation engine
- Progressive Web App (PWA) integration for offline usage
- Email verification and password recovery functionality
- Integration with Google Pay / Apple Pay for faster checkout
👤 Francis Ugorji
- GitHub: @Gambit142
- LinkedIn: LinkedIn
Contributions, issues, and feature requests are welcome!
Feel free to open a pull request or check the issues page.
Give a ⭐️ if you like this project and found it helpful!
This project is licensed under the MIT License - see the LICENSE file for details.
Special thanks to:
- The open-source community for the tools and frameworks used
- Cloudinary and Stripe for providing free-tier APIs
- Pexels for sample phone product images
- Tailwind CSS team for an excellent styling framework
- Mobile Phone Rapid API for data used