A full stack project created using Next JS 14 and Spring Boot.

First, I created a Backend REST API using Spring Boot, which is also dockerized. I used Docker Compose for MySQL and the Docker project itself.

For the backend, I implemented various endpoints for CRUD operations on products, incorporating role-based access control to ensure that only admins can create, update, or delete products. JWT tokens are used for authentication and authorization, ensuring secure access to the API endpoints.

The backend configuration is managed using application.yaml, where I specified the MySQL database URL, driver class, username, password, and hibernate settings. The Product entity includes attributes such as productId, productName, and productPrice.

On the frontend, I developed the application using Next.js 14 with TypeScript. The frontend communicates with the backend API to perform CRUD operations on products. JWT tokens are managed using local storage to maintain user sessions.

The main features of the frontend include:

13. Authentication and Authorization: Users can log in, and their roles are verified to display admin-specific functionalities. The login page includes a register modal for new users.

14. Dashboard: The dashboard provides an interface for users to view and manage products. Admin users have additional options to create, update, and delete products. There is also a change password functionality and a logout button to clear session data.

15. Product Page: The product page displays a list of products with their details (ID, name, price). Admin users have access to update and delete buttons for each product. A create product modal is available for admins to add new products, ensuring no duplicate product names.

16. User Table: A user table component shows whether the logged-in user has an admin role. This table helps in managing user roles and permissions efficiently.

The project employs Tailwind CSS for styling, providing a clean and responsive UI. State management is handled using React hooks, and the data fetching methods of Next.js ensure efficient and optimized data loading.

To maintain code quality and collaboration, Git is used for version control. The project follows Agile methodologies with regular sprints and stand-ups, ensuring continuous improvement and delivery.

Overall, this project demonstrates a robust and scalable full-stack application leveraging modern technologies and best practices in web development.

Screenshots of the application:

Homescreen:

Register User

Login as Regular User

Dashboard:

Product Inventory:

Login as Admin User:

Dashboard:

Register Admin User:

Product Inventory:

Create Product:

Update Product:

Github Link:

Frontend NextJS Project: Click Here

Backend API: Click Here