An open API service indexing awesome lists of open source software.

https://github.com/ruslantsykaliak/todo

A TODO web app with task management, including display, add, remove, search, mark completion, filter, assign priorities (1-10), and sort by priority. User-friendly with light and dark modes.
https://github.com/ruslantsykaliak/todo

clerk nextjs14 prisma-orm redix-ui tailwindcss todo typescript

Last synced: 3 months ago
JSON representation

A TODO web app with task management, including display, add, remove, search, mark completion, filter, assign priorities (1-10), and sort by priority. User-friendly with light and dark modes.

Awesome Lists containing this project

README

          

# TODO Web Application

Welcome to the TODO web application! This application helps you manage your tasks with a variety of features. Built with Next.js, TypeScript, TailwindCSS, and Prisma ORM.

## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Learn More](#learn-more)
- [Deploy on Vercel](#deploy-on-vercel)

## Features

### 1. Display a List of All Tasks
View a comprehensive list of all your tasks.

### 2. Add and Remove Tasks
Easily add a new task to the list and remove tasks as needed.

### 3. Search for Tasks
Effortlessly search for tasks using the search functionality.

### 4. Mark a Task as Done
Keep track of completed tasks by marking them as done.

### 5. Filter Tasks by Status
Filter tasks based on their status.

### 6. Assign Priority to Tasks
Assign priority levels to tasks, ranging from 1 to 10.

### 7. Sort Tasks by Priority
Sort tasks in ascending or descending order based on their priority.

### 8. Dark and Light Mode
Toggle between dark and light modes for a personalized experience.

## Technologies Used

- [Next.js 14.1](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Prisma ORM](https://prisma.io/)

## Getting Started

Before running the development server, set up the database details in the `.env` file. After configuring the database, use the following command:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to access the application.

## Usage

Start by adding tasks through the user interface. Use the search, filter, and sorting options to organize your tasks efficiently. Toggle between dark and light modes based on your preference.

## Learn More

Explore the resources below to deepen your understanding of the technologies used:

- [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API.
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
- [TailwindCSS Documentation](https://tailwindcss.com/docs)
- [Prisma Documentation](https://prisma.io/docs)

## Deploy on Vercel

The simplest way to deploy your TODO app is by using the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme). For detailed instructions, refer to the [Next.js deployment documentation](https://nextjs.org/docs/deployment).

Feel free to contribute or provide feedback by checking out [the GitHub repository](https://github.com/yourusername/your-repository). Your contributions are highly appreciated!