React learning - IIM

Goals

For this course, we need to create a little website that use an API and React without framework.

Theme is free to choose and we decided to take Pokemon and more exactly TCG (Trading Card Game).

Notion to explored

Basics	React	To go further
JS	CLI (CRA/vite)	Store
ES6+	DevTools React	Suspense
map/reduce/filter	Clean code	Creative coding (Natif, GSAP …)
(localstorage)	Gestion de l’état	Docker
Git et GitHub	Architecture	Architecture microservice
GitHub Actions	Composants fonctionnels
Documentation	JSX
	keys
	évènements
	Hooks
	Formulaires
	Listes
	React router
	Gestion CSS
	Mise en ligne
	Tests

Our Features

• Home page with project explanation
• TCG
  • Index (search all card for a Pokemon) $ha
• Boosters
  • Index (all boosters)
  • Show (all cards of a booster)
  • Opening (Open a booster pack)
• Pokedex
  • Index (Search for a Pokemon)
  • Show (View all info for a Pokemon)
• Composants
  • Card (Need to show a Pokemon card, with hover effect and holographic effect)
  • Pokemon (Show a pokemon with design)

Technologies

• React
• Vite
• TailwindCSS
• React-Router-DOM
• Pokemon TCG API
• PokeAPI

Project Setup

# Install dependencies
$ yarn 

# Run server
$ yarn dev

Inspiration

We took our inspiration on Simon Goellner project.

You can find his project here 👉 https://poke-holo.simey.me/ .

Collaborators

• Steven MADI ▶️ Oxyzal
• Yannis OBERT
• Alexandre CHARLES ▶️ seinokoula
• Guillaume FINE ▶️ Cosmeak

And our teacher for this week: Alexandre ZERAH