Webapp for Chez Natalie
In the second semester we switched our research with another group. This meant we had to create a website for a client that we didn’t know yet. The goal was to use the research from the other group to understand the goal and use it to create a website for the client.
SKIL2
At Thomas More, we have a subject called Skills Integration Lab. This subject is focused on combining all skills learned in courses and applying them to realistic projects.
In the second year of SKIL, we are not working for real clients just yet. Instead, we are working for fake companies that are created by our teachers. This is done to give us the opportunity to practice our skills without the pressure of working for a real client.
Validating and researching
Because this was a new client for us, we started by validating the research from the other group. We did this by conducting an interview with the client to understand their needs and expectations and compare it to the research from the other group.
Next up we started analyzing the ERD and comparing it to the client’s needs and expectations.
Rewriting the ERD
After analyzing the ERD, we noticed that it was not correct. We started by rewriting the ERD to match the client’s needs and expectations.
Tech stack
For this project we are (forced) to use Laravel with the TALL stack. This includes the following:
- TailwindCSS
- Alpine.js
- Laravel
- Livewire
We use FluxUI as our UI framework for this project. It is tightly integrated with Livewire and Alpine.js.
Setting up the database
After rewriting the ERD and confirming it with the client, we started by setting up the database. I took the task of setting up the database and creating the models. I used Eloquent ORM (part of Laravel) to create the database tables.
What does it need?
Each table needs a migration to tell the database how the data of the table is structured. It then needs a model to interact with the database table. We can define custom lookups & functions here to make it easier to work with the data. Finally we need seeders and optionally factories to populate the database with data and use fake data in unit tests.
Scrum
For this project we are working with the scrum methodology. We have split up the project into multiple sprints, each with their own goals.
We are not fully following the scrum methodology because we are unable to do a daily standup everyday. This because we are not working on this project full-time.
Jira
We are using Jira to manage our project. We have created a backlog of all the tasks we need to complete and at the start of every sprint we evaluate our backlog and choose which tasks we want to complete this sprint. Each task gets a story point value to estimate the difficulty of the task. We use fibonacci numbers for this (1, 2, 3, 5, 8, 13, 21, …).
Sprint 1
Normally it was planned to setup the database and components for the project in this sprint. But we where already ahead of this. We agreed to start working on the must have features for our client.
Admin Dashboard
This sprint I’ve worked on creating an extensible dashboard for the admin. This dashboard is to get a quick overview of the bookings and the rooms.
Because of the limited time we had and because we where ahead of the planning, we where not able to finish all tasks in this sprint. We did however get an audit on our database setup at the end of this sprint. The score we received was perfect. As described by the teacher: “Group 601 has delivered a highly professional and extensive database architecture. The project covers a complex scope including room bookings, bike rentals, yoga classes, and a mail template system. The code quality is excellent, with strong adherence to Laravel 12 standards and clear architectural choices.”
Sprint 2
For sprint 2 we finished the tasks that weren’t finished from sprint 1. We also picked up some new tasks. We already completed all the must have features, so we started working on the should have features.
Yoga Teacher Class Management System
This sprint I’ve worked on setting up the login logic for yoga teachers and giving them a way to manage their classes. The class management system is a comprehensive system that allows yoga teachers to create, update, and delete classes. It includes features like automatically checking if the room is available and handling this for canceled classes.
Client Review Page
I’ve also worked on the page for clients to write a review. Here they can write a review by providing a rating, a title and a message. Once they have made review they are able to edit or delete that review. A client can only make one review.
Extending Admin Dashboard
I’ve also worked on extending the admin dashboard to include the new calender.
Sprint 3
During sprint 3 I’ve mostly worked on core backend features and QoL features for the client.
Yoga Teacher Dashboard
The yoga teacher now has a dashboard with all the necessary info to quickly get an overview of their upcoming classes and planning for today.
Mail Template Management
I’ve implemented a sophisticated mail template management system for the admin. This allows the admin to create and manage mail templates that are used to send emails to clients. These templates are used for various purposes, such as sending booking confirmations, reminders, and other notifications.
The admin can choose between different variables to put in the mail template. These variables are then replaced with the actual values when the email is sent.
The variables depend on the type of mail template. For example, a booking confirmation mail template will have different variables than a yoga class cancellation mail template.
These types depend on which event the mail should be sent for.
As you can see, when selecting the yoga cancellation to trigger the mail, we can’t put in the room number. This prevents the admin from creating mail templates with variables that can’t be filled in. The admin can also choose when to send the mail, for example right when the event happens or a couple of days delayed.
Via this way we keep the whole mailing system flexible for changes.
Mail Backend
We can make mail templates, but now they also need to be sent. I’ve implemented a system that sends the emails at the right time.
This is done via a queue system.
To spare you from the technical info, i’ll shortly introduce the system.
The system depends on 3 critique parts:
- Getting the right models for our variables
- Sending the mail at the right time (directly or delayed)
- Remembering mails even when the server restarts
These systems together make sure that the right email is sent at the right time to the right person.
Error pages
I’ve also worked on providing styled error pages. I’ve also implemented a custom 404 page. Other errors share the same template, but with different error messages.
Image not found: /src/lib/assets/projects/skil2-chez-natalie/error-404.png
Sprint 4
Come back for sprint 4!