/e-commerce

Primary LanguageJavaScript

The TasteNshop E-commerce Website

Julia Logo

Contributors Forks Stars License Issues

Introduction

Welcome to the TasteNshop E-commerce website, a React-based application designed to offer a seamless shopping experience. This README provides a detailed guide for this codebase, how to set it up, and the key components that make up the application.

Table of Contents

  1. Project Overview
  2. Features
  3. Project Structure
  4. Prerequisites
  5. Components
  • Navbar
  • Home
  • Details
  • Cart
  • Footer
  1. Styling
  2. Future Enhancements
  3. Contributing
  4. License

The Project Overview

  • TasteNshop is a modern e-commerce platform built with React.
  • The app allows users to browse products, add them to their cart, and manage their shopping experience efficiently.
  • The application is designed with performance in mind, providing a responsive and interactive user interface.

Some Features

  • Product Browsing: Users can browse through various products available on the platform.

  • Cart Management: Add products from the cart, and view the cart's total cost.

  • Search Functionality: Quickly search for products using the search bar.

  • Wishlist: Save products for later on by adding them to a wishlist.

  • Responsive Design: The application is fully responsive, ensuring a great user experience across devices.

The Project Structure

css

TasteNshop/ │ ├── public/ │ |_ index.html │
│ ├── src/ │ ├── components/ │ │ ├── Navbar.js │ │ ├── Home.js │ │ └── Search.js │ │ ├── Details.js │ │ ├── Cart.js │ │ ├── Footer.js │ │ │ ├── App.js │ ├── App.css │ |____ index.js │
│ ├── package.json ├── README.md

Prerequisites

To make sure this application does work, ensure you have the following installed on your machine:

  • Node.js
  • npm or yarn

Installation

  1. Clone the repository:
  • git clone
git@github.com:Fixc-ray/e-commerce.git
  1. Navigate to the project directory:

cd e-commerce

  1. Install the dependencies:
  • Copy code
npm install

or

yarn install

Running the Application

  • To start this development server, run:
npm start

or

yarn start

The application will be accessible at http://localhost:3000.

Components

Navbar

  • File: src/components/Navbar.js.

  • Description: The Navbar component provides the navigation bar for the application, including the logo, main menu items, a profile icon, and a wishlist link. It also includes a theme toggle feature.

Home

  • File: src/components/Home.js.

  • Description: The Home component fetches and displays the list of products. It also integrates the Search component to allow users to search for products.

Details

  • File: src/components/Details.js.

  • Description: The Details component displays the product details, including name, description, price, and category. It also handles adding items to the cart.

Cart

  • File: src/components/Cart.js.

  • Description: The Cart component displays the items added to the cart, calculates the total price, and allows users to remove items from the cart.

Footer

  • File: src/components/Footer.js.

  • Description: The Footer component provides additional information about the website, including an "About Us" section and contact information.

Styling

  • File: src/App.css.

  • Description: The primary CSS file for styling the application. It also includes styles for layouts, colors, and a responsive design.

  • Footer Styling: The footer is styled with a dark background and light text to create a modern look. Icons are styled using Font Awesome.

Future Enhancements

  • User Authentication: Implements user authentication for a personalized shopping experience.

  • Payment Integration: Integrate a payment gateway to facilitate online transactions.

  • Product Reviews: Allow users to leave reviews and ratings for products.

Contributions

  • Contributions are all Welcome!! :)

  • Please fork the repository and create a pull request with your changes.

  • Ensure that your code follows the project's coding standards and includes appropriate documentation.

Challenges

Some challenges we faced as a group are the toggle Dark, where the user can change from light mode to dark mode and vice versa.

We were able to solve this as we had not styled the navbar toggle area.

  • It is also worthy to note that the add to cart function does not work as we (the developers) are still figuring out a solution on this.

  • The profile at the Navbar was intended to have been linked with a component called Profile.js where the user can be linked to a UI to login their credentials while having the possibility to create an account.

  • There also are categories and Services which we had plans for.

We will try to make sure that this problem will be solved as soon as possible.

This application was coded and compiled by: Ray, Keith, Bridget, Margaret