Task and Time Tracking App
A full-stack productivity application built with SvelteKit that allows users to manage tasks, track time with a real-time timer, and view daily productivity summaries.
✨ Features
- Secure Authentication: Sign up, log in, and log out with session-based cookies
- Task Management: Create, edit, update status (
Pending,In Progress,Completed), and delete tasks - Real-Time Timer: Start/stop time tracking with live elapsed time display
- Daily Summary: View today's tracked time, completed tasks, in-progress tasks, and pending tasks
- Mock In-Memory Database: All data stored in-memory during development session
- Beautiful UI: Modern, responsive design with gradients, glassmorphism, and smooth animations
- RESTful API: Clean backend API with proper authorization and validation
📁 Folder Structure
task-tracker-app/ ├── src/ │ ├── routes/ │ │ ├── api/ │ │ │ ├── auth/ │ │ │ │ ├── login/+server.ts │ │ │ │ ├── logout/+server.ts │ │ │ │ └── signup/+server.ts │ │ │ ├── tasks/ │ │ │ │ ├── +server.ts │ │ │ │ └── [id]/ │ │ │ │ └── +server.ts │ │ │ └── time-logs/ │ │ │ ├── +server.ts │ │ │ └── [id]/ │ │ │ └── +server.ts │ │ ├── dashboard/ │ │ │ └── +page.svelte │ │ ├── login/ │ │ │ └── +page.svelte │ │ ├── signup/ │ │ │ └── +page.svelte │ │ └── +page.svelte │ ├── lib/ │ │ ├── mockdb.ts │ │ ├── auth.ts │ │ └── stores.ts │ └── app.html ├── static/ ├── package.json ├── svelte.config.js ├── vite.config.ts └── README.md 🚀 Tech Stack
- Frontend: SvelteKit, Tailwind CSS
- Backend: SvelteKit Server Routes (mock in-memory database)
- Authentication: Session-based cookies with in-memory session store
- Styling: Tailwind CSS with custom gradients and animations
- Deployment: Vercel (static site with serverless functions)
🌐 Live Demo
🛠️ Local Development
Prerequisites
- Node.js (v18 or higher)
- npm or pnpm
Installation
# Clone the repository
git clone https://github.com/your-username/task-tracker-app.git
cd task-tracker-app
# Install dependencies
npm install
# Start development server
npm run dev
The application runs on `http://localhost:5173` by default.
🧪 Test Credentials
-------------------
For quick testing, use these credentials:
- Email: `[email protected]`
- Password: `password123`
> Note: Since this uses an in-memory database, all data resets when the server restarts. This is acceptable for demonstration purposes.
🔒 Authentication Flow
----------------------
1. Signup: Users can create an account with email and password
2. Login: Users authenticate with credentials and receive a session cookie
3. Session Management: All protected routes validate the session cookie
4. Logout: Session is destroyed and user is redirected to login page
All authentication is handled server-side with proper validation and error handling.
📊 Task & Time Tracking
-----------------------
### Task Management
- Create tasks with title and description
- Update task status between three states:
- `Pending` (default state)
- `In Progress` (when timer is active)
- `Completed` (when task is finished)
- Delete tasks (removes associated time logs)
### Time Tracking
- Start Timer: Begins tracking time for a task and sets status to "In Progress"
- Stop Timer: Saves time log to database and automatically marks task as "Completed"
- Real-time Display: Timer updates every second with live elapsed time
- Persistence: Time logs are stored and displayed in daily summaries
### Daily Summary
The dashboard displays real-time metrics:
- Today's Time: Total time tracked today (including active timer)
- Completed Today: Number of tasks completed today
- In Progress: Tasks currently being worked on
- Pending: Tasks waiting to be started
All metrics update automatically when tasks or time logs change.
🗄️ Mock Database Implementation
--------------------------------
The application uses a mock in-memory database stored in `src/lib/mockdb.ts`:
ts
export const db = {
users: [...],
tasks: [...],
timeLogs: [...],
sessions: {}
};
This approach:
- ✅ Eliminates need for external database setup
- ✅ Keeps the assignment self-contained
- ✅ Demonstrates full CRUD functionality
- ⚠️ Note: Data resets when server restarts (expected behavior for demo)
🎨 UI/UX Design
---------------
The application features a modern, professional design with:
- Gradient Headers: Beautiful color transitions for visual appeal
- Glassmorphism Cards: Semi-transparent backgrounds with blur effect
- Status Indicators: Color-coded dots and badges for task status
- Responsive Layout: Works on mobile, tablet, and desktop
- Interactive Elements: Hover effects, smooth transitions, and feedback
- Real-time Updates: All data updates instantly without page refresh
🧪 API Endpoints
----------------
### Authentication
- `POST /api/auth/signup` - Create new user account
- `POST /api/auth/login` - Authenticate user and create session
- `POST /api/auth/logout` - Destroy user session
### Tasks
- `GET /api/tasks` - Get all user tasks
- `POST /api/tasks` - Create new task
- `PATCH /api/tasks/:id` - Update task status
- `DELETE /api/tasks/:id` - Delete task and associated time logs
### Time Logs
- `GET /api/time-logs` - Get all user time logs
- `POST /api/time-logs` - Create new time log entry
All endpoints include:
- ✅ User authorization checks
- ✅ Input validation
- ✅ Proper HTTP status codes
- ✅ Error handling
🚀 Deployment
-------------
Deployed on Vercel with the following configuration:
- Build Command: `npm run build`
- Publish Directory: `build/`
- Environment: Production-ready SvelteKit app
The application is fully functional in production with the same mock database behavior.
🤝 Contributing
---------------
This is a solo assignment project. No external contributions are expected.
📄 License
----------
This project is for educational and demonstration purposes only.
* * * * *
Built with ❤️ using SvelteKit
