https://github.com/zahidrahimoon/todo-app

My First NextJs FullStack Todo-App.
https://github.com/zahidrahimoon/todo-app

fullstack javascript mongodb nextjs14 reactjs tailwindcss todoapp

Last synced: about 1 year ago
JSON representation

My First NextJs FullStack Todo-App.

• Host: GitHub
• URL: https://github.com/zahidrahimoon/todo-app
• Owner: zahidrahimoon
• Created: 2024-09-10T21:06:11.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T16:11:36.000Z (almost 2 years ago)
• Last Synced: 2025-04-13T14:53:07.729Z (over 1 year ago)
• Topics: fullstack, javascript, mongodb, nextjs14, reactjs, tailwindcss, todoapp
• Language: JavaScript
• Homepage:
• Size: 185 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📝 Next.js Fullstack Todo Application

This is a full-stack Todo application built using [Next.js](https://nextjs.org/), which allows users to add, delete, and mark tasks as completed. The application also features a 🌞 **day** and 🌜 **night** toggle bar and 📑 **task sorting** functionality by title. The backend is powered by MongoDB for database management, and the frontend is styled using Tailwind CSS, with notifications handled by Toastify.

## 🚀 Features

- ➕ **Add new tasks** to the todo list

- ❌ **Delete tasks** from the list

- ✅ **Mark tasks as complete** or incomplete

- 🔠 **Sort tasks alphabetically** by title

- 🌗 **Toggle between day and night modes** for improved user experience

- 🔄 **Real-time updates** without page reloads

## 🛠 Tech Stack

- 🖥 **Next.js** - Full-stack framework for React applications

- 🗄 **MongoDB** - NoSQL database for storing todos

- 🎨 **Tailwind CSS** - Utility-first CSS framework for styling

- 🔔 **Toastify** - For displaying notifications

- ⚛️ **React** - For building the user interface

## 🚀 Project View 

- ![ViewWhite](https://github.com/zahidrahimoon/todo-app/blob/master/Screenshots/ViewTodo.PNG)

- ![viewBlack](https://github.com/zahidrahimoon/todo-app/blob/master/Screenshots/blackViewTodo.PNG)

- ![addBlack](https://github.com/zahidrahimoon/todo-app/blob/master/Screenshots/blackaddTodo.PNG)

- ![addWhite](https://github.com/zahidrahimoon/todo-app/blob/master/Screenshots/addTodo.PNG)

## 🏁 Getting Started

First, clone the repository and install the necessary dependencies:

```bash

npm install

# or

yarn install

```

Then, run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

```

## 📚 Learn More

To learn more about Next.js, check out the following resources:

- 📖 [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API.

- 🎓 [Learn Next.js](https://nextjs.org/learn) - Interactive Next.js tutorial.