Inspiration

Meal planning and tracking is important part of not only making progress in the gym, but also staying healthy. Meal planning is something that everyone wishes they did, but somehow never find the time for. Cut down on the effort by socializing the process! See how others are meeting their dietary goals to take tips and improve your own lifestyle! Posting your own progress publicly adds incentive to stay on track.

What it does

KitchenTable allows for users to create an account with a username and then they can post a "meal". A "meal" is just simply the name of the food they ate, along with its calories and macronutrients.

How I built it

I built KitchenTable using Express.js as a framework to interface with MongoDB, the database. I also used ejs templates to build the frontend of the site, and styled it with basic css.

Challenges we ran into

As I have no prior knowledge or experience with backend development, backend frameworks, or databases, most of the challenge was figuring out how I could store values and retrieve them using Express.js and MongoDB. A lot of this for me was figuring out the syntax by reading through documentation and lots of helpful youtube videos along the way.

One specific challenge I ran into was the handling of authentication and the storage of cookies/session data to ensure that a user stayed as themselves when navigating the site. At first I thought that I could just store a variable "username" in the backend, and just reference that, however I completely forgot that there is only one instance of the backend for the deployed site. What worked for my localhost would not work when I tried to deploy the site. I eventually stumbled upon express-sessions and its use for storing session based data. Using sessions I overcame this challenge.

Accomplishments that I'm proud of

While it might sound cheesy, I am proud of every single part of the website. I am proud of the backend able to handle multiple different users and it's ability to be fully deployed. I recently was practicing responsive web development by following along with Kevin Powell's videos, and I'm proud of the fact that I got my website to be fully responsive.

What we learned

I learned how to use Express.js not only as a backend framework, but also templates as a way to create front-end pages quicker. I learned about what a database is, why we as web developers need a backend, and how it actually communicates with the frontend.

What's next for KitchenTable

While It is decent, I think KitchenTable could use a design overhaul, the colors could be improved, and the design overall looks very basic and flat. Maybe some hover effects could be added to give it some more pop. On the backend side, I think that I want to implement a more robust form of network storage. Currently the site just displays all posts, but I eventually want to implement a relational graph network and allow folowers, and friends. This would make KitchenTable much more personal as the name implies. I would also want to flesh out exactly a post is. I would in the future add a description/recipe box, and I would add the ability to add more information than just the basic macronutrients. This would include sugar, cholesterol, vitamins, minerals, etc.

Share this project:

Updates