Pokemon E-Commerce

About The Project

I created a Frontend E-Commerce application using the PokéAPI. The following tasks were implemented successfully:

• Product catalog
• Side cart
• Cart Summary
• 3 stores with different styles and types of Pokémon (water, grass and fire)
• Search bar to filter Pokemon
• Checkout button, restarting the checkout process
• Thank you modal when finalizing the purchase
• Save user purchase data locally so you don't lose it when refreshing the page (local storage)
• Tests using React Testing Library and Jest
• Responsive design (starting from 320px and up)

Built With:

• Javascript - An object-oriented computer programming language commonly used to create interactive effects within web browsers.
• ReactJS - A JavaScript library for building user interfaces.
• Styled Components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.

Usage

The project is deployed and can be accessed at https://water-pokemon-shop.netlify.app/ , https://fire-pokemon-shop.netlify.app/ or https://grass-pokemon-shop.netlify.app/

Getting Started

Prerequisites

In order to run this project locally you will need to:

• Clone and install this repository - https://github.com/pedrovsiqueira/pokemon-ecommerce

Installation

1. Clone the repo

git clone https://github.com/pedrovsiqueira/pokemon-ecommerce

2. Install YARN packages

yarn install

3. Rename .env.example to .env

4. Run the app.

yarn start

5. Access the application through the following link afer doing the steps 1 - 4.

http://localhost:3000/

5. If you want to change stores, run the following command

yarn start:fire or yarn start:water

Tests:

Tests were done using jest and react-testing-library. To see the tests run the following commands:

1. Test results

yarn test

2. Test results using coverage

yarn test:coverage

Contact

Pedro Siqueira - email - linkedin - portfolio