Scribd
Upload
59 views

Front-end Task 1_ Student Management Interface.pdf

Uploaded by

SC20A942 Jeme Beseka Foncham
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Front-end Task 1_ Student Management Interface.pdf

Uploaded by

SC20A942 Jeme Beseka Foncham
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Front-end Task 1: Student Management Interface

Background
The school principal has commissioned a back-end API to manage student information. As a
front-end developer, your task is to create a user-friendly interface that interacts seamlessly
with this Student Management API. The interface should allow the school staff to perform
CRUD (Create, Read, Update, Delete) operations on student data.

Requirements
Each student has the following attributes:
- id (integer, unique, auto-generated by the back-end)
- firstName (string)
- lastName (string)
- email (string, unique)
- dateOfBirth (date)

Features:
1. Student List Page:
- Display a list of all students with their firstName, lastName, email and id. The
picture below is the UI you are recommended to design.

When you click on a student entry, a detailed view of a student’s information will be shown

on the right section of the page as shown on the picture above.


- Data should be fetched by sending a GET request to `/students/{id}`.

2. Delete Student:
- When the user clicks on the delete button, a DELETE request to `/students/{id} is
sent to delete a student from the list.
3. Edit Student Form:
- When you click on the Edit button on the picture above, it should be redirected to the
/student/edit page where there is a form to edit existing student details .
- Fields should be pre-filled with the current data of the selected student.
- On submission, send a PUT request to /students/{id} to update the student's
information.

4. Add Student Form:


- A form that allows users to add a new student.
- Fields: firstName, lastName, email, dateOfBirth
- On submission, send a POST request to /students to create the new student.
Environment:
Framework: Vanilla Javascript ( Html, Css and Javascript),React.js or Next.js (choose one)
- Design: Use a CSS framework like Bootstrap or TailwindCSS for styling.
- API Integration: Axios or Fetch API for handling HTTP requests.

Optional Task:
Form Validation: Using ZOD
- Implement client-side validation to ensure that all fields are correctly filled before
submitting.
- Validate the `email` format and ensure the `dateOfBirth` is a valid date.

Submission Guidelines
1. Create a GitHub Repository:
- Set up a public GitHub repository for your project.
- Commit all source code, assets, and configuration files to this repository.
2. Share the Repository:
- Once you have completed the project, share the link to your GitHub repository on the
Discord channel `#internship-2024`.

Assets: You will find the figma design at the link below.
figma design

Deadline
- Submission Due: Friday, 06th September 2024

You might also like