Taskly - Task Management Application

Overview

Taskly is a full-stack task management application built for the Frontend Developer Intern assessment at Bajarangs (with PrimeTrade AI). This project demonstrates modern web development practices with a React/Next.js frontend and Node.js/Express backend, featuring JWT authentication and comprehensive CRUD operations.

Tech Stack

Frontend (Primary Focus)

• Framework: Next.js 15.5.4 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: Zustand
• Form Handling: React Hook Form with Zod validation
• UI Components: Radix UI primitives
• HTTP Client: Axios
• Notifications: React Hot Toast
• Data Tables: TanStack Table

Backend (Supportive)

• Runtime: Node.js with ES Modules
• Framework: Express.js
• Language: TypeScript
• Database: PostgreSQL with Drizzle ORM
• Authentication: JWT (JSON Web Tokens)
• Security: bcryptjs for password hashing, Helmet, CORS
• Rate Limiting: express-rate-limit
• Validation: Zod schemas

Features Implemented

Authentication System

• User Registration: Email/password signup with validation
• User Login: JWT-based authentication
• Protected Routes: Middleware-based route protection
• Token Management: Automatic token injection via Axios interceptors
• User Profile: Fetch and display user information

Task Management

• Create Tasks: Add new tasks with title and description
• Read Tasks: View tasks in a sortable data table
• Update Tasks: Edit existing task details
• Delete Tasks: Remove tasks with confirmation dialog
• Task Status: Track task status (pending, in_progress, completed)
• Task Metadata: Creation timestamps and status badges

Dashboard Features

• Modern UI: Clean, responsive design with Tailwind CSS
• Data Tables: Advanced table component with sorting and filtering
• Interactive Components: Dropdown menus, dialogs, and forms
• User Experience: Loading states, error handling, toast notifications
• Protected Dashboard: Authentication-gated main application area

Security & Best Practices

• Password Security: bcryptjs hashing for user passwords
• JWT Authentication: Secure token-based authentication
• Input Validation: Client and server-side validation with Zod
• CORS Configuration: Proper cross-origin resource sharing
• Security Headers: Helmet middleware for security headers
• Rate Limiting: API endpoint protection
• Type Safety: Full TypeScript implementation

Database Schema

Users Table

- id: UUID (Primary Key)
- email: String (Unique)
- password_hash: String
- name: String
- created_at: Timestamp
- updated_at: Timestamp

Tasks Table

- id: UUID (Primary Key)
- user_id: UUID (Foreign Key)
- title: String
- description: Text
- status: Enum (pending, in_progress, completed)
- created_at: Timestamp
- updated_at: Timestamp

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user profile

Tasks

• GET /api/tasks - Get user tasks (with pagination/filtering)
• POST /api/tasks - Create new task
• PUT /api/tasks/:id - Update existing task
• DELETE /api/tasks/:id - Delete task

Getting Started

Prerequisites

• Node.js (v18+)
• PostgreSQL (v12+)
• Docker & Docker Compose (for database)

Installation

1. Clone the repository

   git clone <repository-url>
   cd taskly-assignment

2. Install frontend dependencies

   cd client
   npm install

3. Install backend dependencies

   cd ../server
   npm install

4. Set up environment variables

   # In server/.env
   DATABASE_URL="postgresql://username:password@localhost:5432/taskly"
   JWT_SECRET="your-jwt-secret-key"
   PORT=3001

5. Start the database

   cd server
   npm run docker:up

6. Run database migrations

   npm run db:push

Development

1. Start the backend server

   cd server
   npm run dev

   Backend will run on http://localhost:3001

2. Start the frontend development server

   cd client
   npm run dev

   Frontend will run on http://localhost:3000

Usage

1. Register a new account at /register
2. Login with your credentials at /login
3. Access the dashboard at /dashboard (protected route)
4. Manage tasks - create, read, update, and delete tasks
5. View your profile information in the dashboard

Production Considerations

Frontend Scaling

• Code Splitting: Next.js automatic route-based splitting
• State Management: Zustand for scalable state handling
• Caching: React Query integration potential
• Performance: Next.js production optimizations
• CDN: Static asset optimization

Backend Scaling

• Database: Connection pooling, query optimization
• Caching: Redis integration for session/data caching
• API: Rate limiting, request validation
• Security: Enhanced CORS, input sanitization
• Deployment: Docker containerization ready

Security Enhancements

• Monitoring: Logging and error tracking
• Authentication: Refresh token implementation

Evaluation Criteria Met

• UI/UX Quality: Modern, responsive Tailwind CSS design with interactive components

• Frontend-Backend Integration: RESTful APIs with proper error handling and type safety

• Security Practices: JWT authentication, bcrypt password hashing, input validation

• Code Quality: TypeScript throughout, modular architecture, comprehensive validation

• Scalability Potential: Clean separation of concerns, production-ready patterns

Future Enhancements

• Advanced Filtering: Task search and category filtering
• Real-time Updates: WebSocket integration for live task updates
• File Attachments: Support for task attachments
• Team Collaboration: Multi-user task sharing
• Mobile App: React Native implementation
• Analytics: Task completion analytics and reporting