Task Tracker Frontend

A React-based task management application with authentication, dashboard, and task CRUD operations.

Features

Part 1 – Authentication Screens

• ✅ Register page with form validation
• ✅ Login page with form validation
• ✅ Error message display
• ✅ JWT token storage after login
• ✅ Redirect after successful login

Part 2 – Dashboard

• ✅ Display logged in user info
• ✅ List of tasks
• ✅ Admin dashboard shows all users and all tasks

Part 3 – Task Management UI

• ✅ Create task
• ✅ View tasks
• ✅ Edit task -Fields ✅ Delete task

:

• ✅ Title
• ✅ Description
• ✅ Status (pending/completed)

Rules:

• ✅ Normal users see only their tasks
• ✅ Admin sees all tasks

Part 4 – Backend Integration

• ✅ JWT for protected routes
• ✅ Handle API errors properly
• ✅ Show loading states
• ✅ Logout functionality

Part 5 – UI / UX

• ✅ Clean design
• ✅ Simple interface
• ✅ Responsive layout
• ✅ Proper spacing
• ✅ Consistent colors
• ✅ Mobile friendly layout

Part 6 – Validation & Errors

• ✅ Client side form validation
• ✅ Required field messages
• ✅ API error display
• ✅ Empty state handling

Part 7 – Testing

• ✅ Minimum 2 component tests (Login, TaskCard)
• ✅ Minimum 1 integration/API test

Security Requirements

• ✅ JWT stored in localStorage
• ✅ Protected routes
• ✅ No secrets in frontend
• ✅ Environment variables for API URL

Project Structure

task-tracker-frontend/
├── src/
│   ├── api/
│   │   ├── api.js          # Axios API client
│   │   └── mock.js         # Mock API for development
│   ├── components/
│   │   ├── Navbar.js       # Navigation component
│   │   ├── ProtectedRoute.js # Route protection
│   │   └── TaskCard.js     # Task display component
│   ├── pages/
│   │   ├── Dashboard.js   # Main dashboard
│   │   ├── LoginPage.js   # Login form
│   │   └── RegisterPage.js # Registration form
│   ├── services/
│   │   ├── authService.js
│   │   └── taskService.js
│   ├── utils/
│   │   └── auth.js
│   ├── App.js             # Main app with routing
│   ├── index.js           # Entry point
│   └── index.css          # Global styles
├── tests/
│   ├── api.test.js        # API integration tests
│   ├── Login.test.js      # Login component tests
│   └── TaskCard.test.js   # TaskCard component tests
├── .env                   # Environment variables
├── .env.example           # Example env file
├── package.json
└── README.md

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd task-tracker-frontend

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env

4. Start the development server:

npm start

The app will open at http://localhost:3000

Running Tests

Run all tests:

npm test

Run specific test file:

npm test -- Login.test.js
npm test -- TaskCard.test.js
npm test -- api.test.js

Building for Production

npm run build

Demo Accounts

The application includes mock data with the following demo accounts:

Role	Email	Password
Admin	admin@example.com	admin123
User	user@example.com	user123

API Configuration

The app uses environment variables for API configuration:

REACT_APP_API_URL=http://localhost:5000/api

For development, the mock API is enabled by default.

Available Scripts

• npm start - Start development server
• npm test - Run tests
• npm run build - Build for production
• npm run eject - Eject from Create React App

Technology Stack

• React 19
• React Router 7
• Axios
• Jest & React Testing Library
• Tailwind CSS (via CDN or custom styles)

License

MIT