Skip to content

amy-juan-li/example-dnd-todo

Repository files navigation

A simple Drag-and-Drop Todo App

Features:

  • Two views to toggle: Kanban View and Weekly View.
  • You can create new task by press enter key after filling the content in the input box.
  • You can easily update and delete task by clicking the icon buttons on the right side of each task.
  • You can drag and drop task to update their status.

Basic todo screenshot dnd- weekly task  view

Tech Stack

Project Structure

Project structure screenshot

Getting Started

  • Git clone this repo
  • Install all dependencies:
yarn
# or 
yarn install

Yarn install packages screenshot

  • Run the development server:
yarn dev

Yarn run dev server screenshot

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

Modes and Environment Variables

Two modes:

  • development is used by yarn dev
  • production is used by yarn build

Environment Variables Load Order Environment variables are looked up in the following places, in order, stopping once the variable is found.

process.env
.env.$(NODE_ENV).local
.env.local (Not checked when NODE_ENV is test.)
.env.$(NODE_ENV)
.env

Learn more: https://nextjs.org/docs/basic-features/environment-variables

Relevant articles

About me

About

Use react-beautiful-dnd to create a draggable&droppable Kanban board.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published