This is the frontend for the Task Manager application, built with Next.js 15, React 19, and the App Router. It serves as the user interface for managing tasks, supporting full CRUD functionality, filters, sorting, and user authentication via JWT (access and refresh tokens).
- App Router with SSR/SSG and dynamic routing
- JWT Authentication with refresh tokens (via
next-auth) - React Query for server state and data caching
- Tailwind CSS for styling
- Date handling with
date-fns - Form management using
react-hook-form+zod - Debounced search using
use-debounce - UI components powered by
@headlessui/reactand@heroicons/react
| Category | Tech / Library |
|---|---|
| Framework | Next.js 15 (App Router) |
| Auth | next-auth with JWT & Refresh Token |
| State Mgmt | React Query (@tanstack/react-query) |
| Forms | react-hook-form + zod |
| Styling | Tailwind CSS 4 |
| HTTP Client | Axios |
| UI Components | Headless UI, Heroicons |
| Utilities | date-fns, use-debounce |
This app uses JWT-based authentication with refresh token rotation via next-auth. Tokens are stored in HTTP-only cookies. Protected routes will redirect unauthenticated users to the login page.
⚠️ Backend API exposes/auth/login,/auth/refresh, and/auth/meendpoints for full compatibility.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devDevelopment
docker-compose -f docker-compose.dev.yml up --buildProduction
docker-compose -f docker-compose.yml up --buildOpen http://localhost:4000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.