Welcome to Wetto Shop, an e-commerce website that aims to provide a seamless shopping experience by allowing users to browse and purchase products from various categories. The project is developed using React front-end and it involves features such as product listing, filtering, shopping cart management, and user authentication. Below is an overview of the project structure and functionality.

Wetto shop includes the following functionality:

Product Listing: The Products component fetches product data from an API and displays it in a grid format. Users can view product images, titles, prices, ratings, and add products to the shopping cart. Products can be filtered by category using the filter buttons.

Shopping Cart: The Cart component displays the items added to the shopping cart. Users can remove items from the cart and clear the entire cart. The component also provides buttons to proceed to checkout.

Navigation: The Header component includes navigation links to different sections of the website, such as the homepage, about page, and the shopping cart.

User Authentication: The project includes user authentication features like login and sign-up. The SignUp component is an example of a sign-up form that can be used to create a new user account.

Checkout option

• We would like to provide an option for buyers to request shipping of the products to be delivered to their desired destinations.

The project consists of several components that work together to create an ecommerce website. The main components are as follows:

Products: This component displays a list of products fetched from an API. It allows users to filter products by category and add them to the shopping cart.

Carousel: This component implements a carousel that showcases different product images with captions.

Cart: This component displays the items added to the shopping cart. Users can remove items from the cart and proceed to checkout.

Footer: This component represents the footer section of the website, providing information about the partnership groups, an about section, social media links, and contact details.

Header: This component represents the header section of the website, including navigation links.

Home: This component combines the Carousel and Products components to create the homepage of the ecommerce website.

App: This is the main component that handles routing and manages the state of the shopping cart.

SignUp: This component provides a sign-up form for users to create an account.

Login : This component provides a login form for users to log-in to an existing account.

Active records and Sinatra: A web application framework used for building the backend of the app.

Bootstrap/CSS: Markup and styling languages for building the user interface.

REACT: Used for client-side interactivity and enhanced user experience.

Install Node.js and npm (Node Package Manager) on your machine if you haven't already.

Clone the project repository to your local machine.

Open a terminal or command prompt and navigate to the project directory.

Run the command npm install to install the project dependencies.

Once the installation is complete, run the command npm start to start the development server.

Open a web browser and visit http://localhost:3000 to access the ecommerce website.

Teresia Mwangi.

Ryan Bii.

Japheth Yegon.

Christine Mbuvi.

The E-Commerce App is open-source and released under the MIT License.

If you have any questions, suggestions, or issues, please contact our support team