The J40-Tray Project

INTRODUCTION

The J40-Tray is a food ordering web app designed for the local J40 Restaurant. Our project’s primary goal is to reduce the time customers spend waiting at the restaurant by allowing them to browse the available food online and place orders for pickup, delivery, or dine-in. By improving the ordering experience, J40 Restaurant hopes to enhance its customer service and streamline its operations during peak hours.

Team Members and Roles:

Emmanuel A. Akalo (Full Stack Developer)
This project was completed over a span of six weeks, focusing on delivering a user-friendly platform that serves the needs of both customers and restaurant staff.

Who is the Project For?
This project was created for the J40 Restaurant and its local customers who want a faster and more convenient way to order food. It also caters to restaurant staff, making it easier for them to manage food availability and incoming orders.
This project can also be adopted by Restuarant encountering similar problem.

My Personal Focus:

I focused on both the frontend and backend of the project. My goal was to create a responsive and intuitive user interface that allows customers to seamlessly place orders while also ensuring that the system communicates effectively with the backend for real-time updates on food availability.

A Personal Story Behind the Project

Current at my work place, food service options are limited, and long wait times at restaurants were common. Also when sending for food, ordering for a particular meal through someone and the person getting there and start calling back that the particular meal you ordered is currently not avaliable. This always frustrated me, especially during busy lunch hours, when I would visit my local diner and have to stand in line waiting to order or place an order and have it canceled because it is not avaliable at the moment. When the opportunity to build any project came my way, I immediately connected it with these experiences and how i could help fix them, hence J40-Tray.

This project gave me the opportunity to address a problem I had encountered so many times myself—long, frustrating wait times, not know what to order cause i don't what is avaliable at the moment. It’s not just about convenience; it’s about transforming the overall dining experience. The chance to work on something that could directly improve the way people interact with restaurants and help local businesses like J40 Restaurant was very rewarding for me.

Project Accomplishments and Features

The J40-Tray successfully streamlined the ordering process for the restaurant by offering customers three ordering options: pickup, delivery, and dine-in. Customers can view the available food in real time, select their preferred meal, and place their orders from their phones or computers.

Technologies Used:

Frontend: React, tailwind css, Node.js (with TypeScript for code clarity and maintainability)
Backend: Express.js to handle order processing, food availability, and user interactions.
Database: Mongodb Atlas, for real-time data storage and order management.
Deployment: Deployed on render.com.

Use TypeScript over vanilla JavaScript was due to its type-safety features, which improved code maintainability as the app grew. Express was choosen because of its simplicity and flexibility for handling backend processes efficiently.

Key Features Completed:

• Real-time Food Availability: Customers can see available food items and portions, ensuring that they don’t order unavailable meals.
• Order Options: Customers can select pickup, delivery, or dine-in options to suit their convenience.
• Admin Dashboard: Restaurant staff can easily update food availability through a user-friendly admin panel, ensuring customers only see current menu options.

Technical Challenges and How They Were Solved

The most difficult technical challenge faced was ensuring real-time synchronization between the frontend and backend systems. The restaurant's food inventory updates frequently as orders are placed, and we needed to reflect these changes instantly for all users.

Situation:

The goal was to keep the food availability updated across all user devices as orders were processed, without any lag. This was critical to avoid customers ordering items that had already been sold out.

Task:

I needed to implement a real-time communication system between the frontend and backend so that any change in food availability would be reflected immediately on the customer’s side.

Action:

Still undergoing research at the time of this article and would be updated soon

Expected Result:

Hopefully the implementation would bring about real time update

What I Learned

Working on the J40 Food Tray taught me invaluable lessons about real-time systems and the importance of building a user-friendly interface. Here are a few takeaways from the project:

Real-time Updates are Key:

Keeping the customer updated with the latest information is crucial in time-sensitive applications like food ordering.

The Importance of Scalability:

From the start, I designed the app with scalability in mind, ensuring that the infrastructure could handle increased traffic during peak restaurant hours.

Customer-Centric Design:

Had to think like the end-user constantly, refining the user experience so that customers could order quickly and intuitively.
This project has deepened my understanding of web development and backend communication. I’ve gained confidence in integrating and working with the MERN stack.

Conclusion

The J40-Tray project has laid the foundation for transforming the dining experience at the J40 Restaurant. We’ve reduced wait times, streamlined the ordering process, and created a more efficient way for restaurant staff to manage food availability and orders.

About Me

I am Nuelo, a passionate software developer specializing in frontend development with a growing interest in backend systems. My GitHub houses various projects I’ve worked on, and you can find the J40-Tray project there, alongside my other work. Feel free to reach out to me on LinkedIn for collaboration opportunities.

• GitHub Link to Project: J40-Tray Frontend GitHub Repo
• GitHub Link to Project: J40-Tray Backend GitHub Repo
• Deployed Project Link: J40 Food Tray Live Site
• LinkedIn Profile: nuelo's LinkedIn