1 | Angular Frontend

The HTML and CSS of the Laravel project was scraped to create Angular components that could be arranged and styled to match the original web page. Certain elements such as drag and drop file uploaders and modals were recreated using angular compatible bootstrap while a basic routing scheme was applied.

2 | Exposed Laravel Routes as RESTful APIs

The original Laravel project was designed to be self-contained, meaning all of the function calls and database manipulations were stored internally as routes. In order to be able to communicate with external frameworks like the new Angular frontend, the routes had to be recreated as RESTful APIs in another file of the project.

3 | Backend Integration with Frontend

Once the Frontend was developed and the Backend was exposed via REST APIs, the work of adding the API functionality to the new Frontend began. Buttons were connected to API calls, the login and sign-up functionalities were added, and authenticated routing was added as appropriate

4 | NodeJS Authentication Instance

Where the Laravel project ensured security by obscuring and encapsulating all internal functionality, the new structure needed a secure way of ensuring only authorized users could access the REST APIs and the database. We created a NodeJS instance to handle JWT authentication between the Angular Frontend and exposed Laravel Backend.

5 | Developed 2 Levels of Automated Testing

In order to provide testing coverage to the project, we followed a dual layer approach with both unit and integration testing. The unit testing was provided by the Jasmine tests automatically generated by Angular when creating components. The integration testing consists of handwritten Maven/Cucumber tests that manipulate the website via Selenium web drivers. 

6 | Wrote Set of Software Documentation

As the project did not have any documentation on how the application was structured or how to operate it, we had to learn everything the hard way and developed a Project Plan, Software Design Document, Test Plan Document, git repo with commit history, biweekly sprint reports, and a Trello Task board to help inform the next group of developers tasked with maintaining and developing the platform.

7 | Met Requirements of Capstone Course

Finally, we completed the rest of the requirements for the Capstone project, which include weekly progress reports, Midterm and Final presentations, and participation in the 2023 KSU C-Day.