Project Requirements

The requirements for this app were pretty simple, it was to ensure that the app can perform all the CRUD functionality: Create, Read, Update and Delete.

The app displays all the crochet projects on the main view of the UI, where users can also filter through them using the dropdown (filtering by status of the project), as well as using the search-bar to filter by the title of the project.

Development Process

This is a fullstack project. There is a database (in this case MongoDB) which stores all the projects and their details. The data from the database is then read by the backend server, created using Node.js and Express. This is the api that the frontend communicates with to perform all the CRUD operations. Having a backend ensures the frontend doesn't directly communicate with the database to reduce the risk of dangerous activity.

On the frontend, the UI was created with Next.js, a React framework, and TypeScript. The frontend makes a call to the backend Node.js server, to get the project's data, and to ensure the functionality on the UI actually works and updates the database without having to communicate with it directly.

This approach however requires the user to run both the server and client (the UI) on their machine simultaneously, as well as ensuring the user provides the server with their own connection string to the database with their crochet projects. More details on how to set up the project locally can be found on the project's GitHub page in the README file.

Outcomes

The current program performs all the functionalities of a CRUD application, and the UI looks exactly how I envisioned it to be - with a lot of custom CSS. One thing I wish I added was the date-started of the projects in the projects details box, however this is a pretty small detail, and apart from this I am very satisfied with how the app turned out in the end.