The Pizza Shop Web project is a dashboard designed for restaurant owners participating in delivery applications.
-
It allows tracking metrics such as monthly and daily orders, visualizing charts, and accessing details for each order.
-
The dashboard includes functionalities like updating order statuses, canceling orders, and obtaining details of sold items.
-
The project is developed without frameworks, using pure React, Tailwind CSS, radix-ui and React Query, Vite and more.
-
Integration with the API is achieved through React Query to handle HTTP requests and caching. It incorporates a passwordless login mechanism called Magic Link.
-
The API is developed with BAN (Back-end as a Node) and will be delivered ready for use.
All the things that I learned and practiced with this project
-
JWT Authentication: This topic likely covers the implementation of JSON Web Token (JWT) authentication, a standard for secure authentication between parties, which can be crucial in securing communication between your front-end and back-end.
-
Caching and Revalidation: This topic involves the use of caching mechanisms to store and retrieve frequently used data. Revalidation, in this context, usually refers to the process of checking if the cached data is still valid or needs to be updated.
-
Connection with Back-end (API): Explanation: This topic covers how your front-end interacts with the back-end or API. It includes making requests to the server, handling responses, and managing the flow of data between the user interface and the server.
-
Unit Testing: This involves writing and executing tests for individual units or components of your code to ensure that each part works as intended. In the context of front-end development, unit tests might focus on testing functions, components, or specific features in isolation.
This project was developed using de following technologies:
- Establishment registration;
- Establishment login (magic link);
- Creation of new orders;
- Menu management;
- Review management;
- Order management;
- Establishment profile management;
- Open/closed store status;
- Metrics for the dashboard;
- Orders chart for the last 15 days;
- Revenue chart for the last 15 days;
- Average ratings (monthly/overall);
- Average orders per day (monthly/overall);
- Sound notifications for new orders (change favicon);
- pnpm install
- pnpm run dev:test
- Open http://localhost:5173 with your browser to see the result.
Developed with ๐ by @ghiberti85