Todo App with Persistence

A feature-rich todo application built with Expo and React Native, featuring local data persistence using SQLite and state management with Zustand.

Features

• ✅ Create, read, update, and delete todos
• 📋 Organize todos into lists
• 💾 Local data persistence with SQLite
• 🔄 Real-time state management with Zustand
• 📱 Cross-platform support (iOS, Android, Web)
• 🎨 Clean and intuitive user interface
• 🔧 Type-safe implementation with TypeScript
• ⚡ Optimized performance with efficient database operations

Tech Stack

• Frontend: React Native with Expo
• Navigation: Expo Router (file-based routing)
• State Management: Zustand
• Database: SQLite (expo-sqlite)
• Language: TypeScript
• UI Components: Custom components with Expo styling

Project Structure

todo-with-persistence/
├── app/                    # Screens and navigation
│   ├── _layout.tsx        # Root layout
│   ├── index.tsx          # Home screen
│   ├── lists.tsx          # Lists management
│   └── todos.tsx          # Todo management
├── components/            # Reusable UI components
│   ├── Button.tsx
│   ├── Input.tsx
│   ├── LoadingSpinner.tsx
│   └── Modal.tsx
├── lib/                   # Business logic and services
│   ├── database/         # Database setup and schema
│   ├── services/         # CRUD operations
│   ├── store/            # Zustand stores
│   ├── types/            # TypeScript types
│   └── utils/            # Utility functions
└── hooks/                 # Custom React hooks

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI (npm install -g expo-cli)

Installation

1. Clone the repository

   git clone <repository-url>
   cd todo-with-persistence

2. Install dependencies

   npm install

Running the App

1. Start the development server

   npm start

2. Choose your platform:

   • Press a to open in Android emulator
   • Press i to open in iOS simulator
   • Press w to open in web browser
   • Scan the QR code with Expo Go app on your device

Building for Production

• Android: npm run android
• iOS: npm run ios
• Web: npm run web

Architecture Overview

The app follows a layered architecture with clear separation of concerns:

1. Presentation Layer: React components and screens in the app/ directory
2. Business Logic Layer: Services and utilities in the lib/ directory
3. Data Layer: SQLite database with schema definitions

Key Components

• Database: SQLite for local persistence with proper schema and migrations
• State Management: Zustand stores for managing application state
• Services: Business logic for CRUD operations on todos and lists
• Validation: Input validation to ensure data integrity
• Error Handling: Comprehensive error handling for graceful failures

Usage Examples

Creating a Todo

import { todoService } from "@/lib/services";

const newTodo = await todoService.createTodo({
  title: "Buy groceries",
  listId: "default",
  isCompleted: false,
});

Managing Lists

import { listService } from "@/lib/services";

const newList = await listService.createList({
  name: "Work Tasks",
  isDefault: false,
});

Using State in Components

import { useTodoStore, useListStore } from "@/lib/store";

function TodoComponent() {
  const { todos, loading, error } = useTodoStore();
  const { currentList } = useListStore();

  // Component logic here
}

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Expo for the React Native framework
• Zustand for state management
• SQLite for local database solution