MiscAvatars

A simple ecommerce store built to practice the Context API.

Tech Stack

React

ReactJS for handling UI changes

React Context API

This was used for managing state across the application

TailwindCSS

This was used for styling pages
###Jest and React Testing Library
This was used for unit tests

Project Structure

Assets :- This is where the images and fonts used in the project are stored
Components :- This is where the components utilised across the app are stored
Context :- This is where the context module that provides the app’s universal logic is stored
Features :- This is where the functions of the app are stored. reusable components are used in making containers that provide a necessary function for each feature of the app
Pages :- The pages that are rendered in the app are stored here
Routes :- The app’s routes are configured here
Providers :- The app’s providers i.e the context provider and paypal’s provider are configured here
Tests :- items/libraries needed for testing components are stored here

🚀 Live demo

Features

• Adding to and removing from cart
• Dark and Light Mode
• Paypal Web SDK for payments

Screenshots

Home Page

Cart (Dark Mode)

Product Page (Dark Mode)

Checkout Page (Dark Mode)

Running Tests

To run tests, run the following command

npm run test

Environment Variables

To run this project, you will need to add the following environment variables to your .env file
REACT_APP_PAYPAL_CLIENT_ID

Installation

Install my-project with npm

npm install 
  cd src

Authors

• @temiloluwa-js