diff --git a/README.md b/README.md index 7447a90..aca3ee5 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,9 @@ [![Website Status](https://img.shields.io/badge/Website_Status-UP-green.svg)](https://gadgetgizmo.shop/) [![Follow Me](https://img.shields.io/twitter/follow/bkpecho?style=social)](https://twitter.com/bkpecho) -Gadget Gizmo is a robust eCommerce platform developed with the MERN stack and Redux, offering a complete shopping cart experience and streamlined payment processing, including PayPal and credit/debit options. +[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/** @@ -18,46 +20,48 @@ Gadget Gizmo is a robust eCommerce platform developed with the MERN stack and Re - [Install Dependencies](#install-dependencies) - [Run](#run) - [Build & Deploy](#build--deploy) - - [Seed Database](#seed-database) - [License](#license) - [Author](#author) -## Features - -- Full featured shopping cart -- Product reviews and ratings -- Top products carousel -- Product pagination -- Product search feature -- User profile with orders -- Admin product management -- Admin user management -- Admin Order details page -- Mark orders as delivered option -- Checkout process (shipping, payment method, etc) -- PayPal / credit card integration -- Cloudinary image storage -- Database seeder (products & users) +## Key Features +Gadget Gizmo boasts a wide range of features including: + +- **Comprehensive Shopping Cart Functionality:** Seamlessly add, remove, and manage items in the shopping cart. +- **Streamlined Checkout Process:** Effortlessly navigate the checkout process for a smooth transaction. +- **Efficient Admin Product Management:** Admins enjoy efficient product management capabilities. +- **User Profiles with Order History:** Users can access their order history conveniently. +- **Detailed Admin Order View:** Administrators gain insights with a detailed view of orders. +- **Simplified PayPal and Credit Card Integration:** Effortless payment options for users. +- **User Reviews and Product Ratings:** Users can contribute reviews and ratings for products. +- **Top Products Showcase Carousel:** Highlight top products in an engaging carousel. +- **Product Search Capability:** Easily find desired products through the search feature. +- **Cloudinary-Powered Image Storage:** Cloud-based image storage ensures optimal performance. +- **Order Delivery Status Updates:** Users can stay informed about their order delivery status. +- **Product Pagination for Easy Browsing:** Browse products seamlessly with pagination. ## Technology Stack +The platform is built using the following technologies: -- Frontend: React, Redux -- Backend: Node.js, Express -- Database: MongoDB -- Image Storage: Cloudinary -- Payment Integration: PayPal JS SDK -- Styling: Bootstrap -- Build Tool: Vite -- Deployment: Cyclic, Fly.io +- **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: -- Create a MongoDB database and obtain your `MongoDB URI` - [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register) -- Create a PayPal account and obtain your `Client ID` - [PayPal Developer](https://developer.paypal.com/) -- Sign up for a Cloudinary account and obtain your `Cloud Name`, `API Key`, and `API Secret` - [Cloudinary](https://cloudinary.com/users/register_free) +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 ``` @@ -95,6 +99,7 @@ CLOUDINARY_URL=cloudinary://ADD_YOUR_API_KEY:ADD_YOUR_API_SECRET@ADD_YOUR_CLOUD_ ### Install Dependencies ``` +# Install server and frontend dependencies npm install cd frontend npm install @@ -103,32 +108,18 @@ npm install ### Run ``` -# Run frontend (:3000) & backend (:5000) +# Launch the frontend (:3000) and backend (:5000) npm run dev -# Run backend only +# Start only the backend server npm run server ``` ## Build & Deploy +For production deployment: -``` -# Create frontend prod build -cd frontend -npm run build -``` - -### Seed Database - -You can use the following commands to seed the database with some sample users and products as well as destroy all data - -``` -# Import data -npm run data:import - -# Destroy data -npm run data:destroy -``` +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`. ---