pikocanfly / poke-fun Goto Github PK

PokeFun is a full stack application created with Next.js + Typescript. The goal was to create a Pokedex and Pokequiz with simple UI yet friendly UX that is reflective of the Pokemon brand. On Pokefun users can browse 1010 pokemons through the Pokedex and play multi level quizzes where they get to choose the amount of questions they want in each quiz.

I chose to create a Pokémon application because, in my opinion, the expansive diversity of Pokémon species represents a remarkable showcase of human creativity with an aesthetic that could be described as effortlessly simple, which is what I also aimed for when designing this application. I created UI components programmatically rather than importing precreated images; the Pokéballs on the frontpage and loading segments are made of divs.

With the help of the Pokémon API, I was able to develop my async programming skills, as well as my knowledge and understanding of server-side processes vs. client-side processes. To that effect, I chose to create pages that utilise dynamic rendering and others that utilise client-side rendering. I also utilised Next.js's fantastic fallback functionalities, as well as error-handling utilities.

For a seamless UI development experience, I chose to incorporate Tailwind CSS, as it synergizes well with Next.js.

• Landing page with cute animated Pokeballs.
• Pokedex with 1010 pokemons, designed to mimic the design of an actual Pokedex
• Quiz options page where user can select the difficulty level and number of questions.
• Multiple choice quiz with interactive UI.

In conclusion, this project was both enjoyable and educational, enabling me to combine my passion for Pokémon with the opportunity to master various web development technologies and principles.

The app quiz app underwent many evolutions thanks to the suggestions of the wonderful Pokemon fans of Reddit.