Todo App

Screenshots

Mobile Light	Mobile Dark
Desktop Light	Desktop Dark
Active States Light	Active States Dark

🚀 Run Project

pnpm install
pnpm dev

Build and preview the production version:

pnpm build
pnpm preview

🔧 Technologies Used

📖 Project Information

This is a solution for the Frontend Mentor Todo App challenge. The goal is to build a responsive todo application with task management, filtering, theme switching, local persistence, and PWA support.

The app includes:

• Create new todos
• Delete individual todos
• Mark todos as completed or active
• Filter todos by All, Active, and Completed
• Clear all completed todos
• Active todo counter
• Light and dark themes
• Theme persistence with localStorage
• Todo persistence with localStorage
• PWA manifest and service worker configuration through Vite
• Responsive layout for mobile and desktop
• Modern CSS with custom properties, logical properties, clamp(), and native CSS nesting

🏗️ Architecture

src/
  App.vue
  main.ts

  components/
    Header/
    TodoInput/
    TodoList/
    Footer/

  composables/
    useTheme.ts
    useTodos.ts

  types/
    todo.ts

  assets/
    styles/
      variables.css
      global.css
      main.css

The project keeps UI and logic separated:

• App.vue coordinates the page and connects events to composables.
• useTodos.ts owns todo state, filtering, CRUD actions, and todo persistence.
• useTheme.ts owns theme state, theme persistence, and data-theme updates.
• Components receive props and emit events instead of mutating global state directly.

The main flow is:

TodoInput emits create
  App.vue calls createTodo from useTodos
    useTodos updates todos and localStorage

TodoList emits toggle/delete/filter/clearCompleted
  App.vue calls the matching useTodos function
    computed values update the rendered list

Header emits toggleTheme
  App.vue calls toggleTheme from useTheme
    useTheme updates data-theme and localStorage

📝 Semantic Structure

The UI is structured around meaningful HTML:

• main.app wraps the application.
• header.header contains the title and theme toggle.
• section.app__content groups the todo experience.
• form.todo-input handles task creation.
• section.todo-list identifies the todo list region.
• ul and li represent the list of tasks.
• footer.todo-list__actions groups counter, filters, and clear action.
• Buttons include accessible labels for icon-only actions.

More notes are available in What We Learned.

📱 PWA

The project uses vite-plugin-pwa to generate the app manifest and service worker.

PWA assets live in public/:

public/
  favicon-32x32.png
  icon-192x192.png
  icon-512x512.png
  robots.txt

To inspect the PWA behavior, run a production preview:

pnpm build
pnpm preview

Then open Chrome DevTools and check:

• Application > Manifest
• Application > Service Workers
• Lighthouse > PWA

🔗 Useful Links

• Frontend Mentor Challenge
• Vite PWA Documentation
• Vue Documentation
• Vite Documentation

💡 Author

Lipeh Fama

Frontend Mentor Profile

GitHub