viniciusbsneto/catch-and-mall

Catch N' Mall is an online Pokémon store that consumes PokeAPI data. Developed with React, React Context API and Styled-Components.

🔴 Catch N' Mall ⚪

Catch N' Mall. An online Pokémon store!

Status: Finished 🚧 Testing... 🚧

About • Features • Pending (to do) • How it works • Tech Stack • Author • License

💬 About

Catch N' Mall - is a an online Pokémon store. Try out at https://catch-n-mall.netlify.app/

---

Layout

Figma

---

💡 Features

• Homepage with water or fire Pokémon from PokeAPI
  • PokeAPI
• 2 themed stores - 💧 and 🔥
  • Use the theme switcher in the header to switch between water or fire themed store.
• Add pokémon to pokeball (add to cart)
• Release pokémon from pokeball (remove from cart)
• Increase or decrease pokémon amount
• Show subtotal for every pokémon
• Show shipping value
• Show total (general subtotal plus shipping)
• Pokeball stored in local storage so it's not lost if the browser is closed

---

🛠️ Pending (in progress...) ⏳

1. Responsive Design

• Application is not entirely responsive yet. Still working on that.
• UI is now fully responsive

2. Tests

• I'm currently writing tests with Jest. I should be pushing some tests very soon.

3. Search input

• I intend to add a search input in the header so users can search for pokémon.

4. Pagination

• I plan on adding pagination to the API results so all pokémon are not loaded at once.

5. Improve performance

• Look for re-rendering and eliminate them.

📌 Pre-requisites

Before you begin, you will need to have the following tools installed on your machine: [Git] (https://git-scm.com), [Yarn] (https://yarnpkg.com/). In addition, it is good to have an editor to work with the code like [VSCode] (https://code.visualstudio.com/)

Running the web application

# Clone this repository
$ git clone git@github.com:viniciusbsneto/catch-and-mall.git

# Access the project folder
$ cd catch-and-mall/web

# Install dependencies
$ yarn install

# Start the application
yarn start

# Yarn script will start the application at http://localhost:3000

---

🧰 Tech Stack

The following tools were used in the construction of the project:

Catch N' Mall Web Application

• Typescript
• React
• Create-React-App
• Styled-Components
• Polished
• Iconify
• React-Switch
• Axios
• Immer

See the file package.json

Utilitários

• Randomization: Seedrandom
• Code Editor: Visual Studio Code
• Linter: ESLint
• Code Formatter: Prettier
• Editor Plugin: EditorConfig
• Markdown: StackEdit, Markdown Emoji
• Layout: Figma

---

🤝 How to contribute

1. Fork the project.
2. Create a new branch with your changes: git checkout -b my-feature
3. Save your changes and create a commit message telling you what you did: git commit -m" feature: My new feature "
4. Submit your changes: git push origin my-feature

---

🧑‍💻 Author

---

📝 License

This project is under the license MIT.

Made with love by Vinícius Neto 👋🏽 Get in Touch!