A photo tagging app made on React & Firebase
Art by Egor Klyuchnyk
Technologies • Features • Design • Credits • Contact
- React - A JavaScript library for building user interfaces.
- Firebase - Backend development platform.
- bad-words - A JavaScript filter for badwords.
- Figma - Web-based graphics editing tool and UI design app.
All the relevant procedures such as checking robot location/hitbox or player score comparisons are handled server side using Firebase.
Robot City gets realtime updates from Cloud Firestore. When a player scores high enough to be a new top record, it is asked if its score may be recorded. The data that is provided also functions as a source for comprobations to prevent duplicated names.
Considering the fact that a top score can remain at the leaderboard for a long period of time, limiting some word or phrases might help keeping a healthy data. However, this featured is handled by bad-words. Some additions to the blacklist or extra dictionaries may be recommended.
Flexbox/grid layout and media-queries provide a satisfactory experience in small devices and landscape orientations. Robots locations are handled with relative coordinates and includes overflow edge-cases. Using getBoundingClientRect() allowed me to capture elements' position relative to the viewport for this cases.
Based on my experience, prototyping allows a more straightforward implementation. Even though final status may defer from the original design in personal projects, it is definitely worth it in terms of time optimization. I don't consider myself a designer, but creating challenging interfaces is great way to hate yourself polish your CSS skills.
Robot City was designed by illustrator and concept artist Egor Klyuchnyk.
This project is an assignment from TheOdinProject.
Created by @AlejandroVela - feel free to contact me!