A lightweight, mini project manager built with React and Tailwind CSS. Add projects, jot down tasks, and keep track of what matters—fast.
Live demo: 👉 https://lite-tasks.netlify.app
- 🧭 Simple Project Flow — Add projects with title, description, and date.
- 📌 Sidebar Overview — Dynamic sidebar shows project count and a clickable list.
- 🗒️ Per‑Project Tasks — View project details and add/delete tasks inline.
- 🧹 Clean Deletes — Remove individual tasks or the entire project.
- 📱 Fully Responsive — Optimized for phones, tablets, and desktops.
- ⚡ Vite + React 19 — Modern tooling for instant feedback and fast builds.
Sometimes you just want a tiny workspace: a place to capture a project and sprinkle in a few tasks—no logins, no dashboards, no setup. liteTask gives you that: a focused, delightful micro‑PM experience that lets you move on with your day. 🙌
- React 19 + Vite 7
- Tailwind CSS 4
Package name:
lite-tasks
- Home — Intro / call‑to‑action to start a project
- Add Project — Form with Title, Description, Date (validated in UI)
- Sidebar — Shows total projects and a clickable list
- Project Details — View project info, delete project and add/delete tasks
- Node.js 18+
- npm, pnpm, or yarn
# 1) Clone the repo
git clone https://github.com/Md-Asifullah/light-tasks.git
cd lite-tasks
# 2) Install dependencies
npm install
# 3) Start the dev server
npm run dev
# open the shown local URL (e.g., http://localhost:5173/)npm run dev # Start Vite dev server
npm run build # Production build
npm run preview # Preview local production build
npm run lint # Lint the codebase- Add a Project — Provide a title, description, and date.
- See it in the Sidebar — The project appears with the total count updated.
- Open Project Details — Click a project to view its name, description, and date.
- Add Tasks — Quickly add tasks per project.
- Delete as Needed — Remove tasks individually or delete the project entirely.
All state lives in memory (no server), so it’s fast and ephemeral—perfect for demos, quick planning, or prototyping.
Home Page:
Add Project Page:
Project Details Page:
Any static host will do (Netlify, Vercel, GitHub Pages, etc.).
Local production preview:
npm run build
npm run preview- Build command:
npm run build - Publish directory:
dist
- Framework preset: Vite
- Build command:
npm run build - Output directory:
dist
- Use stable IDs for tasks/projects via
crypto.randomUUID()(already inApp.jsx) to keep UI updates predictable. - Keep component state minimal—
App.jsxholds the source of truth and passes props down to children for simple orchestration.
Made with ❤️ by Md Asifullah — Front-End Developer & Software Engineer.
Portfolio: https://www.artisanasif.com/
This project is for learning and portfolio purposes.
Feel free to fork, explore, and experiment.
Heads-up: This is a prototype with no backend persistence—data lives only in memory during a session.