Skip to main content

Development

Technologies Used​

Documentation​

  • Docusaurus: We use Docusaurus to create the virtual documentation for HAPPDINE. This tool allows us to organize and present information in a clear and intuitive way, making it easier to understand the platform's features and resources. The documentation in Docusaurus is continually updated, reflecting the improvements and innovations implemented in HAPPDINE, ensuring that everyone is always informed about the latest news and best practices.

  • React JS: React is a widely known JavaScript library that we have adopted as the main tool for the development of HAPPDINE, taking advantage of its efficiency and flexibility to create dynamic and responsive user interfaces. With React, we are able to build reusable components that ensure a fluid and intuitive navigation experience for users. The library allows us to implement real-time updates and improve the performance of the application, resulting in a more agile and responsive system. React's integration with other technologies and tools also facilitates development and maintenance, ensuring that the platform remains robust and scalable.

  • CSS: We use CSS to style HAPPDINE, ensuring that the user interface is visually appealing and functional. With an approach based on good design practices, we apply style rules that promote consistency and clarity in the presentation of information. CSS allows us to create responsive layouts that adapt to different devices and screen sizes, ensuring a fluid user experience for all users. Through CSS, we were able to not only improve the aesthetics of HAPPDINE, but also enhance the usability of the platform, making navigation intuitive and enjoyable.

Front-End​

  • React JS: React is a widely known JavaScript library that we have adopted as the main tool for the development of HAPPDINE, taking advantage of its efficiency and flexibility to create dynamic and responsive user interfaces. With React, we are able to build reusable components that ensure a fluid and intuitive navigation experience for users. The library allows us to implement real-time updates and improve the performance of the application, resulting in a more agile and responsive system. React's integration with other technologies and tools also facilitates development and maintenance, ensuring that the platform remains robust and scalable.

  • Vite: We use Vite as the build tool for HAPPDINE, taking advantage of its speed and efficiency in developing modern web applications. Vite offers an optimized development environment with instant reloading and simplified configuration, allowing the development team to focus on building functionality instead of dealing with complex configurations. With Vite, we have been able to increase productivity and reduce development time, allowing the HAPPDINE platform to evolve quickly and adapt to user needs. In addition, its compatibility with popular libraries such as React makes it easy to integrate and use best practices in development, resulting in robust and scalable software.

  • CSS: We use CSS to style HAPPDINE, ensuring that the user interface is visually appealing and functional. With an approach based on good design practices, we apply style rules that promote consistency and clarity in the presentation of information. CSS allows us to create responsive layouts that adapt to different devices and screen sizes, ensuring a fluid user experience for all users. Through CSS, we were able to not only improve the aesthetics of HAPPDINE, but also enhance the usability of the platform, making navigation intuitive and enjoyable.

  • Tailwind CSS: We use Tailwind CSS to style HAPPDINE in a modern and efficient way. This utility framework allows us to apply styles directly to our components, promoting a responsive and highly customizable design. With Tailwind’s “style first” approach, we are able to create beautiful and cohesive interfaces without having to write extensive custom CSS. The ability to customize themes and utilize utility classes makes development more agile, allowing teams to focus on functionality and user experience. Additionally, Tailwind CSS makes it easy to adopt good design practices, ensuring that the platform not only functions well, but also provides a visual appearance that resonates with users and reflects the corporate restaurant’s identity. With Tailwind, HAPPDINE stands out for its intuitive and aesthetic interface, providing a pleasant and engaging user experience.

  • NPM: We use NPM as our package manager in the development of HAPPDINE, making it easy to install, update, and manage the dependencies required for the application. Additionally, NPM's versioning capabilities ensure that all team members work with the same package versions, promoting consistency and avoiding conflicts. By integrating NPM into our workflow, we ensure that HAPPDINE stays up to date and takes advantage of the latest innovations and improvements available from the developer community.

Back-End​

  • Spring Boot: We adopted Spring Boot as the foundation of our backend for HAPPDINE, taking advantage of its robust features and its ability to simplify Java application development. With Spring Boot, we were able to create efficient RESTful APIs that communicate seamlessly with the frontend, ensuring fast and secure data exchange. Spring Boot offers a wide range of built-in tools and libraries, such as security, data management, and monitoring, that make it easy to build a complete and scalable system. By incorporating Spring Boot into our architecture, we ensured that HAPPDINE is a robust solution capable of meeting the growing demands of the corporate restaurant industry while maintaining high performance and reliability.

  • MySQL Workbench: We use MySQL Workbench as the primary tool for managing and administering the HAPPDINE database. This graphical tool allows us to visualize and manipulate data intuitively, facilitating the design and modeling of database schemas. With MySQL Workbench, we can execute SQL queries, optimize database performance, and perform data backup and restore with ease. Additionally, its ability to generate ER (Entity-Relationship) diagrams helps visualize the database structure, providing a clear understanding of the interactions between different tables and entities. The integration of MySQL Workbench with HAPPDINE ensures that our team can manage data efficiently and effectively, supporting restaurant operations with reliability and accuracy.

  • Insomnia: We use Insomnia as our API development and testing tool for HAPPDINE. It makes it easy to create and execute HTTP requests, allowing our team to quickly test endpoints and verify server responses in real time. With authentication support and automated testing, we can validate different scenarios and ensure that APIs work as expected. This approach not only streamlines the development workflow, but also ensures the quality and reliability of HAPPDINE’s backend.

  • Python: We used Python to develop the HAPPDINE AI code, combining its simplicity and versatility with advanced libraries such as YOLO (You Only Look Once). This combination allows us to implement efficient computer vision algorithms, facilitating real-time human detection and recognition. Python’s flexibility also speeds up the development and prototyping of new features, ensuring that we can quickly adapt the AI ​​to the restaurant’s needs. With this approach, we ensure a robust and innovative solution that enriches the HAPPDINE user experience.

  • Yolo: We implemented YOLO as a key part of HAPPDINE’s AI, leveraging its ability to perform fast and accurate real-time object detection. This approach allows us to identify and classify people in the restaurant environment, improving operational efficiency and user experience. With YOLO, we were able to integrate advanced functionalities such as monitoring people flow and analyzing customer behavior, providing valuable graphs for restaurant management.

  • OpenCV: We have implemented OpenCV as a core tool in HAPPDINE’s AI, leveraging its advanced image processing and computer vision capabilities. This approach allows us to visually analyze the restaurant environment efficiently and effectively. With OpenCV, we have been able to implement features such as pattern detection and object recognition, which help improve operations and user experience. In addition, the integration of OpenCV with other technologies enables the collection of visual data, providing valuable information for restaurant management and contributing to the continuous optimization of the services offered.

  • Ultralytics: We have adopted the Ultralytics library as a crucial part of HAPPDINE’s AI, leveraging its advanced YOLO implementations for object detection. With Ultralytics, we are able to perform real-time person detection with high accuracy and efficiency, facilitating the identification and classification of people in the restaurant environment. This integration allows us to monitor the flow of people, analyze customer behavior, and generate visual data that enriches restaurant management.

  • Azure: We have implemented Azure as the authentication solution for HAPPDINE, utilizing Single Sign-On (SSO) to provide a simplified and secure login experience for the administrator. With SSO, the administrator can access the platform using their existing corporate credentials, eliminating the need to manage multiple passwords and increasing system security. The integration with Azure enables robust and scalable authentication. This approach not only improves the administrator experience, but also ensures that data security is a priority, allowing HAPPDINE to operate efficiently and reliably in an enterprise setting.

Authentication Implementation​

Front-End​

  • Development of the administrator login screen using React and Vite;

  • Seamless integration with the API provided by the backend for administrator authentication.

Back-End​

  • Robust implementation of routes and authentication logic with Spring Boot: We have developed a solid framework to manage routes and authentication logic in HAPPDINE, using the advanced features of Spring Boot. This implementation provides strict control of access to different areas of the application.

  • Creating secure endpoints with SSO: We establish secure endpoints that utilize Single Sign-On (SSO) functionality to process administrator login requests efficiently and securely. This approach minimizes exposure to vulnerabilities by ensuring that only authenticated and authorized users can access sensitive information and perform administrative actions on the platform.

  • Generation of authentication tokens with SSO: We have implemented a system for creating authentication tokens using SSO, ensuring that administrator sessions are managed securely and effectively. These tokens are essential for validating the user's identity in each request, offering an additional layer of security and facilitating continuous interaction with the application. With this strategy, we ensure an agile user experience, without compromising data protection and the integrity of the HAPPDINE platform.

Project Structuring​

  • Front-End: We implemented a meticulous organization of the source code in HAPPDINE, structuring it into reusable components, pages, and services. This approach not only promotes maintainability and scalability of the front-end, but also facilitates collaboration between developers, allowing new team members to quickly understand the project architecture. Reusable components ensure that common functionality is implemented consistently, reducing code duplication and increasing development efficiency. In addition, this organization allows for faster updates and improvements, contributing to a more fluid and responsive user experience.

  • Back-End: The HAPPDINE back-end structure strictly follows Spring Boot design standards, organizing the code into distinct layers: DTO (Data Transfer Object), MODEL, CONTROLLER, SECURITY, and REPOSITORY. This organization ensures code cohesion and clarity, facilitating application maintenance and expansion. Separating responsibilities between these layers allows for better management of business logic, security validation, and database interactions, resulting in a more robust and easy-to-understand system. Using best practices for back-end development ensures that HAPPDINE is scalable and capable of meeting growing user demands, while maintaining optimized performance and efficient integration with the front-end.

Workflow​

  • Git: Git is a distributed version control system widely used to manage software projects. We use Git repositories to store HAPPDINE files, allowing developers to track changes, collaborate as a team, and maintain a detailed history of modifications. With features such as branches, merges, and reverts, Git offers flexible version management and makes conflict resolution easier. Its distributed nature allows for offline work and synchronization with remote repositories, making it an essential tool for modern software development.

Development Environment​

Tools and Integration​

We use Vite as our rapid development environment for the frontend, leveraging its efficiency to build modern applications with a fast and agile development experience. Vite allows for instant hot-reloading and build optimizations, making it easy to create dynamic and responsive interfaces. For the backend, we adopt Spring Boot, which provides a robust and scalable framework for API development. With its advanced features such as dependency injection, security, and configuration management, Spring Boot allows us to build high-performance and easy-to-maintain services. HAPPDINE’s tight integration between the frontend and backend ensures a seamless and intuitive user experience. Communication between layers is optimized, allowing users to interact with the platform fluidly, taking full advantage of the available functionality. This cooperation between Vite and Spring Boot not only improves development efficiency, but also results in a more cohesive and responsive application, meeting the changing needs of users.