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.
