Progressive Web App - Todo Application

A full-stack Progressive Web Application (PWA) built with Next.js, Express, and PostgreSQL for managing tasks with offline capabilities.

🚀 Core Features

Frontend

• Next.js 16 - React framework with Turbopack for fast development
• Progressive Web App (PWA) - Installable on desktop and mobile devices
• Dark Mode Support - Theme switching with next-themes
• Responsive UI - Built with Tailwind CSS and Radix UI components
• Real-time Notifications - Toast notifications using Sonner
• Online/Offline Detection - Visual indicator for connection status
• Local Storage - Persistent user session management

Backend

• Express.js - REST API server
• PostgreSQL (Neon) - Cloud-hosted serverless database
• Drizzle ORM - Type-safe database operations
• CORS Enabled - Cross-origin resource sharing support
• Error Handling - Comprehensive error management and logging

Database Schema

• Users Table
  • UUID (Primary Key)
  • Username
  • Created At (Timestamp)
  • Tasks (JSON)

API Endpoints

User Management

• POST /api/users - Create or ensure user exists
• GET /api/users/:uuid - Get user by UUID

Task Management

• GET /api/users/:uuid/tasks - Get all tasks for a user
• POST /api/users/:uuid/tasks - Add a new task
• PUT /api/users/:uuid/tasks - Update all tasks
• PATCH /api/users/:uuid/tasks/:taskId/status - Update task status

Health Check

• GET /api/health - Server health status

🛠️ Tech Stack

Frontend:

• Next.js 16.0.10
• React 19.2.1
• TypeScript 5
• Tailwind CSS 4
• Radix UI Components
• Lucide Icons

Backend:

• Express.js
• Drizzle ORM 0.45.1
• Neon Serverless PostgreSQL
• CORS

Development:

• Bun Runtime
• Drizzle Kit (Database Migrations)
• ESLint

📦 Installation

1. Clone the repository

git clone <repository-url>
cd progressive-web-app

2. Install dependencies

bun install

3. Set up environment variables Create a .env file in the root directory:

DATABASE_URL=your_postgresql_connection_string

4. Push database schema

bunx drizzle-kit push

🚀 Running the Application

Development Mode

Frontend (Port 3000):

bun run dev

Backend (Port 3001):

bun run server

Production Mode

Build the application:

bun run build

Start the production server:

bun run start

🗂️ Project Structure

progressive-web-app/
├── app/                      # Next.js app directory
│   ├── components/          # React components
│   │   ├── Todo.tsx        # Main todo component
│   │   └── navigator.jsx   # Navigation component
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Home page
├── components/              # UI components
│   └── ui/                 # Shadcn UI components
├── server/                  # Backend server
│   ├── db/                 # Database configuration
│   │   ├── schema.ts       # Database schema
│   │   └── server.ts       # Database connection
│   ├── index.ts            # Express server
│   └── user.ts             # User operations
├── public/                  # Static files
├── lib/                     # Utility functions
├── drizzle.config.ts       # Drizzle ORM configuration
├── .env                     # Environment variables
└── package.json            # Dependencies

🎯 Key Functionalities

User Authentication

• Auto-generated UUID for each user
• Username-based identification
• Persistent session storage

Task Management

• Create new tasks
• View all tasks
• Update task status (pending/completed)
• Task persistence in PostgreSQL
• Timestamp tracking for each task

Offline Support

• PWA capabilities for offline access
• Service worker integration
• App installation support

🔒 Data Flow

1. User creates account with username
2. UUID generated and stored locally
3. User added to PostgreSQL database
4. Tasks created and synced to database
5. Real-time UI updates with optimistic rendering
6. Status changes persisted to backend

🐛 Error Handling

• Client-side validation
• Server-side error responses
• User-friendly error messages
• Console logging for debugging
• Database transaction safety

📝 API Testing

Use Postman or any API client to test endpoints:

Create User

POST http://localhost:3001/api/users
Body: { "uuid": "...", "username": "John Doe" }

Add Task

POST http://localhost:3001/api/users/:uuid/tasks
Body: { "task": { "id": "1", "title": "Buy groceries", "status": "pending", "completed": false } }

Update Task Status

PATCH http://localhost:3001/api/users/:uuid/tasks/:taskId/status
Body: { "status": "completed" }

👨‍💻 Development

Built with modern web technologies focusing on:

• Type safety with TypeScript
• Performance optimization
• User experience
• Scalability
• Code maintainability