pedrovsiqueira/pokemon-ecommerce

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

pokemon-ecommerce's Issues

Create button component for details and add to cart

• Create a generic button for details and add to cart for the cards.

Create Readme

• Create initial readme

Create home component

• Remove logic from the App component and create a Home component

Create details modal

• Create a modal to show the pokemon stats and details

Create Header component inside Home Page

• Create a responsive header that will include the pokemon image store, search input, cart and last orders page.

Create cart component

• Create component that will have the cart

No search and empty cart messages

Add message when cart is empty and when no search results are found.

Update api calls to call only when clicking on details

Update api calls to call only when clicking on details

Create button icon component

• Create button icon component to be used for closing modal.

Create service to handle API calls

• Create a service to handle API calls to the pokemon API (https://pokeapi.co/api/v2/)
• Create a context to keep the state and API calls in one place.

Create cards to display pokemon data

• Create initial card to display pokemon data with Name, Image, Price and details option
• Two buttons (add to cart) and (details)
• Create new function to fetch pokemon data
• Format pokemon state with the data that will be used on the card.

Create search input

• Create input with search icon.
• Allow the user to type and handle calls based on what the user typed.