Pokemon Quizzr

Pokemon Quizzr is a web quiz app that lets you browse and search all 1025 pokemon on the Pokedex, play a quiz game of any pokemon generation of your choice, and tracks your score to be display on the Leaderboard.

Try it here!

Pokemon-Quizzr

Logins

email: red.pokequizzr@gmail.com

password: chicken123!

email: ash.pokequizr@gmail.com

password: chicken123!

Tech Stack

ReactJS
Firebase
Firestore
Pokemon API
Netlify
React Router
React Bootstrap
CSS
Timer-react-hook
Use-sound react-hook

Introduction

This project was the 4th and Final one for the General Assembly Software Engineering Immersive bootcamp.

This project was inspired to utilise APIs, Fronend (React) and Backend (Firebase/Firestore) to showcase the skills I have learned in Full Stack development.

Features

Users can access Pokedex to browse and search pokemons.
Users can view Leaderboard to see who is on Top 10 scores.
Users can Sign in with Google Account to Play the Pokemon Quiz Game.

App is responsive on all screens (mobile, large desktop screens).
App features Home, Pokedex, PokeQuiz, and Leaderboard Routes.
App has responsive Navigation bar and footer.
App has Loading indicator when loading data

Home page displays landing page text, Sign In/ Play Quiz Button, Featured Pokemon Carousel, Mini Leaderboard(Top 5).
Featured Pokemon Carousel randomly displays data on from 1025 pokemons on page refresh.

Pokedex has Search and Browse Pokemon Generation (1-8) function to find data on all 1025 Pokemon.
Pokedex displays Modal data for each pokemon clicked.
Pokedex displays Pokemon image, gif, id, species, element types, egg group, height, and text entry.

PokeQuiz displays User data (Name, Score and Pokeballs earned).
PokeQuiz features option to choose which Generation(1-8) to Quiz.
PokeQuiz features silhouette guessing game.
PokeQuiz tallies and display your score after 5 questions.
PokeQuiz has sound effects and background music that stops when game ends.
PokeQuiz gets random questions and shuffled answer options from Pokemon API.
PokeQuiz has 10 second timer.

Leaderboard displays Top 10 players with the highest scores.

Users can Sign out from the Navigation Bar.

Approach

In my Final Project in General Assembly, I wanted to do a web app where I can apply the things that I have learned in Full stack development. For this reason, I thought of a project that would utilise APIs, Frontend client, and backend server. As a result, I decided to opt for a Quiz game web app built on Pokemon API, React JS, and Firebase/ Firestore where users can sign in, browse data, play quizzes and record scores on a leaderboard.