Eleni’s Recipe Paradise
About this project 🥘
This project is a recipe app designed for friends to share their favourite foods, no matter where they are in the world. It was my first fully deployed full-stack project, built using plain JavaScript and launched on Render. The primary goal was to implement full CRUD functionality and stress-test it by having real users interact with the app.
Website URL: https://eleni-recipe-paradise.onrender.com/
Tech Stack 👩🏻💻
This project was built using JavaScript, Node.js, Express, MongoDB and Mapbox.
You can view the code for this project here: https://github.com/elenisal94/Recipe-app
Setup 🚀
To set up this project, I followed structural guidelines from other full-stack JavaScript projects in my bootcamp course. Although the content and purpose of the website differ from those projects, I organised my code using standard categories, such as layouts and partials for the front end, and a schema, routes, models, and controllers for the back end. This approach ensured that my code followed a recognisable structure, making it easier for developers to read and maintain. A lot of my initial focus went into refining the schemas and formatting the data, which was particularly important for handling recipes with various measurement systems and units.
WalkThrough 🚶🏻♀️
See what the platform is like in action.
Challenges and solutions 🚧
1. Understanding Javascript syntax
Going into this project, I had never developed anything complex in JavaScript—just small course-based projects like generating random images or colours. The depth of understanding required for building a full-stack application was on a completely different level. While some concepts flowed smoothly, such as using event listeners (which I had practised), others, like different loop methods, took more time to grasp in practical scenarios. For instance, it took experimentation to understand how forEach differs from a traditional for loop and how it could be effectively used to adjust image previews. Although I had studied these concepts in the bootcamp, applying them to a real-world project was a different challenge altogether. Through practice and perseverance, I got there. Additionally, I had to familiarise myself with EJS files, which have a slightly different syntax than standard JavaScript.
2. Generating real-time unit conversions
One of the biggest challenges in this project was implementing real-time unit conversions. I initially tried to handle conversions using a JavaScript library, but updating them in real time through an API without React’s state management proved difficult at my skill level at the time. To solve this, I used the convert-units library and stored all data in metric units. If a user preferred imperial units, the stored metric values would be converted on the fly when displaying recipes. This approach streamlined the database, ensuring that only metric values were saved, which optimised storage space.
3. Authorisation
Handling navigation and authorisation logic was a challenge as I built my first full-stack application. The website structure was simple, but understanding which parts users could view and interact with based on their login status was tricky. For example, logged-in users should be able to view all recipes but only edit their own. Figuring out the logic behind user access and permissions took time, but it was essential to creating a secure user experience.
4. Understanding routes
Learning how to structure routes, controllers, and middleware was another big learning experience. Organising code to keep it concise yet readable was key. For instance, in the controllers, I needed to ensure all CRUD logic was clear and organised, while the routes had to manage authentication, authorisation, and validation in the correct order for each action. Balancing the different responsibilities between these components was a challenge but ultimately led to a more efficient and maintainable codebase.
5. Deployment
Deploying the website on Render was tricky at first. I encountered several ModuleNotFound errors due to missing or incorrectly specified dependencies. After some research and a few debugging attempts, I identified the necessary files and ensured that all package versions were compatible with both my application and Render. Once these issues were resolved, the deployment process went smoothly.
Results 💐
After the website went live, I shared it with my network, and users immediately began adding recipes and rating each other’s creations. The site has been live for several months and has been used in various ways. The feedback has been overwhelmingly positive, with users reporting a smooth, intuitive experience and no issues with bugs or missing data. It’s rewarding to see the website remain robust over time. In the future, it would be interesting to test it with a larger user base, as the initial group was capped at around 50 people.
Next steps 🔮
Potential next steps for this project to expand my learning:
1. Convert to Typescript or use React
One of my next learning goals is to dive into TypeScript. I find it intriguing to consider converting an existing JavaScript project to TypeScript to see how it changes the structure and functionality of the code. Alternatively, I’m also interested in the possibility of transforming the project into a React application, which could enhance user interactivity and improve the overall user experience.
2. Change the type of database to an SQL one
As I continue to expand my skills, I am eager to explore transitioning from a NoSQL database to an SQL database. This shift would allow me to understand the advantages of structured data storage and relational database management systems. By converting an existing project to use SQL, I aim to gain hands-on experience with concepts such as table relationships, joins, and transactions, which could significantly enhance the robustness and efficiency of my applications.
3. Cloud deployment
I am eager to enhance my technical skills by exploring cloud deployment strategies. Transitioning my applications to a cloud environment will enable me to leverage scalability and reliability offered by platforms like AWS, Azure, or Google Cloud. I aim to learn best practices for configuration, security, and CI/CD processes, which will improve my deployment skills and help create applications that can efficiently handle varying loads.
