Todo Web Application

A full-stack Todo web application built with a Next.js frontend, Laravel REST API backend, and PostgreSQL database.

Tech Stack

• Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS, Axios
• Backend: PHP 8.2+, Laravel, Laravel Sanctum (Token-based Authentication)
• Database: PostgreSQL

---

Features & Functional Requirements

1. Authentication Module

• User Registration & Login: Secure signup and login flows with password hashing (bcrypt).
• Session Management: Token-based authentication using Laravel Sanctum and secure logout handling.
• Protected Routes & APIs: Frontend route protection and backend API endpoint security ensuring unauthorized access is blocked.
• Validation & Error Handling: Input validation with clear, aggregated error responses returned from the backend.
• Responsive UI: Modern, responsive interface styled with Tailwind CSS.

2. Todo Management Module

Authenticated users have full control over their tasks:

• Create, Edit & Delete: Add new tasks, edit pending tasks, and remove tasks securely.
• State Control: Mark tasks as completed or pending (with strict completion rules preventing edits or reversals on completed items).
• Search & Filter: Real-time search across task titles/descriptions and filtering by status (All, Pending, Completed).
• Audit Logging: Automatically tags modified tasks with an (Edited) indicator.
• Security: Scoped queries preventing IDOR vulnerabilities and request throttling on auth routes.

---

Setup Instructions

1. Backend Setup (Laravel)

Before configuring Laravel, make sure to create an empty PostgreSQL database using your preferred database tool (e.g., pgAdmin or terminal):

CREATE DATABASE your_database_name;

Open a new terminal in the project root directory and run:

cd backend

# Install PHP dependencies
composer install

# Create your local environment file
cp .env.example .env

# Generate application key
php artisan key:generate

Open your newly created .env file and configure your PostgreSQL database credentials (matching the database name you just created):

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password

Run migrations, seed sample data, and start the server:

php artisan migrate --seed
php artisan serve

(Backend runs at http://localhost:8000)

---

2. Frontend Setup (Next.js)

Open a new terminal in the project root directory and run:

cd frontend

# Install Node dependencies
npm install

# Run the development server
npm run dev

(Frontend runs at http://localhost:3000)

---

3. Accessing the Application

Once both the backend and frontend servers are running, open your browser and visit:

http://localhost:3000

You can use the pre-created demo credentials (from the database seeder) to log in immediately:

• Email: demo@example.com
• Password: password123