/pokemon_store

Pokémon Store is a shopping cart project to purchase wild Pokémon. It was developed using the ReactJS framework.

Primary LanguageJavaScriptMIT LicenseMIT

Pokemon Store

🚀 A demo of Pokemon Store is available here.

Overview

Pokémon Store is a shopping cart project to purchase wild Pokémon. It was developed using the ReactJS framework.

The store is presented according to the type of Pokémon. There are 18-type Pokémon, but the store only has two types: Fire and Water.

This project is organized into the following components:

  • Cart
    • In this component, the detailed summary of the purchased items was presented.
      • Each purchased item presents:
        • Image,
        • Name,
        • Price = Price x Quantity,
        • Quantity, and
        • Controls to add or remove items.
      • Total Weight (Sum of total weight),
      • Subtotal (Sum of the total price of the items),
      • Shipping ($0.1 per kilogram),
      • Total (Subtotal + Shipping), and
      • Finish shopping (Catch 'em all!).
  • Footer
    • In this component, you can see developer info.
  • Header
    • In this component, the navigation bar has two buttons to change between the types of Pokémon:
      • In the Fire Button, you can see the complete list of fire-type Pokémon.
      • In the Water Button, you can see the full list of water-type Pokémon.
    • Also, the number of items purchased appears on the right side.
      • The Cart Button allows to show or hide the detailed summary of the purchased items.
  • Modal
    • In this component, the modal thanks to checkout and restarting the purchase process.
  • ProductsGrid
    • This component presents the list of the available Pokémon.
    • Each Pokémon card has the following features:
      • Image,
      • Name,
      • Weight [kg],
      • Price based on its base_experience, and
      • Button for add to cart (Catch it!).
  • Styling
    • This component is used to define the color palette of each store in a dynamic way. It does not alter the application behavior.

Technologies

  • The project was developed using the framework ReactJS.
  • CSS was used for the basic styling of the navbar, forms, and other components.
  • react-icons was used for complementary styling.
  • react-modal was used in the checkout button, and restarting the purchase process.
  • In order to have a better user experience, react-infinite-scroller was used to load content.
  • The RESTful Pokémon API PokéAPI was used to request the Pokémon.
  • Axios was used as HTTP client.
  • Finally, Heroku was used to deploy the project.

Development

# 1. Check if node is installed
node -v
npm -v

# 2. Clone the project
git clone git@github.com:mafda/pokemon_store.git

# 2.1. Go to the project directory
cd pokemon_store/frontend

# 3. Install the project dependencies
npm install

# 5. Run the server
npm start

# 6. Enjoy it!
echo "Enjoy it! :)"

Done! Now navigate to http://localhost:3000/

Heroku Deploy

# 1. Create the app on Heroku 
heroku create -b https://github.com/mars/create-react-app-buildpack.git awesome-pokemon-store

# 2. Deploy it :)
git subtree push --prefix frontend heroku master

# 3. Enjoy it!
echo "Well done! :)"

Done! Now navigate to https://awesome-pokemon-store.herokuapp.com/

The application link will depend on the application name registered on Heroku.

Goals

The MVP (Minimum Viable Product) consists of:

  • Product catalog.
  • Side cart.
  • Cart summary.
  • 2 stores with different styles and types of Pokémon.

Bonus features:

  • Search bar to filter Pokémon.
  • Checkout button, restarting the purchase process.
  • Modal thanks to checkout.
  • Save user purchase data locally so as not to lose it when refreshing the page.

Prototype

prototype pokemon store

Results

Desktop Mobile

Desktop

preview desktop

Mobile

preview mobile

License

License: MIT

References

</> with 💙 by mafda.