A modern React task tracker designed as a private studio ledger, featuring inline editing, filtering, progress tracking, and a distinctive editorial interface.
Project Ledger is a task management application built with React and Tailwind CSS.
Instead of following the typical SaaS dashboard aesthetic, the project uses an editorial-inspired "atelier ledger" visual language with an ivory paper panel, brass accents, serif typography, and stamped priority indicators.
The application focuses on clean component architecture, reusable UI elements, state-driven interactions, and purposeful motion.
- Add new tasks
- Edit task names inline
- Edit start and end dates
- Change project, phase, and status
- Change task priority
- Search tasks by name
- Filter tasks by project
- Filter tasks by status
- Delete tasks with exit animation
- Live progress tracking
- Task statistics based on current state
- Responsive layout
- Animated page-load sequence
- Interactive UI elements
| Technology | Purpose |
|---|---|
| React 19 | UI development |
| Vite | Development and build tooling |
| Tailwind CSS v4 | Styling and responsive design |
| Framer Motion | Animations and transitions |
| Lucide React | Icons |
| Fraunces | Display typography |
| Sora | Interface typography |
| IBM Plex Mono | Dates and numerical data |
src/
├── components/
│ ├── Header.jsx
│ ├── StatsBar.jsx
│ ├── FilterBar.jsx
│ ├── TaskTable.jsx
│ ├── LedgerTag.jsx
│ └── SealBadge.jsx
│
├── data/
│ └── tasks.js
│
├── utils/
│ └── colors.js
│
└── App.jsx
- Header — project title, eyebrow text, and visual branding
- StatsBar — displays task progress and status statistics
- FilterBar — search, filtering, and new-task actions
- TaskTable — main task ledger with editable rows
- LedgerTag — reusable project, phase, and status selector
- SealBadge — priority indicator inspired by a stamped wax seal
- tasks.js — initial task data and available options
- colors.js — centralized Tailwind class mapping
- App.jsx — application state, filtering logic, and layout composition
The progress indicator is calculated directly from the current task state rather than being stored separately.
This keeps the progress data synchronized with task changes and avoids maintaining multiple sources of truth.
Task names and dates can be edited directly inside the task table.
Dates use the native date input while displaying formatted values in the interface.
The interface is divided into focused components such as:
LedgerTagSealBadgeStatsBarFilterBarTaskTable
This keeps the main application logic centralized while allowing individual UI elements to remain reusable and maintainable.
A centralized color mapping is used in utils/colors.js.
Keeping the Tailwind classes static prevents production CSS purging from removing dynamically selected classes.
The project follows a custom visual system inspired by a traditional studio ledger.
- Near-black charcoal canvas
- Ivory paper-style content panel
- Brass as the primary accent
- Editorial serif typography
- Monospace dates and numerical information
- Hairline borders and dividers
- Minimal decorative elements
- Fraunces — display headings
- Sora — interface text
- IBM Plex Mono — dates, numbers, and ledger data
The SealBadge component represents task priority as a small stamped circle rather than a conventional colored badge.
This creates a consistent visual identity across the application.
Animations are intentionally limited to meaningful interactions.
Implemented animations include:
- Page-load reveal sequence
- Animated progress meter
- Task row exit animation
- Subtle UI transitions
The project avoids unnecessary decorative motion to keep the interface focused.
Make sure you have the following installed:
- Node.js
- npm
Clone the repository:
git clone https://github.com/yektaakhavan/Project-Task-Tracker.git
cd Project-Task-TrackerInstall dependencies:
npm installStart the development server:
npm run devThe application will be available at:
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Create a production build |
This project was built to practice and demonstrate:
- React component architecture
- State management
- Reusable UI components
- Tailwind CSS v4
- Interactive data tables
- Filtering and search
- Framer Motion animations
- Design system implementation
- Clean and maintainable frontend structure
Yekta Akhavan
Frontend Developer focused on building responsive and maintainable web applications with React, JavaScript, TypeScript, and modern frontend tools.