Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ali-noori-dev/nextjs-advanced-todo
🚀 A feature-rich, full-stack Todo List app built with Next.js, Prisma, NextAuth.js, and Sass. Supports authentication, real-time updates, PWA, push notifications, and drag & drop task management.
https://github.com/ali-noori-dev/nextjs-advanced-todo
authentication drag-and-drop fullstack nextauth nextjs prisma pwa sass server-components todo-app typescript vercel zustand
Last synced: 2 days ago
JSON representation
🚀 A feature-rich, full-stack Todo List app built with Next.js, Prisma, NextAuth.js, and Sass. Supports authentication, real-time updates, PWA, push notifications, and drag & drop task management.
- Host: GitHub
- URL: https://github.com/ali-noori-dev/nextjs-advanced-todo
- Owner: ali-noori-dev
- Created: 2025-02-10T21:12:58.000Z (4 days ago)
- Default Branch: main
- Last Pushed: 2025-02-11T22:12:52.000Z (3 days ago)
- Last Synced: 2025-02-11T23:27:04.503Z (3 days ago)
- Topics: authentication, drag-and-drop, fullstack, nextauth, nextjs, prisma, pwa, sass, server-components, todo-app, typescript, vercel, zustand
- Language: TypeScript
- Homepage:
- Size: 89.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Next.js Advanced Todo List
A **feature-rich, full-stack Todo List application** built with **Next.js App Router**, **Prisma**, **NextAuth.js**, and **Sass**. This project demonstrates **authentication, API routes, database integration, real-time updates, and PWA capabilities**.
---
## 📌 Features
✅ **User Authentication** (OAuth & Credentials with NextAuth.js)
✅ **Task Management** (CRUD operations with API routes)
✅ **Task Categorization** (Priority, Due Date, Labels)
✅ **Drag & Drop Task Ordering**
✅ **Real-time Updates** (WebSockets / SSE)
✅ **Push Notifications** (Firebase Cloud Messaging)
✅ **Dark Mode & Responsive UI**
✅ **Offline Support (PWA)**
✅ **Deployed on Vercel**
---
## 🛠️ Tech Stack
- **Frontend:** Next.js, React, TypeScript, Sass
- **Backend:** Next.js API Routes, Prisma ORM
- **Database:** PostgreSQL / MongoDB
- **Auth:** NextAuth.js (Google, GitHub OAuth)
- **Storage:** Cloudinary or Supabase for file uploads
- **Real-time:** WebSockets / Server-Sent Events (SSE)
- **Notifications:** Firebase Cloud Messaging (FCM) / OneSignal
- **State Management:** Zustand
- **Deployment:** Vercel
---
## 🚀 Getting Started
### 1️⃣ Clone the Repository
```sh
git clone https://github.com/YOUR_GITHUB_USERNAME/nextjs-todo.git
cd nextjs-todo
```
### 2️⃣ Install Dependencies
```sh
pnpm install
```
### 3️⃣ Set Up Environment Variables
Create a `.env` file in the root directory and add:
```sh
DATABASE_URL="your_database_connection_string"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your_nextauth_secret"
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"
```
### 4️⃣ Set Up Prisma
```sh
npx prisma migrate dev --name init
npx prisma generate
```
### 5️⃣ Run the Development Server
```sh
pnpm run dev
```
Now open `http://localhost:3000` in your browser to see the app in action!
---
## ✨ Contributing
Want to contribute? **PRs are welcome!** 🚀
### 🛠️ Steps to Contribute:
### 1️⃣ **Fork the repository**
### 2️⃣ **Create a new branch**
```sh
git checkout -b feature-name
```
### 3️⃣ Commit your changes
```sh
git add .
git commit -m "feat: add new feature"
```
### 4️⃣ Push to your branch
```sh
git push origin feature-name
```
### 5️⃣ Submit a Pull Request (PR)
Once your PR is approved, it will be merged into the main branch. Thank you for your contribution!
---
## 📞 Contact
💬 **Developer:** Ali Noori
📧 **Email:** [[email protected]](mailto:[email protected])
🔗 **GitHub:** [@ali-noori-dev](https://github.com/ali-noori-dev)