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

Related tags

Boilerplate react pokemon redux-thunk api-rest dynamic-routing
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

Merve Karabulut 11 Feb 24, 2022
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

manny 2 Feb 14, 2022
My personal website. A simple, easily modifiable, fully responsive, modern, single-page application built using Typescript, React and Express.
My personal website. A simple, easily modifiable, fully responsive, modern, single-page application built using Typescript, React and Express.

Personal Website See: mruzunov.com. My personal website. A simple, easily modifiable, fully responsive, modern, single-page application built using Re

null 6 Dec 29, 2022
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

null 0 Dec 25, 2021
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

Marcos Andre 3 Mar 7, 2022
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

GitGood 22 Jun 26, 2022
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

Amine Ait Ouazghour 40 Oct 8, 2022
A GraphQL-powered, single-page dashboard application for Saleor.
A GraphQL-powered, single-page dashboard application for Saleor.

Saleor Dashboard A GraphQL-powered, single-page dashboard application for Saleor. Demo See the public demo of Saleor Dashboard! Or launch the demo on

Saleor Commerce 616 Dec 29, 2022
Starter template for SPFx Single Page Application (SPA) with React.

employee-inventory Summary Short summary on functionality and used technologies. [picture of the solution in action, if possible] Used SharePoint Fram

null 2 Oct 6, 2022
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
GitHub
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 137 Jan 2, 2023
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
js-generate-password is usable for every javascript and typescript based project like react, vue, node, etc. it used to generate passwords that may contain alphabets, number and symbols. The options parameter enables the user to enable or disable the characters that are used to generate random password.

js-generate-password js-generate-password is usable for every javascript and typescript based project like react, vue, node, etc. it used to generate

Ahmad Joya 38 Dec 1, 2022
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 8 Dec 7, 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
A TypeScript version of the Nextacular project. An open-source starter kit that will help you build full-stack multi-tenant SaaS platforms efficiently and help you focus on developing your core SaaS features. Built on top of popular and modern t…

Nextacular ?? - TypeScript ‼️ Experimental and In Progress - ?? Use with caution Quickly launch multi-tenant SaaS applications An open-source starter

Nextacular 19 Dec 1, 2022