Frontend development of SaaS for the restaurant business
SaaS platform for the restaurant business in the Israeli market.
The product was intended to cover two parts: an interface for restaurant customers and an internal system for staff. Customers could book a table, place orders, and pay for them, while managers, waiters, supervisors, and administrators could manage the restaurant, employees, orders, inventory, and supplies.
The client came with a ready design in Figma and a preliminary timeline estimate from other developers. My task was to fully implement the frontend part of the product from scratch and bring it to a working MVP.
=== MY TASK ===
Develop the frontend architecture of the SaaS product and implement the complete client side of the web application using React and TypeScript: from the basic project structure to complex business logic, real-time functionality, user roles, subscription access, and responsive interfaces.
=== WHAT WAS DONE ===
• Designed the architecture of the entire frontend part of the application;
• Implemented the interface for restaurant customers: table booking, order creation, menu browsing, and payment;
• Implemented interfaces for restaurant staff: managers, waiters, supervisors, and administrators;
• Implemented real-time tracking of orders, inventory, and supplies via WebSockets;
• Built access logic to features based on user roles and subscription plans;
• Implemented subdomain-based logic for restaurants so that different restaurants could operate through their own subdomains;
• Implemented the entire UI with the Ant Design and TailwindCSS design systems;
• Responsible for performance, accessibility, security, and quality of the frontend code;
• Assisted a junior developer: delegated tasks, conducted code reviews, and explained implementation approaches.
=== PROJECT FEATURES ===
The main complexity of the project was not in individual screens but in the business logic of the product. It was necessary to implement a multi-tenant architecture where each restaurant has its own logic, data, and subdomain, while the entire system operates as a single SaaS product. A particularly complex part was the access system. The product needed to account for not only user roles — manager, supervisor, waiter, admin — but also the restaurant's subscription plan. For example, some features could only be available for certain subscriptions: adding employees, real-time inventory tracking, advanced analytics, and other capabilities.
Another important task was implementing payment in a cross-domain flow. The cart was formed on the restaurant's subdomain, while payment was processed through the main domain. This required securely transmitting data between different domains without breaking the user scenario.
The project also had time constraints. It was necessary to quickly determine priorities for the MVP and not neglect architectural solutions for further scaling of the project.
=== RESULT ===
The client received a fully functional MVP of the SaaS platform for the restaurant business. The frontend part was implemented from scratch: with responsive interfaces for customers and staff, real-time order updates, a role system, subscription limitations, subdomain-based logic for restaurants, and a complex payment scenario between domains. The project was brought to a working MVP in a short time, despite changing requirements and a more complex real logic than was laid out in the initial estimate.
=== TECHNOLOGIES ===
React.js, TypeScript, Redux Toolkit, RTK Query, Ant Design, TailwindCSS, WebSockets, pusher.js, laravel-echo, window.postMessage()
#React #TypeScript #FrontendDevelopment #SaaS #MVP #ReduxToolkit #RTKQuery #AntDesign #TailwindCSS #WebSockets #FrontendArchitecture #MultiTenant #Subdomains #AccessControl #RestaurantSaaS #RestaurantManagement #WebApp #JavaScript
The product was intended to cover two parts: an interface for restaurant customers and an internal system for staff. Customers could book a table, place orders, and pay for them, while managers, waiters, supervisors, and administrators could manage the restaurant, employees, orders, inventory, and supplies.
The client came with a ready design in Figma and a preliminary timeline estimate from other developers. My task was to fully implement the frontend part of the product from scratch and bring it to a working MVP.
=== MY TASK ===
Develop the frontend architecture of the SaaS product and implement the complete client side of the web application using React and TypeScript: from the basic project structure to complex business logic, real-time functionality, user roles, subscription access, and responsive interfaces.
=== WHAT WAS DONE ===
• Designed the architecture of the entire frontend part of the application;
• Implemented the interface for restaurant customers: table booking, order creation, menu browsing, and payment;
• Implemented interfaces for restaurant staff: managers, waiters, supervisors, and administrators;
• Implemented real-time tracking of orders, inventory, and supplies via WebSockets;
• Built access logic to features based on user roles and subscription plans;
• Implemented subdomain-based logic for restaurants so that different restaurants could operate through their own subdomains;
• Implemented the entire UI with the Ant Design and TailwindCSS design systems;
• Responsible for performance, accessibility, security, and quality of the frontend code;
• Assisted a junior developer: delegated tasks, conducted code reviews, and explained implementation approaches.
=== PROJECT FEATURES ===
The main complexity of the project was not in individual screens but in the business logic of the product. It was necessary to implement a multi-tenant architecture where each restaurant has its own logic, data, and subdomain, while the entire system operates as a single SaaS product. A particularly complex part was the access system. The product needed to account for not only user roles — manager, supervisor, waiter, admin — but also the restaurant's subscription plan. For example, some features could only be available for certain subscriptions: adding employees, real-time inventory tracking, advanced analytics, and other capabilities.
Another important task was implementing payment in a cross-domain flow. The cart was formed on the restaurant's subdomain, while payment was processed through the main domain. This required securely transmitting data between different domains without breaking the user scenario.
The project also had time constraints. It was necessary to quickly determine priorities for the MVP and not neglect architectural solutions for further scaling of the project.
=== RESULT ===
The client received a fully functional MVP of the SaaS platform for the restaurant business. The frontend part was implemented from scratch: with responsive interfaces for customers and staff, real-time order updates, a role system, subscription limitations, subdomain-based logic for restaurants, and a complex payment scenario between domains. The project was brought to a working MVP in a short time, despite changing requirements and a more complex real logic than was laid out in the initial estimate.
=== TECHNOLOGIES ===
React.js, TypeScript, Redux Toolkit, RTK Query, Ant Design, TailwindCSS, WebSockets, pusher.js, laravel-echo, window.postMessage()
#React #TypeScript #FrontendDevelopment #SaaS #MVP #ReduxToolkit #RTKQuery #AntDesign #TailwindCSS #WebSockets #FrontendArchitecture #MultiTenant #Subdomains #AccessControl #RestaurantSaaS #RestaurantManagement #WebApp #JavaScript