Recipe Database Website
Type
Course Project
Date
July 2023
(2 weeks)
Frameworks & Tech
JavaScript, HTML, CSS, REST, Node.js, Express.js, PostreSQL
From the UMass Amherst CS 326: Web Programming July 2023 final
project specifications:
The objective of this project is to design and develop a single page
web application that links to an external site with a Node.js backend,
using HTML, CSS, and JavaScript. The application should allow users to
interact with it, perform CRUD operations, store data using local
storage, and store data in the back-end. The back-end should be
implemented in Node.js and communicate with the front-end using fetch.
The project must utilize a database (MongoDB or PostgreSQL) and
include routes for all CRUD operations.
Initial Development
With two weeks to create my first website, I began setting up a basic front-end and back-end. The initial website wouldn't be visually complex, only displaying routed queries in text lists to ensure the back-end was functioning correctly. Any designs implemented in HTML and CSS were not connected to the background until most buttons that the functions would need were created.
Bulk of Coding & Challenges
Most of the time spent I spent coding was dedicated to the back-end of
the data editor and creating a dynamic display. Much of the code
needed to be conditionally implemented because there were multiple tables within
my database. I also needed a separate form for each CRUD action,
leaving me with 3 tables and nine forms to implement.
The most challenging part came with updating existing data. I didn't
want users to have to re-enter every field into an update form if they
were only trying to change one field. So, I used PostgreSQL statements
to pull data from empty fields to be pushed into the update query,
which are not to be confused will null entries that clean the field.
Reference Images
"Meal Prep Delivery Service App" by Maciej Kałaska for weidelab on Dribble.
"School Admin - Dashboard - Database" by Muhammad Zaki Alzikri for Agensip on Dribble.
Final Features
Main Display
The main feature of the final web appliaction is a data display showing the three tables in our database: “Recipes”, “Ingredients”, “Tags.” In selecting a different table, the respective contents will be displayed for the user to scroll through.
Data Editor
The database editor panel serves to integrate CRUD functionality into the user interface. It's a pop-up that allows users to pick from the three tables and three actions: create, update, and delete. The editor is completely dynamic and will display a success or failure message depending on whether a user has entered in values for all the required variables and the request processes smoothly.
Generating Meals
On the left side, users can access the generate-meals panel which attempts to rectify some of the difficulties associated with meal planning in college age populations. Users can select a number of days from one to seven, and a few predefined tags (“Cheap”, “Quick”, and “Bulk”) and subsequently generate a random selection of meals from the recipe database which meet the tag criteria. Not selecting any of the tags will return recipes with any available tags and new tags created by the user will not show up under the tags options on the side panel.
