/rustic-todo

Primary LanguageTypeScript

todoAId

Initial Effort

Challenge

You're tasked with building a web application that allows users to create and manage tasks. The application should have the following features:

  • Users can create a new task by entering a task name and description.
  • Users can mark a task as complete by clicking a checkbox next to the task.
  • Users can edit a task by clicking an edit button next to the task.
  • Users can delete a task by clicking a delete button next to the task.
  • The application should display a list of all tasks that have been created.
  • The application should be built using React, TypeScript, and Next.js.

Instructions

  • Use Next.js to create a new project.
  • Create a form component that allows users to enter a task name and description.
  • Create a task list component that displays all tasks that have been created.
  • Add a checkbox next to each task that allows users to mark the task as complete.
  • Add an edit button next to each task that allows users to edit the task.
  • Add a delete button next to each task that allows users to delete the task.
  • Use React state and props to manage the application's data.
  • Use TypeScript to ensure type safety throughout the application.
  • Add styling to the application using CSS or a CSS preprocessor of your choice.
  • Deploy the application to a hosting service of your choice (e.g. Vercel, Heroku, AWS).

Requirements

  • The application should be built using React, TypeScript, and Next.js.
  • The application should be responsive and look good on different screen sizes.
  • The application should be well-organized and easy to read.
  • The code should be well-documented and follow best practices for React, TypeScript, and Next.js development.
  • The application should be deployed and working as expected.

Ideas and ToDo List

UI/UX Improvements

  • Support Dark/Light modes
  • Add Date Sorting
  • Add Custom Sorting w/Drag&Drop
  • Add Labels / Folders
  • Add author

Features

  • Add ChatGPT integration
  • Add Task Time
  • Add Suggested Task Time
  • Add Task Location
  • Add Suggested Task Location
  • Add Task Priority
  • Add Suggested Task Priority
  • Add Task people
  • Add Suggested Task people
  • Add multi-language support
  • Add repetitive multiple tasks easily
  • Add multiple tasks as a workflow / template
  • Add persistent storage

Getting Started

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.