From The Odin Project
Start Screen
Loading Screen
Game Screen
Game Over Screen
Leader Board Screen
- Great thanks to Igor's amazing memory-card, live-link. Inspired by his levels and his custom hooks set up.
- Firebase - Cloud services (database)
- ESLint - A linter tool
- NextJS - Hosting
- Prettier - Code formatter
- Styled Components - CSS in JSS
- Figma - Prototyping software
- NASA - For Planet Images
- Hubble - For Planet Images
- FireStore
- Utilize Google FireBase as BaaS for my leader board
- Learnt NoSQL
- Realtime live update when database is changed
- React custom hooks
- NextJS: Page Routing, Link, Head, Image,
- Learning Figma after switching from Adobe XD
- Loading Screen
The first beneficial change I made was using Figma instead of Adobe XD. Although both have the same capabilities, I can easily pull out my Figma designs over the browser. It also offers direct CSS information which made creating the design much faster. I am looking into playing with Framer as my next prototyping tool. It has a perfect library called Framer Motion that I hope can make designing website even faster.
One thing that I really found fascinating to learn was using Firebase's Firestore. I put it off due to fearing it will be very complicated but after playing around and creating a realtime live update leader board page, I learned that it's so, so easy to use! As I learn more as a web developer, it becomes a bit harder to try new libraries, frameworks, or tools. But in doing so, I limit my capabilities. Learning Firebase was a right choice I made and to you reading this, don't stop learning something because of fear of difficulty. It will get easier with time.
I am very happy with this project overall because I exceeded my expectations in many areas. I, at first, considered the game to be a very simple image shuffle and simply reset the score when game over. But now, I have added a actual Live leader board! That to me really fascinates me. People can actually play it! Wow! I also added levels, shuffle animations, a gameover page, a loading page, and a start page.
I like that I challenged myself to push the expectations of a project beyond the usual. I created a project that I am quite happy with :)
- Although the project was completed well, I neglected daily session planning where I reflect every 20-30 minutes and plan my next goals; I neglected my life in areas of reading and journaling and will be going back to it.
- I will continue to push the standards of expectation a bit further in myself everytime. I hope that in my next few projects, I want to create a two player game.
- Do better organization in my code and do this more often. I ended up spending more time debugging than writing.
- Use Framer Motion and Framer!
This project was completed from May 31st, 2021 - June 11th, 2021, dedicating about 6-8 hours everyday, in total 72 - 96 hours.