To-Do List App

Objective: Build a full-stack To-Do List application with both frontend and backend components. The app should allow users to add, view, update, and delete tasks, with the data being stored persistently in a database. The app should also include a frontend interface that communicates with the backend API.

Requirements:

• Frontend:
  • Build a simple user interface that allows users to add, view, and delete tasks.
  • Each task should have a title and a timestamp when it was added.
  • Display a list of tasks with options to mark tasks as completed or delete them.
  • Use modern frontend technologies (e.g., React, Vue, or Angular) to build the user interface.
  • The frontend should make API requests to the backend to perform CRUD operations.
• Backend:
  • Build a RESTful API to handle CRUD operations for tasks.
  • Create endpoints to add, fetch, update, and delete tasks from the database.
  • Use a backend framework (e.g., Node.js with Express, Django, Flask) to implement the API.
  • Use a database (e.g., MySQL, PostgreSQL, or MongoDB) to persist task data.
  • Ensure proper validation for incoming data and return appropriate error messages for invalid input.
• Data Model:
  • Each task should have a unique ID, title, timestamp, and a status field (e.g., "Pending" or "Completed").
• Authentication (Optional):
  • Implement user authentication (e.g., JWT or session-based authentication) to allow users to manage their own tasks.
• Frontend and Backend Integration:
  • Ensure that the frontend and backend communicate correctly via API calls (e.g., using fetch or Axios).
  • The frontend should update the UI dynamically based on the task data retrieved from the backend.
• Responsive Design:
  • The frontend should be fully responsive and work well on both desktop and mobile devices.
• Security:
  • Implement basic security practices (e.g., input validation and sanitization) to prevent attacks like SQL injection or XSS.

Stretch Goals (Optional):

• Implement pagination for viewing tasks if there are too many tasks to display at once.
• Allow users to filter tasks (e.g., by status, date, or title).
• Use a modern JavaScript framework or library for frontend development (e.g., React, Vue.js, or Angular).
• Write unit and integration tests for both the frontend and backend components.
• Deploy the app to a cloud service like Heroku, AWS, or DigitalOcean.

Once you've completed the exercise, please fill out the form below.

Create a Public Github Repository and upload your solution there.

Please add a README file to your repository with instructions and requirements to run your exercise.

Also, add a detailed explanation of your solution in your README file.