PokéMatch Browser Game built with React and NES.CSS
A pokemon-inspired React Game SPA (single-page-application) featuring a rich UX including a welcome screen, a rules popup, a popup containing copyright information, an introduction by a pokemon professor and the actual game.
You can see a GIF of my application below. I am looking through the rules, skipping through the introduction, opening the copyright info popup and playing a couple of rounds..
I let Google Lighthouse run over my application to check for it's performance, accessibility, use of best practices and SEO optimization. You can view the results right below this paragraph.
- Immersive UX including Introduction, Rules and Welcome Screen
- Various popups with additional info
- High Score & Score Reset Feature
- Toggleable Soundtrack & onClick Sound Effects
- React
- CSS (CSS Modules)
- NES.CSS
- Photoshop
- NPM
- using component lifecycle hooks such as the useEffect hook to work with components throughout their lifespan
- refactoring code to fit the "Automatic Batching" approach of React State, including state updater functions
- using cleanup functions to improve an application's performance and prevent unintended side effects
My motivation in building this project was to learn more about functional components and the way they handled component lifecycles, which mostly reside in useEffect hooks. I certainly bumped into some issues when starting out and that's perfectly good, because that way I learnt why those issues occured, learnt to fix them and how to prevent them from happening in the future - more on that in the "What I learned" tab.
All rights to all pictures, music and names on this website belong to Nintendo/Creatures Inc. and GAME FREAK. I only used them to build an environment for myself to learn coding in React with. If you are an owner of the copyrighted material, please let me know if you have any issues with this and I'll take the page down immediately.