🧩 DoFlow – Organize Your Life

DoFlow is a modern, minimal, and intuitive to-do list & productivity web application designed to help users organize tasks, stay focused, and improve daily productivity. The application features secure email OTP–based authentication, a clean user experience, and a scalable serverless architecture.

🌐 Live Demo: https://doflow-todolist.vercel.app/

---

✨ Features

🔐 Authentication

• User Sign Up & Sign In
• Email OTP verification (password-based & passwordless login)
• 6-digit OTP with expiration
• Secure account activation flow
• Resend OTP with cooldown handling

📝 Task Management

• Create, update, and delete tasks
• Mark tasks as completed
• Clean and distraction-free task interface

🎨 UI / UX

• Minimal and modern design
• Fully responsive (mobile-first)
• Smooth animations and loading states
• Consistent typography and color system

---

🛠 Technology Stack

Frontend

• Next.js – Full-stack React framework for routing, rendering, and application structure
• React.js – Component-based UI development
• TypeScript – Type safety and maintainable codebase
• Tailwind CSS – Utility-first styling for responsive and modern UI

Backend

• Next.js API Routes (Serverless Functions) – Backend logic for authentication and OTP handling
• Edge Functions – Low-latency server-side execution deployed on Vercel

Authentication & Email

• Resend – Transactional email service for sending OTP verification emails

Database & Backend Services

• Supabase – Backend-as-a-Service for persistent user and task data storage

Deployment

• Vercel – Serverless deployment platform optimized for Next.js applications

---

📂 Project Structure

/app
 ├─ /auth
 │   ├─ signin
 │   ├─ signup
 │   ├─ verify-otp
 │
 ├─ /api
 │   └─ /auth
 │       ├─ send-otp
 │       ├─ verify-otp
 │       └─ login
 │
 ├─ /components
 │   ├─ AuthForm.tsx
 │   ├─ OTPInput.tsx
 │   └─ Button.tsx
 │
 ├─ /hooks
 │   └─ useAuth.ts
 │
 └─ /lib
     ├─ resend.ts
     ├─ otp.ts
     └─ db.ts

---

🔐 Environment Variables

Create a .env file in the root directory:

RESEND_API_KEY=your_resend_api_key
FROM_EMAIL="DoFlow <no-reply@yourdomain.com>"
SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key
JWT_SECRET=your_jwt_secret

⚠️ Do not commit environment variables to version control.

---

▶️ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm / yarn
• Supabase project
• Verified Resend domain

Installation

# Clone the repository
git clone https://github.com/your-username/doflow.git

# Navigate to project directory
cd doflow

# Install dependencies
npm install

# Start development server
npm run dev

Open the app at:

http://localhost:3000

---

🔒 Security Practices

• Password hashing and secure authentication flows
• OTP generation with expiration and validation
• Server-side environment variable protection
• Rate-limited OTP requests
• Serverless API isolation

---

🧠 Architecture Highlights

• Full-stack application built with Next.js
• Serverless backend with scalable API routes
• Clean separation of concerns (UI, hooks, APIs, utilities)
• Production-ready project structure

---

📌 Future Enhancements

• Dark mode support
• Task reminders and notifications
• Task categorization & priority levels
• Calendar integration
• Analytics dashboard

---

🎓 Portfolio Summary

DoFlow demonstrates the implementation of a modern full-stack web application with secure email OTP authentication, serverless backend architecture, and clean, responsive UI using industry best practices.

---

👨‍💻 Author

Atharva Sharma Aspiring Full-Stack Developer

• 💼 LinkedIn: https://www.linkedin.com/in/atharva-sharma-775502324/
• 💻 GitHub: https://github.com/atharva-dev1

---

⭐ Support

If you find this project useful, consider giving it a ⭐ star on GitHub. Contributions, issues, and feature requests are welcome!