Frontend
Task Manager — Next.js Application
A full-stack task management application built with Next.js, React, and TypeScript. The frontend provides a modern, responsive interface for user authentication and task management, communicating with a backend API hosted on AWS.
Overview
A full-stack task management application built with Next.js, React, and TypeScript. The frontend provides a modern, responsive interface for user authentication and task management, communicating with a backend API hosted on AWS.
Tech Stack
| Category | Technology |
|---|---|
| Framework | Next.js (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| HTTP Client | Axios |
| Icons | Lucide React |
| React Compiler | babel-plugin-react-compiler |
Project Structure
Root: frontend/src/
@types/TypeScript type definitions — constants (TaskStatus) and interfaces (auth, tasks)
app/Next.js App Router pages — login, signup, user dashboard, API proxy routes
components/React components — dashboard, landing page, layout, login, signup
config/axios.tsAxios instance and helper configuration
context/AuthContext.tsxGlobal authentication context provider
hooks/Custom hooks — useAuth, useTasks for data fetching
utils/api/API service functions — auth.ts and tasksApi.ts
Authentication Flow
User Registration
/signupUser submits username, email, and password. API call to /api/auth/register. On success, redirects to login page.
User Login
/loginUser submits email and password. JWT token stored in localStorage. User data fetched and stored in AuthContext. Redirects to /user dashboard.
Protected Routes
/userAuthContext checks for token on mount. Fetches user data if token exists. Redirects to login if unauthenticated. Provides logout() function to clear session.
State Management
AuthContext (Global)
Global authentication state managed via React Context
| Name | Type | Description |
|---|---|---|
userData | UserData | User profile and task statistics |
authenticated | boolean | Boolean authentication status |
loading | boolean | Loading state during auth check |
logout() | function | Clears session |
fetchUser() | function | Refreshes user data |
Local Component State
Task lists managed with useTasks hook. Form states with useState. Modal visibility controlled locally.
Data Models
UserDataUser profile with task statistics| Field | Type |
|---|---|
data.task_data.completed_tasks | number |
data.task_data.pending_tasks | number |
data.task_data.ongoing_tasks | number |
data.task_data.tasks_count | number |
data.user_data.id | string |
data.user_data.username | string |
data.user_data.email | string |
ITaskIndividual task object| Field | Type |
|---|---|
task_id | string |
title | string |
description | string |
status | "pending" | "ongoing" | "complete" |
created_at | string |
API Endpoints
Base URL: https://6ft4bgs2e6.execute-api.ap-south-1.amazonaws.com/api/v1
Authorization: Bearer token in Authorization header
/api/auth/registerPUBLICCreate new user/api/auth/loginPUBLICAuthenticate user, returns JWT/api/auth/userAUTHGet current user data/api/tasks/createtaskAUTHCreate new task/api/tasks/showtaskAUTHFetch all user tasks/api/tasks/updatetask/:task_idAUTHUpdate task status/api/tasks/deletetask/:task_idAUTHDelete taskComponent Reference
Wraps entire app. Manages session, token validation, logout, auto-fetches user data on mount.
Email/password form with visibility toggle, validation, error states, loading states, glassmorphism design.
Username/email/password registration form with validation, error handling, success redirect.
Main dashboard with user profile header, task statistics sidebar, task list, logout button, protected route logic.
Task list display, add button, status dropdown per task, delete functionality, empty state UI, modal integration.
Title input (required), description textarea (optional), form validation, submit/cancel, loading state.
Scripts & Setup
NPM Scripts
npm run dev | Start development server on localhost:3000 |
npm run build | Build for production |
npm start | Start production server |