React Native Todo App (with Convex Backend)

A beautiful, real-time Todo application built with React Native (Expo) and Convex for backend storage.
It supports light/dark themes, real-time sync, drag-and-drop reordering, and task filtering — all wrapped in a clean, elegant UI.

Features

• Add, update, and delete todos in real time
• Reorder todos with drag-and-drop
• Light / dark theme toggle
• Filter by All, Active, or Completed tasks
• Persistent backend powered by Convex
• Beautiful design using Josefin Sans and modern spacing tokens
• Instant feedback & live UI updates

Usage Summary

• Tap the circle in the input field or press Enter to add a new task.
• Double-Tap a list item to edit and update.
• Press and Hold a list item to Drag.
• Tap a task’s circle to mark it completed.
• Tap the X icon to delete a task.
• Use the footer filters (All / Active / Completed) to view specific lists.
• Click “Clear Completed” to remove all finished tasks.

Tech Stack & Technology

• Frontend - React Native (Expo)
• Backend Convex (Serverless Realtime DB)
• State / Data - Convex Hooks (useQuery, useMutation)
• Styling React Native Stylesheets + Theming Context
• Fonts Expo Google Fonts (Josefin Sans)
• Icons Expo Vector Icons (Ionicons)

Folder structure

project-root/ │ ├── src/ │ ├── components/ │ │ ├── AddTodoInput.tsx │ │ ├── FooterFilters.tsx │ │ ├── Header.tsx │ │ ├── TodoItem.tsx │ │ └── TodoList.tsx │ │ │ ├── contexts/ │ │ ├── ThemeContext.tsx │ │ └── FilterContext.tsx │ │ │ ├── hooks/ │ │ └── useTodos.ts │ │ │ ├── screens/ │ │ └── HomeScreen.tsx │ │ │ ├── styles/ │ │ └── theme.ts │ │ │ ├── utils/ │ │ └── convexClient.ts │ │ │ └── App.tsx │ ├── convex/ │ ├── todos.ts # Convex backend logic │ └── schema.ts # Convex schema definition │ ├── .env # Environment variables ├── package.json ├── tsconfig.json ├── README.md └── node_modules/