Taskflow 🚀

A todo management application built with Node.js, Express, Prisma, PostgreSQL and Supabase. The project combines a RESTful backend with server-rendered views and a polished frontend experience for creating, editing, viewing, and managing todos.

Overview ⭐️

This application allows users to:

• register and log in securely
• manage personal todo items
• create, edit, delete, and view tasks
• use a protected dashboard backed by authentication middleware
• interact with the app through HTML views and API endpoints

The project is structured as a backend-focused web application with clear separation between routes, controllers, views, and database access.

Features 🔗

• User authentication and session handling
• JWT-based access control
• Refresh-token awareness through cookies and server-side session records
• CRUD operations for todos
• Protected dashboard and create/edit flows
• Prisma ORM integration with PostgreSQL
• Responsive UI with shared styling and status-based badges

Technologies Used ⚙️

Backend

• Node.js
• Express.js
• JavaScript (ES Modules)
• JWT (jsonwebtoken)
• Cookie parsing for browser cookie handling
• Prisma ORM
• PostgreSQL
• Supabase for PostgreSQL database integration

Frontend

• HTML5
• CSS3
• Vanilla JavaScript
• EJS templates for edit view rendering

Project Structure 🏛️

src/
|____ app.js
|
|____ config/
|            |_____ config.js
|
|____ controllers/
|            |
|            |_____ controller.auth.js
|            |_____ controller.todo.js
|
|____ routes/
|            |_____ route.auth.js
|            |_____ route.todo.js
|            |_____ route.view.js
|
views/
|____  create.html
|____  dashboard.html
|____  edit.ejs
|____  login.html
|____  register.html
|
public/
|____  css/
|            |_____ style.css
|____  js/
|            |_____ dashboard.js
|
prisma/
|____  schema.prisma
|____  migrations/
|
database/
|____  db.config.js

Database Design ✨

The application uses Prisma with a PostgreSQL datasource and the following main models:

• User
  • stores account data such as username, email, password hash, and with built-in id assigned by supabase
• Session
  • tracks user sessions and state (by revoking access: true/false)
• Todo
  • stores task information such as title, description, status, and timestamps (created_At/ updated_At)

Prisma Schema Highlights

• User has unique username and email fields
• Session stores session metadata and revocation state
• Todo uses an enum TaskStatus with values:
  • TODO
  • IN_PROGRESS
  • DONE

Backend Concepts Implemented 💼

This project demonstrates several core backend development concepts:

• RESTful API design
• Route-based architecture
• Middleware-driven authentication and authorization
• JWT-based stateless authentication
• Cookie-based session persistence
• CRUD operations with a relational database
• ORM-based data access using Prisma
• Server-side rendering with EJS
• Environment-based configuration
• Error handling for invalid credentials, missing sessions, and unauthorized access

API Endpoints 🏠

Authentication Routes

• POST /api/auth/register – creates a new user account
• POST /api/auth/login – authenticates a user and creates a session
• GET /api/auth/refresh – refreshes the authentication context
• GET /api/auth/logout – logs the user out and invalidates the session

Todo Routes

• POST /api/todo/create – creates a new todo item
• GET /api/todo/dashboard – fetches todos for the authenticated user
• GET /api/todo/delete/:id – deletes a todo item
• GET /api/todo/edit/:id – renders the edit page for a todo item
• POST /api/todo/edit-todo/:id – updates a todo item

View Routes

• GET /register – registration page
• GET /login – login page
• GET /create – protected create page
• GET /dashboard – protected dashboard page

Authentication Flow

The authentication system uses a combination of:

• user credentials validation
• password hashing before storage
• JWT tokens for identity verification
• cookies for token transport
• session records in the database for traceability and invalidation

This provides a practical foundation for secure user access and protected resource handling.

Installation 🟢

Prerequisites

• Node.js (recommended latest LTS)
• PostgreSQL local database ( using pgAdmin 4 or Supabase )
• npm or pnpm

Steps

1. Clone the repository
2. Install dependencies:

npm install

3. Create a .env file in the project root with the following variables:

PORT=3000
JWT_SECRET=your_super_secret_key
DATABASE_URL=postgresql://username:password@localhost:5432/todo_db (or supabase DB link)

4. Run Prisma migrations:

npx prisma migrate dev

5. Start the development server:

npm run dev

The application will be available at:

http://localhost:3000/register

Development Notes 📝

• The app uses Express middleware for request parsing, cookie handling, and static file serving.
• The frontend is intentionally lightweight and uses vanilla JavaScript for interactions.
• Used AI for styling and it may be very simple or too familier due to that reason, the core focus was over backend development
• The codebase follows a simple controller-based structure for maintainability.

Future Improvements 👋

Possible enhancements for the project include:

• role-based access control
• email verification
• password reset functionality
• better frontend state management
• API response standardization

Please Note ‼️

The refresh token route is still under development so you may face direct json responses instead of any UI, if the Access Token has expired because it stays valid for just 15 minutes due to security reasons. Please do not mind pressing back button of your browser 🙏

License

This project is currently licensed under ISC. Project Link: Click here