Academic full-stack project
StudyTrack
A study management web application that brings exams, topics and study sessions into a single structured workflow.
An academic full-stack web application developed while studying Computer Engineering.
Track
From need
to application.
StudyTrack was developed as a practical exercise in translating a real organisational need into a complete web application. The project combines interface design, application logic and database persistence, allowing study-related information to be created, updated and managed through a consistent workflow.
The application became a concrete way to apply programming, database and web-development concepts while bringing an established UI and web-design perspective into software implementation.
Structure
the complexity.
Study planning often involves information distributed across calendars, notes and disconnected lists. The challenge was to define a clear data structure and create an interface through which exams, individual topics and study sessions could be managed without losing their relationships.
One workflow.
Connected data.
The solution centralises study information inside an authenticated application. Structured forms and workflows connect the interface to Laravel application logic and MySQL persistence, while validation and user feedback help keep data consistent.
- Clear relationships between exams, topics and study sessions
- Structured forms and CRUD workflows
- Validation and user feedback
- Asynchronous interface updates where appropriate
- Separation of responsibilities through MVC
A complete
study workflow.
Authentication
Access to the application through an authenticated workflow.
Study organisation
Exams, topics and individual study sessions can be created and managed.
CRUD workflows
Structured creation, editing and deletion of stored information.
Data validation
Server-side validation helps prevent incomplete or inconsistent input.
Asynchronous updates
Selected status changes are handled through JavaScript and the Fetch API without requiring a complete page reload.
Persistent data
Application data and relationships are stored in MySQL.
Interface.
Logic. Data.
The interface collects and presents information, Laravel handles routing, authentication, validation and application logic, while MySQL maintains persistent project data.
- 01 HTML, CSS and JavaScript interface Forms · DOM interaction · Feedback · Fetch API
- 02 Laravel MVC application logic Routing · Authentication · Controllers · Models · Validation
- 03 MySQL database Persistent records · Relationships · Study data
Working
screens.
Selected screens from the implemented application. These images show the actual interface rather than reconstructed portfolio mock-ups.
Design into
working code.
The project required moving between interface decisions, frontend behaviour, Laravel application logic and persisted data, keeping each interaction consistent across the full request-response flow.
- Translation of interface requirements into working HTML, CSS and JavaScript
- DOM interaction and JavaScript email autocomplete
- Form handling, feedback and interface states
- Fetch API status updates without a complete page reload
- Frontend actions connected to Laravel routes and controllers
- Models and MySQL persistence for stored application data
- Server-side validation before data is committed
- Debugging across interface, application logic and persistence layers
A bridge into
development.
StudyTrack gave me practical experience in carrying a project from interface requirements to application logic and database persistence. It strengthened my understanding of MVC development, form validation, asynchronous interaction and the relationship between frontend behaviour and stored data.
The project represents a practical step from my previous Web and UI Design experience toward frontend and software development: visual decisions remain important, but they are now connected to application behaviour, data structures and server-side logic.
What comes
next.
These are future improvements, not technologies or features currently implemented in StudyTrack.