About this project
This project was given as an assignment during my third semester, where we were tasked — or hired as the Front-ender as it says in the assignment "backstory" — to build an interface for Hogwarts School of Witchcraft and Wizardry.
The user requirements
This assignment was a relatively big assignment in terms of user requirements. The user requirements are as follows:
The data
We are given two endpoints, both of which we had to fetch the JSON data from. The first endpoint consists of an array of student as objects, with properties like full name, gender and house. But heres the catch — the capitalization of each keys are completely out of place, and some with an extra space before or after, and we are expected to fix that with string methods.
In addition to that, we are to split the full name property into first name, last name, and middle name if any. Here's an example of what the raw JSON data object would look like when initially fetched:
{
"fullname": " heRMIone jean Granger",
"gender": "girl",
"house": "GRYFFINDOr "
}
And this is how the expected end result should look like (example):
{
"firstname": "Hermione",
"lastname": "Jean",
"middlename": "Granger",
"gender": "girl",
"house": "Gryffindor"
}
The list
The fetched data must be displayed in a list, as well as allow the user to sort, filter and search students.
Sorting
The user should be able to sort the list by first name, last name and house in a ascending and descending order.
Filtering
The user should also be able to filter the list, such that only students from a selected house, student responsibilities, non-expelled or expelled is shown.
Interface details
The interface should at minimum show the current number of students shown in the list at all times, and show total number of students in each house, expelled and non-expelled.
A detail pop-up / modal view
When the user clicks on a student, a pop-up will show additional details about the student, such as first name, middle name if any, nick name if any, last name photo of student if they have one, house crest and colors, blood-status, if the student is prefect or not, expelled or not, member of inquisitorial squad or not.
Expelling students
The user must be able to expel a student, in which expelling removes the student from the list of students, and adds it to another list of expelled students. Expelled students cannot return to the original list.
Prefects
This part was tricky, as it required some very specific conditions to be met. The bare minimum to this was that only two students from each house can be selected as prefects. Bonus points if you could further narrow down the condition to one boy and one girl each house, meaning both prefects cannot be the same gender from the same house.
Blood-status
This is where the second endpoint comes in play. We are to design a system that can calculate the blood-status of all students based on which family they are from.
Inquisitorial Squad
The user should be able to appoint students to the inquisitorial squad and remove them again. But only pure-blood or students from the Slytherin house can be appointed.
Hacking
Last but not least is the hacking part. According to the "backstory" in the assigment, the Front-ender grows tired of the additional user requirements that the administrators keep adding, so that the Front-ender decide the hack the system by injecting themself into the list of students and mess up the system, while they cannot be expelled from the school by the administrators.
To hack the system, you just need to input "1337" into the search bar, which will then result in these 3 things to happen:
The Front-ender will be injected in the list of students and cannot be expelled.
The blood-status is no longer trustworthy, and all students will get a random blood-status when the list is refreshed, i.e when sorting or filtering.
When the user attemps to appoint a student to the inquisitorial squad, the student will get removed again after a short period of time.
Tech stack used for this project
This project was built with HTML, CSS, JavaScript, JSON, and Adobe Photoshop.