First Big Project / Learning How To Use JSON server

Hello to whoever that has decided to read this! I gotta throw you an update on my learning progress. I finished my first big project, so strap in and get ready to see some beginner programming. Yes, it's okay to laugh and cringe. I'll show you my project and get into how you can set up a JSON server.

As you may have noticed I am a huge fan of Avatar the Last Airbender (Nickelodeon, please don't come for me, I'm poor). This web application is inspired by Uncle Iroh's tea shop in Ba Sing Se. I admire Iroh's character a lot, so I really tried to pay my respects by not making a complete pile of garbage. My main focus was the JavaScript, and to save time I used Materialize. If Materialize was a person, I'd kiss them. It is such a handy-dandy CSS framework!

API Hunting

I struggled a lot on finding an API that met my needs for what I had envisioned. So, I decided to just make my own data and use JSON server. I am a strong independent programmer, and I don't need to rely on a free public API! Okay, jokes aside, here's what I created based on my vision:

Here is the submit form being used as a search bar:

Here are the click events I have in the footer of the web application:

When setting up a JSON server, you need to make sure you install it locally. You can visit here to do that! Then, in the directory you are working on, you need to create a db.json file to store your data. In this file, you will need to use the correct JSON format when inputing the data. JSON syntax looks very much like a typical JavaScript object, but not quite the exact same. Yes, it has brackets and key/value pairs, so naturally it will be comforting to see some sort of familiarity when you first encounter JSON.

Here is an idea of how I formatted my db.json file, and hopefully it can give you a basic idea on how to format your own:

{
    "id": 1,
    "name": "Black Tea",
    "image": "https://media.istockphoto.com/photos/black-tea-in-a-cup-picture-id475614605?b=1&k=20&m=475614605&s=612x612&w=0&h=rJ47IWDVx0UqSjWs_YlZCsN-cyXRLbtW-CMTQUmHnMs=",
    "description": "Often sold in a blend of some sort, the flavor depends on the location the plant was grown and the blend it is sold in. Consisting of many varieties, it is the most common type of tea. It supports heart health and boosts the body's defense towards oxidative stress.",
    "flavorProfile": "strong, dark"
  },

This is an example of a singular data object that you would find wrapped in brackets alongside other similar objects, all separated by commas. In JSON format, objects are wrapped in curly braces, and separated by commas. Square brackets are used to hold arrays, so keep this all in mind when creating your data. Find a structure that is easy for you to work with.

Once you have your data in the proper format, get it running!

$ json-server --watch db.json

Once you visit your localhost url, you will be greeted by the most comforting text face along with supportive words that remind you that you are doing just fine.