Front End Development
Project 2 - Front End Development
The front-end is undoubtedly one of the most important parts of a system, being users main
point of interaction with your application. For this project you will be provided with a Django
REST api and be asked to implement a front-end for it.
University System
You will be developing a front-end react system for a university registration rest api.
To download the API you can download from source at githu
git clone
[
gitlab.computing.dcu.ie/mscriney1/univerityrestapi.git>](
tps:
gitlab.computing.dcu.ie/mscriney1/univerityrestapi.git>)
Make sure to install all required li
aries with pip install -r requirements.txt
You can view the code in gitlab here: https:
gitlab.computing.dcu.ie/mscriney1/univerityrestapi
The app is loaded with a swagger interface as the homepage which will allow you to play
around with the api and view sample inputs and responses.
Pages
You are to create a single-page app that provides pages to view the following.
● Degrees
○ A page to view all degrees
○ A page to view a single degree
■ This page should also display all cohorts within the degree.
■ This can be achieved through the endpoint
http:
XXXXXXXXXX:8000/api/cohort/?degree=COMSCI will show
all cohorts for computer science (COMSCI)
https:
gitlab.computing.dcu.ie/mscriney1/univerityrestapi
http:
XXXXXXXXXX:8000/api/cohort/?degree=COMSCI
http:
XXXXXXXXXX:8000/api/cohort/?degree=COMSCI
○ A page to create a new degree
● Cohorts
○ A page to view all cohorts
○ A page to view a single cohort
■ This page should also display all students within that cohort
■ All students within a cohort can be viewed with the endpoint
api/student/?cohort=COMSCI1
■ The cohort flag is the primary key of a cohort (e.g. COMSCI1 = compute
science 1st year)
○ A page to create a new cohort
● Modules
○ A page to view all modules
○ A page to view a single module
■ This can be achieved through the endpoint
http:
XXXXXXXXXX:8000/api/module/CA298/ where CA298 is a
module code (all caps)
○ A page to view all modules delivered to a cohort
■ This can be achieved with the endpoint
http:
XXXXXXXXXX:8000/api/module/?delivered_to=COMSCI2
where COMSCI2 is a single cohort.
○ A page to create a new module
● Students
aside>⚠ Due to the number of students, we will not create pages to view all students
or all students within a degree
aside
○ A page to view an individual student
■ This can be achieved through the endpoint
http:
XXXXXXXXXX:8000/api/student/ XXXXXXXXXX/ where
XXXXXXXXXXis the id of a student.
■ This page should also contain
■ The modules the student is registered fo
■ The grades of the student
■ This can be achieved using the endpoint
http:
XXXXXXXXXX:8000/api/grade/?student= XXXXXXXXXX
where XXXXXXXXXXis the id of a student.
○ A page to create a new student
○ A page to set the students grade for a module
http:
XXXXXXXXXX:8000/api/module/CA298
http:
XXXXXXXXXX:8000/api/module/CA298
http:
XXXXXXXXXX:8000/api/module/?delivered_to=COMSCI2
http:
XXXXXXXXXX:8000/api/module/?delivered_to=COMSCI2
http:
XXXXXXXXXX:8000/api/student/ XXXXXXXXXX
http:
XXXXXXXXXX:8000/api/student/ XXXXXXXXXX
http:
XXXXXXXXXX:8000/api/grade/?student= XXXXXXXXXX
http:
XXXXXXXXXX:8000/api/grade/?student= XXXXXXXXXX
JavaScript Vs React
You are free to choose native JavaScript (Week 10) or React (week 11) or any other framework.
With the high degree of reuse within the app, I would personally recommend react.
aside>⚠ If you choose a different framework, please attach a README.md to you
submission detailing how to run your code
aside
Styling
This is a front-end application so styling is important. I am hesitant to provide marks for design
however marks will be awarded for:
● valid HTML/CSS
● Proper use of a CSS framework
○ Bootstrap
○ Material UI
○ Tailwind
○ etc..
Marking Scheme
Name Description Marks
All degrees A page to view all degrees 4
Single degree Page to view single degree - and show all cohorts in the
degree
7
New degree Page to create a new degree 4
All cohorts Page to view all cohorts 4
Single cohort Page to view single cohort - and show all students in that
cohort
7
New cohort Page to create a new cohort 4
All students in a
cohort
Page to view all students in a cohort 10
http:
eadme.md
All modules Page to view all modules 4
Single module Page to view a single module 7
All modules in a
cohort
Page to view all modules for a single cohort 4
New module Page to create a new module 4
Single student Page to view a single student - and modules + grades fo
student
15
New student Page to create a new student 10
Set grades Page to enter the grade for a student for a specific module 10
Use of css framework Proper use of a css framework 6