Recipe website

Web development
Project Overview
The aim of this project was to develop a responsive website for cooking and baking recipes. The website was connected to a database so that users could add recipes consisting of texts, a picture and other data to the overview. Furthermore, users could add a recipe and remove it from a shopping cart.
My Contributions
In this project, every participant developed a website his-/herself to a given design. The project was accompanying a coding course with weekly lectures.
Having learned to code with JavaScript, HTML and CSS for two semesters, the project's aim was to focus on its application for developing dynamic websites. So far, we had only developed responsive websites using media queries in CSS. To simplify the process, we got introduced to Bootstrap during the first lessons of the course. Hence, we could already build the frontend for the planned pages to see how it would look like later on.

Using Bootstrap, we created a Pinterest-esque layout for the homepage and also benefited from its predefined classes for forms and modals. We then transformed the frontend code to JavaScript commands to later on be able to design the website server-side. Following this, we learned about using Node.js for backend programming. This enabled us to apply our coding knowledge to develop a dynamic website for our first time.

The next step was getting to know all the possibilities for client-to-server (and vice versa) connections. We thus got to refresh our knowledge in JSON and AJAX and also learned about the details of using HTML forms to submit data to a server. Lastly, our professor tought us how to embed MySQL queries inside server-side JavaScript code to connect our website to a database.
Project description
Hochschule der Medien, Stuttgart
May 2021 — Jul 2021