Restro

Restro is a fully-responsive web application built for a small Mediterranean restaurant. Developed using Gatsby for the frontend and Firebase for the backend functionalities. The application provides customers with a seamless reservation process while equipping staff with essential administration tools.

Link to the website here

Tech Stack

Restro is developed using the Jamstack architecture; The frontend built with Gatsby to provide advatanges like static site generation and image optimization. The backend is powered by Firebase firestore, which manages both authentication and the real-time database for handling real-time updates for reservations.

Core Features

• User-friendly interface for customers to browse the menu and create reservations.
• Real-time reservation system integrated with Firebase for instant updates.
• Administration dashboard for staff to manage reservations and view customer details.
• Responsive design for an optimal user experience across various devices.

Web Stack and Explanation

At the time of building, Gatsby was the clear choice for this project because it offers a variety of rendering solutions. This enabled me to leverage Static Site Generation to ensure optimal performance and meet the crucial SEO requirement.

I also utilize Firebase Firestore to handle real-time reservation updates, providing staff with up-to-the-minute booking details. Additionally, the integration of Firebase Functions assisted with automating the reservation confirmation, enhancing the overall user experience by allowing customers to receive instant confirmation.

Technical Challenges

Configuring Firebase Functions to seamlessly send reservation confirmations presented a slight hurdle due to the lack of clarity in Firebase’s documentation, which may have been a result of my limited experience at the time.

To overcome this hurdle, I explored various online resources, engaged with the Firebase community, and sought insights from experienced developers. This process allowed me to gain valuable perspectives on making sense where the official documentation was lacking. Despite the challenges faced, this experience provided valuable insights into working with serverless functions and improving email communication in the application.

Lessons Learned

This project helped to solidify a lot of my React knowledge, such as using hooks or updating the states. I also got a lot of great practice using SCSS to build highly modular and maintainable CSS utilizing features such as variables, nesting and mixins. But the most valuable lesson I acquire is the ability to effectively navigate and integrate unfamiliar tools and technologies into my work at a high standard.