Flatiron School Phase 1 Project: JavaScript and APIs!
Phase 1 of my Flatiron School experience is just about done! This phase covered JavaScript, and our project asked us to build a single-page web app that used data from an external API. I chose to use Bored, an API that serves up a random activity that the user might like to do. The final app looks like this (code on my Github here):
For this project, and being a data nerd, I chose to use a JSON Server for my “backend” (proper backend coding will be coming up in the next couple of phases, when I believe we’ll be getting into relational databases). I’d used JSON Server a bit in some of this phase’s coursework, but this was my first time setting it up myself. I was pleasantly surprised by how easy it was!
As explained in the Github readme, all you have to do is install JSON server, create a db.json file (which is what your app will interact with for data handling), and start the server up!
The only thing you have to add to db.json manually is your “endpoint(s)”, just like an API endpoint, but in db.json your endpoint is just the name of an array where your data will be added. For my app, I chose to call this endpoint “activities.”
Once I start up the server, the database is “live” at http://localhost:3000/activities/. Ready to go!
I used JSON Server to allow users to save activities to the webpage and to have that data persist on refresh. It also allowed me to add features like logging and rating — you can record times you did the activity and how much you enjoyed them on a scale from 1 to 5, and the app will save that data and display a count and average rating.
I also used JavaScript’s handy .find function to check for duplicates — if an activity is suggested that the user has already saved, the app will check for the activity’s unique key in the db.json file and, if/when it finds a match, will disable the “Save it!” button.
Adding little features like this made building the app really fun and let me actually apply what I’ve learned.
(Fun fact: before this course officially started, we were tasked with building a small personal website that used HTML, CSS, and JavaScript, and I remember thinking “what could I possibly use JavaScript for here??” Oh how times change!)