Images
Greenbite is a smart meal-planning app designed to make healthy, plant-based eating easier and more accessible. With Greenbite, you can plan meals, discover new recipes, and find ingredient substitutes, especially if you’re following a vegan diet. Plus, it helps you locate vegan-friendly restaurants nearby, making it perfect for people who want to explore plant-based options without the hassle. Whether you’re looking for new meal ideas, need help swapping ingredients, or want to find a vegan spot in town, Greenbite brings all these features together in one place to simplify plant-based eating.
Programming Languages: JavaScript, HTML/CSS.
Frameworks & Libraries: Express.js, Bootstrap, EJS.
Database: PostgreSQL.
API: Spoonacular API (for recipe data), MapLibre(for Map and geolocation).
Version Control: Git, GitHub.
Design: Figma (for UI design).
Testing: Postman (for API testing), Google lighthouse for performance, accessibility, best practices and SEO testing.
Deployment: Vercel.
UI Design.
Password encryption for security purposes.
Database Design and Management.
API Integration and Management.
Server-Side Development.
Template Engine Utilization.
Responsive Design with Bootstrap.
Data Handling and Processing.
CRUD Operations.
Project Documentation.
Project deployment.
Intergrating of the APIs - it was my first time having an entire application dependent on an API and it being my first time deeply diving into the Api's documentation it was abit nerve racking finding the correct endpoint to use for the different functionalities but through resources such as the community page and stack overflow, i found so many people having my exact challanges and how they were solved.
Integrating OverpassAPI(still a work in progress) - trying to integrate the Overpass API so as to be able to display the different Vegan restaurants around a particular area, I kept getting an empty array using res.json to render and when using res. render I'd first get an empty array then the page would kind of re-render itself and then I'd get the different places on my console but what was being passed was the first array which was the initial empty array meaning the different mappers for the different restaurants wouldn't display on the map.
Database storage - finding a perfect datatype to store the images was also a challange but i realised sroring too may images as this is an application that will have lots of them, might just end up slowing the application down so i decided to store a link instead that would not only lead to the image but to the recipe itself from the API.
Project deeployment - This was my first time deploying a project and a challenge was that I couldn't find my way aroundwas finding a youtube video of a project that was deployed on Vercel and was using EJS. Debbugging it was as a result a nightmare but I decided to percist in debugging it because I had aready come so far anyway and if I could figure out where the issue was it would be smooth sailing for my other applications' deployment so I stuck with it and after an entire day of debbugging, it finally deployed on the next day.
Slow loading after deployment - My application was working pretty fast localy but after pushing it to the cloud, ofcourse due to things such as network latency and resouce allocation, it experiencee some delay. I decided to use Google lighthouse to test out my application's different pages and some of the things i did to increase the speed were: