Scribd
Upload
19 views

Josh Talks _ Frontend Developer Coding Task (1)

Uploaded by

Rishabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Josh Talks _ Frontend Developer Coding Task (1)

Uploaded by

Rishabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Frontend Developer Coding Task

Duration: 24 Hours

Objective:
Build a Task Management App with the following core functionalities:

1. Add, Edit, Delete, and Mark Tasks as Completed


2. Sort tasks dynamically by priority (high, medium, low).
3. Server-side rendering (SSR) using Next.js for initial task loading.
4. Implement basic responsive design using CSS.

Requirements:

1. React & Next.js:


- Build a simple Next.js app that displays a list of tasks.
- Use Next.js server-side rendering (getServerSideProps) to load the initial list of tasks from
an array in your code.

2. Task Features:
- Add a new task: Each task should have a title, description, and priority (high, medium, low).
- Edit a task: Allow editing of the task title, description, and priority.
- Mark task as completed: Toggle between completed and pending states.
- Delete task: Remove tasks from the list.
- Sort tasks: Dynamically sort tasks by priority with high priority tasks at the top. Use any
simple data structure

3. User Interface:
- Use basic HTML/CSS to style the task list. Ensure it is responsive and tasks are clearly
distinguished based on their priority (e.g., color-coding tasks: red for high, yellow for medium,
green for low).
- Display completed tasks at the bottom of the list.

4. Bonus (Optional but Appreciated):


- Implement local storage to persist tasks between page reloads.
- Add a simple search bar to filter tasks by title or description.

Deliverables:

1. GitHub Repository: Share the project via GitHub.


2. Readme File: Include setup instructions and a brief description of the approach used for
sorting tasks by priority.

You might also like