Restoran is a web application for Restaurant Reservation Management System, allows customers to reserve tables and order food items.
Front – End Tech Stack:
- Angular 16
- Prime NG
- Kendo UI
- Dependency Injection
- Bootstrap
- Reacting Forms
- Guards
- Routing
Back – End Tech Stack :
- .Net 7
- Entity Framework
- JSON Web Token for Authorization
- Role Based Authorization
- Database in Azure
- Azure Blob Containers
The app contains two modules :
- Admin Module
- Customer Module
Admin Module :
- Admin has a login credential , he has a dashboard where he could see the total number of food items, he can create dining tables and also the menu items.
- He can view the total no. of orders in the graph stats which shoes the total number of orders per day.
- He could also see the Menu Items ordered by the customers.
Customer Module:
- Customers will have a login credentials, they can register to our app , after logging in they can reserve tables.
- After reservation they can book the food Items and they will be receiving a mail containing reservation table.
- There is a profile option available for customers where they could see the account details , also the ordered food items and dining table reserved tables.
- Below image is our home page UI.
This app includes the following features:
- JWT Authentication
- Interceptor
- Blob storage
- Sending Emails using MailKit
- Admin Dashboard stats
- Forgot and reset password
- Auth Guard
- Lazy loading
JWT Authentication :
- After a user registers with an email address and password, we check to see if they are already registered. We are setting return a toast message that E-mail already exists .In the alternative, we first generate a password hash and then store the user in a database , we have used Identity , which is inbuild table .
- There is a method called create token that is used to produce a JSON web token when a user logs in, if the password hash is the same.
- We will specify the list of claims that the token must include in the create token method, and we will return a new instance of the symmetric security key.
- The token will then be generated using the JWT Security Token class and returned.
- The user can now include that token in headers for every request
JWT Interceptor:
- Interceptor is a class file which inherits from HttpInterceptor. Whenever a request is sent to an API, the request first enters into interceptor , here JWT token will be added to the headers in the request.
- Interceptor is used in cases such that if we need to add data to the headers before sending the request to API .
- Since we have two modules, whenever the request is sent to API , the tokens are added to headers according to it , the corresponding routes will be enabled.
Blob Storage :
Since we have multiple images so we deployed the images in BLOB storage offered by Azure. Initially we created a Storage account , then created a new container. In that container we have uploaded all the images.
Admin Dashboard stats:
Below is our admin dashboard which contains total number of customers , total dining tables, a graph to track the number of orders per day.
Sending Emails using Mail Kit
- We used mail kit for sending emails to the customers . When customer registers we send an OTP for verification and when he reserves and order Food Items an Email will be sent to that customer with reserved Table Number.
- We have created a separate project file for Email Service and gave a reference to the main project , and we used those services.
- MailKit is an open-source cross-platform email library for .NET applications that provides a high-level API for sending, receiving, and managing emails. It is built on top of the MimeKit library, which handles all aspects of creating and parsing email messages in MIME (Multipurpose Internet Mail Extensions) format.
Auth Guard :
- We used Auth Guard in our project , since there are two roles (Admin , Customer ). The Customers should not get access to the routes of the Admin pages. AuthGuard is an angular route guard used to protect the routes from unauthenticated/unauthorized users.
- It is implemented using the canActivate interface which implements a canActivate() function that checks whether the current user has permission to activate the requested route.
- If the method returns true, then the route is activated or else if the method returns false then it will be redirected to the login page.
Lazy Loading :
- By implementing lazy loading, I optimized the loading time of various components and modules, ensuring that only the essential resources are fetched when needed.
- This approach not only boosted the overall speed of the application but also reduced the initial loading time, offering a seamless browsing experience to users.
- In a lazy loading approach, the application loads only the essential components and data needed for the initial view. As the user interacts with the application and navigates to different sections or pages, additional components or data are loaded dynamically on-demand.
Conclusion:
We have covered a number of restaurant reservation management system processes in this blog. With this system, consumers can place all of their online orders, provide their contact information, and more from a single dashboard. ASP.NET Web API and Angular are the technologies used in our project, regardless of whether you manage a small chain or a single store.