https://github.com/bkpecho/gadgetgizmo
Gadget Gizmo is a feature-rich eCommerce platform designed to provide a seamless online shopping experience. This platform offers a variety of functionalities and technologies to enhance both user and admin experiences.
https://github.com/bkpecho/gadgetgizmo
bcryptjs cloudinary cyclic ecommerce express flyio font-awesome fullstack javascript jsonwebtoken mongodb mongoose nodejs postman react react-bootstrap react-paypal-js react-router redux-toolkit vite
Last synced: about 2 months ago
JSON representation
Gadget Gizmo is a feature-rich eCommerce platform designed to provide a seamless online shopping experience. This platform offers a variety of functionalities and technologies to enhance both user and admin experiences.
- Host: GitHub
- URL: https://github.com/bkpecho/gadgetgizmo
- Owner: bkpecho
- License: mit
- Created: 2023-07-26T13:24:05.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-16T01:27:08.000Z (almost 3 years ago)
- Last Synced: 2026-01-03T14:24:04.405Z (5 months ago)
- Topics: bcryptjs, cloudinary, cyclic, ecommerce, express, flyio, font-awesome, fullstack, javascript, jsonwebtoken, mongodb, mongoose, nodejs, postman, react, react-bootstrap, react-paypal-js, react-router, redux-toolkit, vite
- Language: JavaScript
- Homepage: https://gadgetgizmo.fly.dev
- Size: 1.77 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gadget Gizmo - eCommerce Platform
[](https://github.com/bkpecho/gadgetgizmo/blob/main/LICENSE)
[](https://gadgetgizmo.shop/)
[](https://twitter.com/bkpecho)
[Gadget Gizmo](https://gadgetgizmo.shop/) is a feature-rich eCommerce platform designed to provide a seamless online shopping experience. This platform offers a variety of functionalities and technologies to enhance both user and admin experiences. The project is licensed under the [MIT License](https://github.com/bkpecho/gadgetgizmo/blob/main/LICENSE).
> **Explore it live at http://gadgetgizmo.shop/**
## Table of Contents
- [Features](#features)
- [Usage](#usage)
- [Env Variables](#env-variables)
- [Install Dependencies](#install-dependencies)
- [Run](#run)
- [Build & Deploy](#build--deploy)
- [License](#license)
- [Author](#author)
## Key Features
Gadget Gizmo boasts a wide range of features including:
- **Shopping Made Easy:** Seamlessly add, remove, and manage items in the shopping cart.
- **Effortless Checkout:** Effortlessly navigate the checkout process for a smooth transaction.
- **Admin Product Management:** Admins enjoy efficient product management capabilities.
- **User-Centric Profiles:** Users can access their order history conveniently.
- **Admin Order View:** Administrators gain insights with a detailed view of orders.
- **Smooth PayPal Integration:** Effortless payment options for users.
- **Feedback and Ratings:** Users can contribute reviews and ratings for products.
- **Highlight Top Products:** Highlight top products in an engaging carousel.
- **Efficient Product Search:** Easily find desired products through the search feature.
- **Optimized Image Storage:** Cloud-based image storage ensures optimal performance.
- **Order Updates:** Users can stay informed about their order delivery status.
- **Browse with Ease:** Browse products seamlessly with pagination.
## Technology Stack
The platform is built using the following technologies:
- **Frontend:** Utilizes React and Redux for dynamic user interfaces.
- **Backend:** Employs Node.js and Express to handle server-side operations.
- **Database:** Relies on MongoDB for efficient data storage and retrieval.
- **Image Storage:** Utilizes Cloudinary for efficient image storage and management.
- **Payment Integration:** Seamlessly integrates with PayPal JS SDK for smooth payments.
- **Styling:** Utilizes Bootstrap for a visually appealing and responsive design.
- **Build Tool:** Leverages Vite for fast and efficient project building.
- **Deployment:** Uses Cyclic and Fly.io for reliable and scalable deployment.
## Usage
To set up and run Gadget Gizmo:
1. Create a [MongoDB](https://www.mongodb.com/cloud/atlas/register) database and obtain the MongoDB URI.
2. Create a [PayPal Developer]((https://developer.paypal.com/)) account and obtain the Client ID.
3. Sign up for a [Cloudinary](https://cloudinary.com/users/register_free) account and obtain the Cloud Name, API Key, and API Secret.
4. Rename `.env.example` to `.env` and fill in the necessary environment variables.
5. Install server and frontend dependencies using `npm install`.
6. Launch the frontend and backend using `npm run dev`.
### Env Variables
Rename the `.env.example` file to `.env` and add the following
```
# Set the environment mode: development or production
NODE_ENV=development
# Choose a port for your server
PORT=5000
# Replace with your MongoDB connection URI
MONGO_URI=ADD_YOUR_MONGO_URI
# Replace with your preferred JWT secret key
JWT_SECRET=ADD_YOUR_SECRET
# Replace with your PayPal client ID for payments
PAYPAL_CLIENT_ID=ADD_YOUR_PAYPAL_CLIENT_ID
# Set the number of items per page for pagination
PAGINATION_LIMIT=PAGE_SIZE_NUMBER
# Replace with your Cloudinary cloud name
CLOUDINARY_CLOUD_NAME=ADD_YOUR_CLOUD_NAME
# Replace with your Cloudinary API key
CLOUDINARY_API_KEY=ADD_YOUR_API_KEY
# Replace with your Cloudinary API secret
CLOUDINARY_API_SECRET=ADD_YOUR_API_SECRET
# Cloudinary URL with API key and secret
CLOUDINARY_URL=cloudinary://ADD_YOUR_API_KEY:ADD_YOUR_API_SECRET@ADD_YOUR_CLOUD_NAME
```
### Install Dependencies
```
# Install server and frontend dependencies
npm install
cd frontend
npm install
```
### Run
```
# Launch the frontend (:3000) and backend (:5000)
npm run dev
# Start only the backend server
npm run server
```
## Build & Deploy
For production deployment:
1. Generate a production build for the frontend using `npm run build`.
2. You can seed the database with sample data using `npm run data:import` and delete all data with `npm run data:destroy`.
---
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Hey there! I'm **Bryan King Pecho**, a passionate software developer behind Gadget Gizmo. Let's connect! 👋
- Email: pechobk@gmail.com
- Portfolio: [bkpecho.tech](https://bkpecho.tech/)
- GitHub: [bkpecho](https://github.com/bkpecho)
- LinkedIn: [in/bkpecho](https://www.linkedin.com/in/bkpecho/)
- Twitter: [@bkpecho](https://twitter.com/bkpecho)