Todo App - React Native Take Home Assignment

A simple mobile app to manage projects and their tasks built with React Native, Expo, and TypeScript. Checkout store for other apps like this.

Features

• Projects List: View all projects with completion status and task counts
• Project Details: View, add, toggle, and delete tasks within a project
• Local Storage: All data stored locally using SQLite
• Simple UI: Simple interface using React Native Paper

Tech Stack

• React Native with Expo
• Expo Router for navigation
• Expo SQLite for database
• React Native Paper for UI components
• TypeScript

Setup Instructions

Before runnging make sure you have the following installed:

• Node.js (v23 or higher) {this is what i use, this app may work with other versions}
• Expo Go app or Android emulator (for testing)

1. Installation

   # Clone the repository
   git clone <repository-url>
   cd todo-app
   
   # Install dependencies
   npm install

2. Running the App

   # Start the development server
   npm start
   
   # Or run on specific platform
   npm run android  # For Android
   npm run ios      # For iOS
   npm run web      # For web (npm install react-dom react-native-web)

3. Testing on Device

   • Install Expo Go app on your phone
   • Scan the QR code displayed in terminal/browser
   • The app will load on your device

Building Guide ( for Android )

Since I don't have access to a Mac, I'm not sure if this works for everyone. If you have any issues, please let me know.

Before runnging make sure you have the following installed:

• Node.js (v23 or higher)
• Java (JDK 21)
• Android SDK
• Android Studio

1. Installation

   # Clone the repository
   git clone <repository-url>
   cd todo-app
   
   # Install dependencies
   npm install

2. Prebuilding the android folder

   # make the prebuild android folder
   npx expo prebuild:android

3. Building the apk

   # move into android folder
   cd android
   
   # build the apk
   ./gradlew assembleRelease

4. Installing the apk

   # install the apk on your phone
   adb install app/build/outputs/apk/release/app-release.apk
   # or
   # copy the file into your phone and install it

Database Schema

Projects Table

• id (INTEGER PRIMARY KEY)
• title (TEXT)
• createdAt (TEXT)

Tasks Table

• id (INTEGER PRIMARY KEY)
• projectId (INTEGER, Foreign Key)
• title (TEXT)
• completed (INTEGER, 0 or 1)
• createdAt (TEXT)

Pages

1. Projects List (Home Screen)

• Displays all projects with completion status.
• Shows "X of Y tasks completed" for each project
• Floating Action Button to add new projects

2. Project Details Screen

• Lists all tasks for a specific project
• Checkbox to toggle task completion
• Add new tasks with title input
• Delete tasks with confirmation dialog
• Real-time status updates

---

Challenges

1. With SQLite Although I use SQLite a lot but mostly for storing web scraped data, so I struggled to configure the relationship and get data from both tables at the same time. Still I managed to get it working by learning about JOIN and GROUP BY queries.

Rests are minor challenges like:

• call those async database functions with await
• thinking of right color scheme for the app
• importing components from right packages. Since react-native-paper and react-native shares name of components, my code editor's language server has imported components from wrong packages.

---

Things that can be added

1. Add project deletion
2. Task editing (mainly for fixing typos or adding more detail)
3. Due dates
4. Ability to export and import projects and tasks

---

License