The following project was my Semester 3 assignment - to build a full stack application. In other words, a replica of the existing system here: https://varnatraffic.com. You can learn more about it from the documentation available. The current state of the project is unfinished, however its aim was for me to learn many software engineering concepts, such as:
- Java
- Spring framework
- Maven/Gradle
- Hibernate (ORM)
- Javascript
- React.js
- UI/UX development
- Docker
- CI/CD
- GitLab workflow
- Agile concepts
- C4 diagram
- Research using the DOT framework
- SonarQube quality assurance
- JWT Authentication & Authorization
Some information might mismatch with what is available. Here are the differences:
- The project was done using GitLab, but is distributed using GitHub.
- There is no active CI/CD, although the script is available.
- The original git history is not available.
- There is no source for the documents (doc/src).
- No UX Report & Feedback (privacy reasons)
You can run the project by just using Docker. Build instructions can be found down below. If you have any questions about the project, feel free to ask!
- /frontend/ - The source code for the React web application
- /frontend/src/ - Runtime source code
- /frontend/cypress/ - Test soure code
- /backend/ - The source code for the Java backend application
- /backend/src/main/java/ - Runtime source code
- /backend/src/test/java/ - Test source code
- /doc/ - All documents exported to PDF format
- /doc/src/ - All documents in raw format
- /doc/src/c4/ - The source code for the C4 diagram generator
- /scripts/ - Any scripts referenced in the project
- /docker-compose*.yml - Docker specific files found in the root folder
- /.gitlab-ci-yml - CI/CD pipeline script
You can find further information about the fundamentals with the provided documentation.
- Project plan
- Design document
- C4 diagram
- UML diagram
- Pipeline diagram
- Research paper on SQL vs NoSQL regarding the project
- Test plan
- Test report
- UX Feedback & Report
- Performance report as of 11/01/2023
- Research paper for justifying technology stack used
- OWASP Security report
- API documentation with Swagger
- Start the app and go to localhost:8080/swagger-ui/
- Docker integration
- Token-based authentication & authorization
- WebSockets support
- A real world map overview using Leaflet + OpenStreetMap
- CI/CD pipeline with SonarQube quality assurance
- Password hashing using Argon2
- Database persistence using an ORM (MySQL + Hibernate)
- Frontend and backend testing
- Real world integration
- Route advisor
- TypeScript rewrite
- Clone the repository with git:
git clone https://github.com/jookzie/varnabuslines --depth=1
cd ./varnabuslines/
- Ensure you have Docker installed: https://www.docker.com/products/docker-desktop/
- Open a terminal and execute:
docker compose up
Alternatively, you can run the production build
docker compose -f ./docker-compose.prod.yml up
- Visit http://localhost:80 in your browser.
You can use phpMyAdmin on http://localhost:8081 to view the database.
Having data ready to test features on is a part of the presentation process. Best practice for this is to have a public database, which any client can use. Due to the project's goal being for educational purposes, hosting a database on a public domain is out of scope, primarily due to funding limitation. Fontys' free database hosting has been considered, but has failed to comply with the project's demands, detailed here:
- Risk locking out of the database by having too many connections open
- Limited privileges to increase
max_user_connections
(currently being 10) OR increasewait_timeout
of the connection pool. - Unneccessary hassle of connecting to a VDI manually, with no provided support for app integration
A current workaround is to load mock data once by manually executing an SQL script on the database.
- Start the project using the build instructions provided
- Connect to the database using the provided phpMyAdmin.
- Copy over and execute the script under scripts/mock-data.sql
- Done! If any of the script commands fail, that would mean that the data is already there.
There are two roles in the application: users and administrators (also known as admins). To access CRUD operations, you need an admin account. By design, administrators are created by other administrators, which means that the first administrator account should be hard-coded into the database. If you have loaded the mock data presented above, you will be given an administrator accoount.
- Email:
[email protected]
- Password:
password
Else, you can follow these instructions:
- Create a regular user account
- Open the phpMyAdmin client
- Go to the
user
table - Change the
role
value of your account from0
to1
- Done! Your account has become an administrator one.