Admin Page for the Restaurant Web App with Next.js and Spring Boot
Table of Contents
This article will focus on what the admin users can do on the Restaurant Web App. For demo, please use these credentials to login.
username - bruce
password - iambatman
The journey begins with a secure login. Only authorized administrators can access the Admin Page. Once you’ve proven your credentials, the backend sends a secure JWT (JSON Web Token), unlocking the gateway to culinary control.
Admin Features Demostration #
- After login, admin will be welcomed with the table displaying the list of booking made by guest users.
- The admin can see more information such as ordered items, data and time about individual bookings
- Admin can navigate to menu item page by using buttons in the navigation bar. There, admin can create or delete the items.
- In the modal, admin can fill up the form and include a JPG photo (only).
- After item is added successfully, react-query will validate the data and notify the admin. The page doesn’t need to be refresh to see the changes.
- Deleting the item also works the same way. But there is more happening in the background which is explained in later part.
- Lastly, the admin will be taken to logout page, JWT token will be deleted from localstorage and won’t have access to data when the Logout button is clicked.
The Tech Ensemble Behind the Scenes #
The part will only explain about the Spring Boot backend as the frontend was explained in the other article.
Java Spring Boot 3 and Spring Security 6: The Backend Guardians #
Building the web server to handle HTTP requests was quite easy and straight forward as Spring Boot was already working on the API routes under the hood. The hard part, for someone new to Spring Boot, was working with Java Bean and understanding dependency circle.
Files Storing in MongoDB #
I decided to use MongoDB instead of S3 bucket for storing the photo. So, I had to learn how MongoDB store files first which was the easy part. Then, I just need to associate the menu-items documents with the right photos.
And moreover, I had to make sure when admin deletes a menu item the right photo is deleted from the storage and also remove the item and update the total price from the bookings accordingly.
Authenticated API endpoints #
Admin API endpoints can only be process if the HTTP header contains JWT token. As I didn’t know some of the functions in Spring Security 5 were deprecated, learning Spring Security 6 took a few days and I was watching Spring Security 5 tutorials for days.
Deploying the Backend Server #
I used Google Cloud for the deployment with .jar file produced with maven which I found it is way simpler and straightforward compare to AWS ElasticBeanstalk.
Initially, I was trying to deploy with AWS. But at the end I found out choosing ElasticBeanstalk was not the right choice for a personal portfolio project. I’ll write a separate article for this topic in near future.