Quick Pick

Description

Quick Pick is a modern, responsive e-commerce web application built with React and a clean, intuitive UI. It offers a seamless shopping experience, allowing customers to browse, search, and filter products, manage their cart, and complete purchases effortlessly. Administrators can easily manage the product inventory through a user-friendly interface.

Features

Product Management

• Responsive Catalog: Browse products in a responsive grid layout.
• Add Products: Create new products with name, price, and image.
• Edit Products: Update existing product details.
• Delete Products: Remove products from the inventory.
• Search & Filter: Quickly find products by name or category.

Shopping Cart

• Add to Cart: Add products to your shopping cart.
• Quantity Management: Increase or decrease item quantities.
• Remove Items: Delete individual items from the cart.
• Cart Summary: View total price and item count.
• Clear Cart: Empty your entire cart with one click.

User Interface

• Responsive Design: Optimized for desktop, tablet, and mobile.
• Multiple Themes: Switch between light and dark modes dynamically.
• Smooth Animations: Leveraging Framer Motion for transitions.
• Modern Components: Built with DaisyUI and TailwindCSS.

Image Search Integration

• Unsplash API: Search and select product images.
• Category Selection: Browse predefined image categories.
• Image Preview: Preview and choose the best image before adding.

Tech Stack

Frontend

• React
• Vite
• TailwindCSS & DaisyUI
• Framer Motion (animations)
• React Router
• Zustand (state management)
• Axios
• React Hot Toast (notifications)
• Lucide React (icons)

Backend

• Node.js & Express
• Sequelize ORM
• Neon PostgreSQL
• CORS
• Dotenv

Integrations

• Unsplash API for image search

Setup Instructions

Prerequisites

• Node.js (v14 or higher)
• Unsplash API key

Frontend Setup

1. Clone the repository:

git clone https://github.com/aamrindersingh/react-end-term-project.git
cd quick-pick

2. Navigate to the frontend directory:

cd frontend

3. Install dependencies:

npm install

4. Start the frontend development server:

npm run dev

Backend Setup

1. Navigate to the backend directory

cd quick-pick/backend

2. Install dependencies

npm install

3. Create .env file and add your configuration:

DATABASE_URL=postgres://user:password@localhost:5432/quick_pick

4. Start the server

npm run dev

Screenshots