SHOP SPHERE

Description

This project is a demonstration of an e-commerce website designed to simulate the online shopping experience. It features a robust user system, allowing visitors to sign up for an account or log in to access personalized features. Upon authentication, users are directed to the home page where they can browse a curated selection of products.

Users can easily add products to their virtual cart and proceed to the cart page to review their selections. The project includes a mock checkout process, completing the end-to-end user journey typical of e-commerce platforms.

Features

USER AUTHENTICATION: Secure sign-up and login functionality to create a personal account and access user-specific features.

HOME PAGE: A welcoming landing page that displays a variety of products.

SHOPPING CART: A dynamic cart system where users can add products, adjust quantities, or remove items. The cart updates in real time as items are added or changed.

CHECKOUT PROCESS: A simulated checkout flow where users can review their final order, and complete the purchase.

SEARCH FUNCTIONALITY: Implemented a search bar where users can enter keywords to find specific products.

FILTER: Allow users to filter products based on categories (e.g., clothing, electronics, home decor).

UPVOTES: Added a “like” button to each product card. Displays the total number of likes for each product. Users can click the button to express their preference for a product.

Technologies Used

React: For dynamic front-end development

Node.js: For backend server operations

PostgreSQL: For database management

Tailwind CSS: For utility-first styling

bcrypt: For secure password hashing

Setup/Installation

react: Install Node.js (includes npm). Use npx create-react-app your-app-name to set up a new React project.

node.js: Download and install Node.js from the official website. Use npm init in your project directory to create a package.json file.

PostgreSQL: Download and install PostgreSQL from the official website. Set up a new database and user for your project.

Tailwind CSS: Install Tailwind via npm: npm install tailwindcss. Follow the official guide to include it in your project.

bcrypt: Install bcrypt with npm: npm install bcrypt.