Back End Project

Front End Files

Rewrite a JavaScript/Spring Boot application in Next.js

In this assignment you will construct a simple mail application in Next.js. I have already constructed a version of the application that uses a combination of a Spring Boot backend and a front end that consists of an HTML page and a JavaScript file.

You can click the buttons above to download the source code for the front end and the back end.

To get a feel for what the application does you should run it. Before running you will need to se up the MySQL database for the project. To run the back end server you will need to create a new database in MySQL named 'mail' and use the MySQL workbench's data import feature to import the database files located in the database folder in the Spring Boot project folder. Before running the Spring Boot application you may also need to edit the Java version number in the project's pom.xml file.

With the back end server running you can open the HTML file in the front end project folder in a browser to run the application.

Database structure

Here are some things that you need to know about the database structure I used for the mail database:

• Instead of integer id numbers for users and messages this application will use globally unique id strings (GUID strings). The Spring Boot back end uses a Java class to generate these id strings as needed. You will need to find a TypeScript library that can generate these id strings for you.
• Messages can have multiple recipients. To handle this, recipients for messages are stored in a separate table. Each row in the table lists the id string of the message and the id string for the recipient.
• When a user deletes a message they have received the back end will first go to the recipients table and remove the row that says that that user is a recipient of that particular message. If that was the last recipient listed for that message the back end will also delete the message itself from the message table.
• When the front end wants to display a list of message for a user it will ask the back end for a list of Handle objects. These handle objects are constructed by doing a query with the 'handle' view in the database.

Rewrite the project in Next.js

Your task in this assignment is to rewrite this application as a full stack Next.js application that works with the same mail database.

If you look inside the NetBeans project for the Spring Boot application you will see the SQL statements that the application uses to communicate with the database. Those SQL statements all appear in DAO classes in the edu.lawrence.mailserver.data package.