Recipes-Website

Contibutors: Sophia Fortier

University of Massachusetts Amherst, COMPSCI 326: Web Programming

From July 2023 Project Specifications:

Objective

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. You are not allowed to use PouchDB for the database.

Requirements

1. Front-End Development:

   • Design and implement a user interface using HTML, CSS, and JavaScript
   • Utilize CSS frameworks like Bootstrap to enhance the application's appearance and responsiveness. But, not required. You are allowed to use your own homegrown CSS
   • If you use Bootstrap (etc.), you must still supply your own CSS
   • Implement dynamic updates to the user interface using JavaScript, ensuring a seamless user experience.

2. User Interaction and CRUD Operations:

   • Allow users to create, read, update, and delete data through the user interface.
   • Implement interactive forms and input fields for user data entry and editing.
   • Provide appropriate user feedback and validation for form submissions.
   • Update the UI dynamically when data is created, updated, or deleted.

3. Local Storage:

   • Utilize the browser's local storage feature to store user data persistently.
   • Implement logic to save and retrieve data from local storage as needed.
   • Handle situations where local storage may be unavailable or limited.

4. Back-End Development:

   • Implement a server-side application using Node.js to handle data storage and retrieval.
   • Create routes to handle all CRUD operations (Create, Read, Update, Delete).
   • Utilize the Express.js framework to simplify routing and request handling.

5. Database Integration:

   • Choose either MongoDB or PostgreSQL as your preferred database system.
   • Design and create a suitable database schema to store the application data.
   • Implement database connectivity and integration with the Node.js backend.
   • Utilize appropriate database queries and operations to perform CRUD actions.

6. Communication between Front-End and Back-End:

   • Use the fetch API in JavaScript to communicate between the front-end and back-end.
   • Send asynchronous requests from the front-end to the back-end to perform CRUD operations.
   • Handle responses and update the UI accordingly.

7. Error Handling and Validation:

   • Implement robust error handling on both the front-end and back-end.
   • Validate user input and handle validation errors gracefully.
   • Display appropriate error messages to the user.

My Contributions

• Developed a dynamic single-page application in which users could generate upcoming meals or perform CRUD operations on one of three database tables
• Designed the schema for and fully integrated an external PostgreSQL database which could be connected to via routing and fetch requests (Express.js)
• Implemented a Node.js backend, with routing, error handling, and local storage

Grade

51/51