Infinite Shops - E-Commerce Website

Table of Contents

• Overview
• Features
• Getting Started
• Usage
• Sorting Options
• Pages
• Theme Options
• Payment
• Technologies Used
• Contact

Overview

Infinite Shops is a feature-rich e-commerce website built using Next.js and Tailwind CSS, featuring a seamless shopping experience with the power of Flutterwave as the payment gateway. Our primary goal is to provide a highly performant, user-friendly, and secure platform for users to browse, purchase, and manage products.

Visit the site: Infinite Shops

Features

• Server-Side Rendering (SSR): Utilizes Next.js to provide a fast and responsive user experience.
• User Authentication: Includes Sign In and Sign Out functionality for personalized experiences.
• Shopping Cart: Allows users to add and manage items in their shopping cart.
• Transaction History: Tracks and displays users' transaction history.
• Product Listings: Displays a wide range of products with details and prices.
• Product Details: Allows users to view detailed information about individual products.
• Payment Gateway: Utilizes Flutterwave for secure online payments.
• Product Sorting: Users can sort products based on:
  • Time created
  • Price from low to high
  • Price from high to low

Getting Started

To set up and run this project locally, follow these steps:

1. Clone this repository:

   git clone https://github.com/sammy-jeff/Infinite-shops.git
   

2. Change to the project directory:

   cd infinite-shops-2
   

3. Install the required dependencies:

   npm install
   

4. Create a .env.local file and store all your sensitive keys there.

5. Start the developement server:

   npm run dev
   

6. Open your web browser and access the site locally at http://localhost:3000 (or your specified port).

Usage

Infinite Shops provides an intuitive and user-friendly interface. Here's how to use it:

Home Page: Browse a wide range of products.

Sign In and Sign Out: Manage your account and track transactions.

Cart: Add, remove, and manage items in your shopping cart.

Transaction: View your transaction history.

Products: Explore detailed product listings.

Individual Product: View in-depth information about a specific product.

Sorting Options

Infinite Shops offers the following product sorting options:

Time Created: Sort products based on the time they were added to the platform.

Price from Low to High: Arrange products in ascending order of price.

Price from High to Low: Arrange products in descending order of price.

Pages

Home: The landing page featuring a wide range of products.

Sign In: Log in or create an account.

Sign Up: Create a new account.

Cart: View and manage the contents of your shopping cart, in addition, next.js latest advanced routing option (parallel and intercepting routing) was added to this page to enhance user experience.

Transaction: Track your transaction history.

Products: Explore detailed product listings.

Individual Product: View information about a specific product.

Theme Options

Infinite Shops offers both Light Mode and Dark Mode themes to enhance the user experience. Users can select their preferred theme for comfortable browsing, day or night.

Payment

Use these cards if you want the payment to succeed.

Card1:

Type : Mastercard

Card Number: 5531886652142950

CVV: 564

PIN: 3310

Expiry: 09/32

OTP: 12345

Card2:

Type : Visa card

Card Number: 4187427415564246

CVV: 828

PIN: 3310

Expiry: 09/32

OTP: 12345

Technologies Used

Next.js

Tailwind CSS

Flutterwave (Payment Gateway)

Zustand (State Management)

Supabase (Backend and Authentication)

Sanity.io (Content Management)

Contact

If you have any questions, suggestions, or need assistance, feel free to reach me at [email protected] or [email protected].

© 2023 Infinite Shops All rights reserved.