Frontend for the Task Management Application built with React and Vite.
This application connects to a Node.js + Express backend and provides:
- User authentication
- Task creation and management
- Role-based UI
- Protected routes
- React
- Vite
- React Router
- Axios
- Tailwind CSS
- lucide-react (icons)
- Jest + React Testing Library
cd frontend
Install dependencies
npm install
3️ Start development server
npm run dev
App runs at:
http://localhost:5173
Backend Connection
Make sure backend is running at:
http://localhost:5000
If needed, update API base URL in:
src/services/api.js
Example:
const API_URL = "http://localhost:5000";
Authentication Flow
User logs in
Backend returns JWT token
Token is stored in localStorage
Token is sent in Authorization header for protected requests
Example header:
Authorization: Bearer <token>
Protected routes use AuthContext and ProtectedRoute components.
## Running Tests
npm test
Tests include:
TaskCard component
TaskModal component
API service integration
## Important Notes
Task status values must be uppercase:
PENDING
COMPLETED
Token must exist in localStorage to access protected routes.
Ensure backend JWT_SECRET is configured correctly.
##UI Features
Responsive layout
Sidebar navigation
Modal-based task creation/editing
Status toggle with visual indicators
Role-based UI (Admin view)
Production Build
To build for production:
npm run build
Preview build:
npm run preview Author
Your Debasmita Bhowmick
---