TodoApp

A modern, cross-platform todo application built with React Native and Expo. Features a clean interface with dark/light theme support, drag-and-drop reordering, and filtering capabilities.

Features

• ✅ Add, toggle, and delete todos
• 🌓 Dark and light theme support
• 🔄 Drag and drop to reorder items
• 🔍 Filter todos (All, Active, Completed)
• 🧹 Clear all completed todos
• 📱 Cross-platform (iOS, Android, Web)
• ⚡ Real-time sync with Convex backend
• 🔄 CRUD operations powered by Convex

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo CLI (installed globally or via npx)

Installation

1. Clone the repository:

git clone <https://github.com/dev-star23/ToDo.git>
cd TodoApp

2. Install dependencies:

npm install

3. Set up Convex:

   • Create a Convex account at convex.dev if you haven't already
   • Run npx convex dev to initialize your Convex project and generate the API files
   • This will create a .env.local file with your CONVEX_URL
   • For Expo, you'll need to set EXPO_PUBLIC_CONVEX_URL in your environment or .env.local file

4. Configure environment variables:

   • Create a .env.local file (if not already created by Convex):

   EXPO_PUBLIC_CONVEX_URL=your_convex_url_here

Usage

Before running the app, make sure Convex is running:

npx convex dev

Then in another terminal, start the Expo development server:

npm start

Then choose your platform:

• Press i for iOS simulator
• Press a for Android emulator
• Press w for web browser

Or use the specific scripts:

npm run ios      # Start iOS simulator
npm run android  # Start Android emulator
npm run web      # Start web browser

Tech Stack

• React Native
• Expo
• TypeScript
• Convex - Real-time backend and database
• React Native Gesture Handler
• React Native Reanimated

Project Structure

TodoApp/
├── components/      # Reusable UI components
├── theme/          # Theme context and configuration
├── types/          # TypeScript type definitions
├── assets/         # Images and icons
├── convex/         # Convex backend functions and schema
│   ├── schema.ts   # Database schema definition
│   ├── todos.ts    # CRUD operations for todos
│   └── _generated/ # Auto-generated Convex API files
└── App.tsx         # Main application component