This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description

Overview

Pokemon Training Card Game

Browse through 250 pokemon cards and get info like attacks, number of pokedex, value of the cards and pokemon type.

Milestone 1:

  • Followed Gitflow
  • Created work-branch
  • Created a new react-app
  • Configured components
  • Installed Redux and dependencies
    • Followed ducks pattern 🦆
  • Added Home Page component 🏠
  • Templated design followed 🎨
    • Added styles 🧑‍🎨
  • Get data from store
  • Added Details component 🕵️
  • Showed info from pokemon selected
  • Followed template design
  • Added Navbar component 🌐
    • Added back button ◀️
    • Added drop down list 📃
    • Filtered Pokemon by type 🔥 🌊 👁️ 🐉 🦾 🌱
  • Added dynamic routing for each single pokemon
  • Added unit test
  • Deployed web app
  • Recorded video presentation

Built With

  • React & Redux
  • Visual Studio Code
  • Linters
  • Deployed in Heroku

Live demo and video description

Video description

PokemonTCG-SPA

Set up locally

Once you completed this steps you should see the app running at: http://localhost:3000/ in your browser.

Author 👤

👤 Alejandro Ramos

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page

Original Design:

Nelson Sakwa Behance Profile

Show your support

Give a ⭐️ if you like this project!

License

  • MIT License
You might also like...
Upschool-beerpong - Search/Filter beer for beerpong, built with react.js
Upschool-beerpong - Search/Filter beer for beerpong, built with react.js

Beer for Beerpong 🍺 You can search beer to play beer pong 🍻 🏓 You sink it, th

An open source software engineering study tool that allows users to create topic categories and save useful resources as flashcards.
An open source software engineering study tool that allows users to create topic categories and save useful resources as flashcards.

GitGood An open source software engineering study tool that allows users to create topic categories and save useful resources as flashcards. Want to C

The complete type-safe MUI and react-hook-form combo and beyond with simple API

The complete type-safe MUI and react-hook-form combo and beyond with simple API

A react scaffold with redux and its best practice

React Redux Scaffold This is a seed project for building static react website, not for build universal app. Feature ES6+ support via babel Redux and i

Click Memory Game (using React, running through Github)
Click Memory Game (using React, running through Github)

Clicky Game Georgia Tech Boot Camp - Clicky Game - Assignment #15 React Github Game Instructions Try to click on every cartoon picture once. When you

A multi-page marketing page by react and

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

Example project on how to create a react single page application that authenticates with Auth0 and has private routes.

ReactJS Auth0 Bootstrap Example project on how to create a react single page application that authenticates with Auth0 and has private routes. You can

Single-Page Application For An Educational Website Using React

About A React Single-Page Application For An Educational Website Visit The Website From Here OpenSchool Usage As it is a React app, you must run a few

Comments
  • Pokemon Cards-SPA

    Pokemon Cards-SPA

    For this capstone project, I did:

    • Followed Gitflow
    • Created work-branch
    • Created a new react-app
    • Configured components
    • Installed Redux and dependencies
    • Followed ducks pattern 🦆
    • Added Home Page component 🏠
      • Templated design followed 🎨
      • Added styles 🧑‍🎨
      • Get data from the store
    • Added Details component 🕵️
      • Showed info from pokemon selected
      • Followed template design
    • Added Navbar component 🌐
      • Added back button ◀️
      • Added drop-down list 📃
      • Filtered Pokemon by type 🔥 🌊 👁️ 🐉 🦾 🌱
    • Added dynamic routing for each single pokemon
    • Added unit test
    • Deployed web app
    • Video Presentation
    opened by AlexRS90 0
Owner
Alejandro Ramos
Computer Systems engineering and full-stack developer with a love for JavaScript. I love to go outside to run and I'm always open to new opportunities.
Alejandro Ramos
Fluid-type-scale-calculator - Generate font size variables for a fluid type scale with CSS clamp

Fluid Type Scale Calculator Generate font size variables for a fluid type scale

Aleksandr Hovhannisyan 133 Nov 24, 2022
Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities. You guys can also contribute in this project if you want to

Jacson Rai 1 Nov 27, 2021
EPYG: Every Place You Go WebSite Bulit Using React

MLH Project - EPYG EPYG: Every Place You Go! Try in link Vercel is used to upload this repository and you can check out this project here. (However, t

null 1 Dec 5, 2021
A simple project that show a list of Superheroes and a short description.

React Marvel App with Typescript Table of Content About The Project Description Built With Installation Usage Demo Contact About The Project Descripti

José Miguel DP 2 Jun 3, 2022
I have created a Login page type of app using react.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 1 Dec 28, 2021
A front end project using react js, html and CSS to fetch data from the pokemon API.

A front end project using react js, html and CSS to fetch data from the pokemon API. The web application searches for Pokemon characters and displays their stats and images.

Vincent Nyapuodi 1 Nov 1, 2021
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Udit Kumar 7 Aug 31, 2022
Make reusable React cards, pop-ups or modals as an async function

About Create reusable asynchronous functional cards. Allows to create the cards used on the pages once and allows them to be called as an async functi

Mustafa KURU 7 Nov 15, 2021
Nextacular 19 Dec 1, 2022