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.
- 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.
- 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.
git clone https://github.com/amanhaidry/todoapp.git
cd todoappnpm install
# or
yarn installCreate 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.
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.
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 webapp/- 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.
| Variable | Description |
|---|---|
| EXPO_PUBLIC_CONVEX_URL | Your Convex deployment URL |
- 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 devto run Convex locally and generate types.
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...