Front End DevelopmentProject 2 - Front End DevelopmentThe front-end is undoubtedly one of the most important parts of a system, being users mainpoint of interaction with your application. For...

Intructions in the file


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 github git clone []() Make sure to install all required libraries 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://127.0.0.1:8000/api/cohort/?degree=COMSCI will show all cohorts for computer science (COMSCI) https://gitlab.computing.dcu.ie/mscriney1/univerityrestapi/ http://127.0.0.1:8000/api/cohort/?degree=COMSCI http://127.0.0.1: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 = computer 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://127.0.0.1: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://127.0.0.1:8000/api/module/?delivered_to=COMSCI2 where COMSCI2 is a single cohort. ○ A page to create a new module ● Students

○ A page to view an individual student ■ This can be achieved through the endpoint http://127.0.0.1:8000/api/student/26870106/ where 26870106 is the id of a student. ■ This page should also contain ■ The modules the student is registered for ■ The grades of the student ■ This can be achieved using the endpoint http://127.0.0.1:8000/api/grade/?student=26870106 where 26870106 is the id of a student. ○ A page to create a new student ○ A page to set the students grade for a module http://127.0.0.1:8000/api/module/CA298/ http://127.0.0.1:8000/api/module/CA298/ http://127.0.0.1:8000/api/module/?delivered_to=COMSCI2 http://127.0.0.1:8000/api/module/?delivered_to=COMSCI2 http://127.0.0.1:8000/api/student/26870106/ http://127.0.0.1:8000/api/student/26870106/ http://127.0.0.1:8000/api/grade/?student=26870106 http://127.0.0.1:8000/api/grade/?student=26870106 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.

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://readme.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 for 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