NativeApp - React Native Todo App

NativeApp is a modern, cross-platform Todo application built with React Native and Expo. It features a beautiful UI, dark mode, persistent storage, and real-time sync using Convex as the backend database. The app is designed for productivity and ease of use, supporting both mobile and web platforms.

✨ Features

• Add, Edit, Delete Todos: Manage your daily tasks with ease.
• Mark as Completed: Toggle todos as completed or active.
• Progress Stats: Visualize your productivity with real-time stats.
• Dark Mode: Seamless light/dark theme switching.
• Auto Sync: Real-time updates across devices using Convex.
• Reset App: Danger zone to clear all todos.
• Persistent Storage: User preferences (like dark mode) are saved locally.
• Responsive UI: Works on iOS, Android, and Web.

🛠️ Tech Stack

• React Native: Core framework for building native apps.
• Expo: Toolchain for rapid React Native development.
• Expo Router: File-based routing for navigation.
• Convex: Serverless backend for real-time data and mutations.
• TypeScript: Type safety across the codebase.
• AsyncStorage: Local storage for user preferences.
• Expo Linear Gradient: Beautiful gradients in UI.
• React Native Vector Icons: Iconography.
• Other Expo Modules: For splash screen, fonts, system UI, etc.

📸 Screenshot

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/amanhaidry/todoapp.git
cd todoapp

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

Create a .env.local file in the root directory and add your Convex deployment URL:

EXPO_PUBLIC_CONVEX_URL=https://<your-convex-deployment>.convex.cloud

Note: You can find your Convex deployment URL in the Convex dashboard after setting up your project.

4. Set Up Convex Database

Initialize Convex in the /convex directory:

npx convex dev

• This will start the Convex dev server and generate necessary files.
• Make sure your schema is defined in convex/schema.ts.
• Functions for todos are in convex/todos.ts.

5. Run the App Locally

Start the Expo development server:

npm start
# or
yarn start

• Use the Expo Go app on your device, or run on an emulator/simulator.
• For web, run:

npm run web

⚙️ Project Structure

• app/ - Main app screens and navigation.
• components/ - Reusable UI components.
• assets/ - Images, fonts, and styles.
• convex/ - Convex backend functions and schema.
• hooks/ - Custom React hooks.
• screenshot/ - App screenshots.

📝 Environment Variables

🗄️ Database Setup

• All database logic is handled by Convex.
• Schema is defined in convex/schema.ts.
• Functions (queries/mutations) are in convex/todos.ts.
• Use npx convex dev to run Convex locally and generate types.

📚 Useful Scripts

• npm start - Start Expo dev server.
• npm run android / npm run ios - Run on Android/iOS.
• npm run web - Run on web.
• npm run lint - Lint the codebase.

Happy Coding...