Task Tracker Web App

A modern full-stack Task Tracker application built with Next.js 14, TypeScript, .NET 8 Web API, and Neon PostgreSQL.

This project was built as a practical engineering assessment focusing on:

• clean architecture
• API-driven development
• responsive UI
• atomic design methodology
• real database integration
• maintainable code quality

---

Tech Stack

Frontend

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• NextAuth.js
• React Hooks

Backend

• ASP.NET Core Web API (.NET 8)
• Entity Framework Core
• JWT Authentication

Database

• Neon PostgreSQL

Tooling

• ESLint
• Prettier
• SonarJS
• JSX Accessibility Plugin

---

Features

Authentication

• User registration
• User login
• Protected routes
• JWT-based authentication
• Session handling with NextAuth

Task Management

• Create tasks
• Edit tasks
• Delete tasks
• Update task status
• Set task priority
• Due date support

Dashboard

• Task statistics overview
• Overdue task highlighting
• Status summary cards

UI/UX

• Fully responsive
• Mobile-friendly
• Atomic component architecture
• Accessible form controls

---

Project Structure

frontend/
│
├── app/
│   ├── auth/
│   ├── dashboard/
│   ├── tasks/
│   ├── api/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
│
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   └── templates/
│
├── lib/
├── types/
├── public/
│
└── package.json

backend/
│
├── Controllers/
├── Data/
├── DTOs/
├── Models/
├── Services/
├── Migrations/
├── Program.cs
│
└── appsettings.Development.json

---

Atomic Design Structure

Atoms

Small reusable UI components:

• Button
• Input
• Badge
• Avatar

Molecules

Combined UI units:

• TaskCard
• SearchBar
• FormField

Organisms

Complex sections:

• TaskBoard
• Navbar
• Sidebar
• DashboardStats

Templates

Page layout wrappers:

• DashboardLayout
• AuthLayout

---

Environment Variables

Frontend (.env.local)

NEXTAUTH_SECRET=
NEXTAUTH_URL=
NEXT_PUBLIC_API_URL=
API_URL=

Backend (appsettings.Development.json)

{
  "ConnectionStrings": {
    "DefaultConnection": ""
  },
  "Jwt": {
    "Key": "",
    "Issuer": "",
    "Audience": ""
  }
}

---

Getting Started

1. Clone Repository

git clone <repository-url>

---

2. Frontend Setup

cd frontend
npm install

Create:

.env.local

Add environment variables.

Run frontend:

npm run dev

Frontend runs on:

http://localhost:3000

---

3. Backend Setup

cd backend
dotnet restore

Add database connection string inside:

appsettings.Development.json

Run migrations:

dotnet ef database update

Run backend:

dotnet run

Backend runs on:

https://localhost:5001

Swagger:

https://localhost:5001/swagger

---

Database

This project uses:

• Neon PostgreSQL
• Entity Framework Core
• Code-first migrations

Main tables:

• Users
• Tasks

Relationships:

• One user → many tasks

---

Available Scripts

Frontend

npm run dev
npm run build
npm run lint

Backend

dotnet run
dotnet ef migrations add InitialCreate
dotnet ef database update

---

Authentication Flow

User Login
    ↓
.NET API validates credentials
    ↓
JWT Token generated
    ↓
NextAuth stores session
    ↓
Protected pages use session token

---

API Architecture

Next.js Frontend
        ↓
.NET Web API
        ↓
Neon PostgreSQL

The frontend never communicates directly with the database.

---

Responsive Design

The application supports:

• Desktop
• Tablet
• Mobile devices

Responsive layouts implemented using Tailwind CSS.

---

Code Quality

This project includes:

• ESLint
• Prettier
• SonarJS rules
• Accessibility linting
• Strict TypeScript

---

Deployment

Frontend

• Vercel

Backend

• Render / Railway

Database

• Neon PostgreSQL

---

Security Notes

• No secrets committed to Git
• JWT authentication implemented
• Environment variables protected
• Database credentials excluded from repository

---

Known Limitations

• No drag-and-drop task movement yet
• Basic authentication only
• No email verification
• No task attachments

---

Future Improvements

• Drag-and-drop Kanban board
• Real-time updates
• Notifications
• Role-based access
• Dark mode
• Task labels/tags

---

Author

Developed as a full-stack engineering practical assessment project using:

• Next.js
• .NET
• PostgreSQL
• TypeScript