About the project
This project was for the Netlify Hackathon (my first hackathon!). I am going to share the things I learned and why I built this project. ForTheBirds is a simple social media platform for bird lovers. I built this for people to be able to share pictures of their pet birds/watchings, discover articles about birds, play bird-related games, and have a nice place to have little breaks. While there are social media about pets such as dogs and cats, there was not an option just for birds. While this project is very barebones, I did learn a lot and hope to build more upon this concept.
How I built it
Requirements
The main things I wanted on this site were a simple post feature like Twitter and a page for bird-related games. I also hope to include a place for bird-related articles, additional games, and bird call soundboard.
Layout Design
My team and I wanted to have a simple design like twitter so, found a tutorial on how to build a Twitter clone and followed it. The Birdle game (yes, a wordle clone about birds and bird-related words) is also a product of a tutorial I followed and implemented the way I wanted to as well.
Tech stack
Most of my tech stack is purely Vanilla JS and CSS so we decided to choose a framework and library to open our horizons some. We chose to use VueJs as our library and Quasar for our Framework.
What did I learn?
I learned tons of things during this project! The main thing I learned during this process is how to use libraries and frameworks and the wonders they are. Researching and looking at documentation was another great learning experience I had during this hackathon. The things I Iearned making Birdle were: DOM manipulation and array and object methods. For someone who is learning and purely using vanilla JS and CSS, using these tools is like magic! I also learned about how to use a backend via Firebase.
Plans for the future
- To fix current bugs
- Add more games
- upload pictures feature
- Bird soundboard
- Articles
- Some sort of Profile
- Live streams of birds
Links
- Twitter Tutorial
Thanks
Overall, I had a great time building this project! Even though it is very basic and not much different from the sources I followed; I still learned lots of things! I was not able to work on this project as much as I wanted during this month in which I had to rough patch a few bugs, but I hope to fix them in the future! I would love any support in this project through advice, collaboration, and any other discussions.
You can contact me through: