Todo App logo

Todo App

by box-community

A comprehensive todo application with a React Native mobile app and a Node.js/Express backend API. This application allows users to manage tasks and lists across iOS and Android platforms.

View on GitHub

Last updated: N/A

Todo App

A comprehensive todo application with a React Native mobile app and a Node.js/Express backend API. This file was built using Cursor and the Box MCP server. No code was manually written.

In Cursor, we searched Box for the Product Requirements Document (PRD) and for Coding Standards, and asked Cursor to build the app decribed in the PRD being sure to follow the coding standards. To see the documents we used in Box, check out the /sample-docs directory.

In order to prevent cheating the PRD or guidelines to make the build easier, I used the following publicly available examples:

  • PRD from Damian Filiatrault at ScalablePath.
  • Coding standards download from Google's Github

Project Structure

  • /mobile-app - React Native mobile application with Expo
  • /api - Node.js/Express backend API with TypeScript

Features

  • User authentication (signup, login)
  • Task list creation and management
  • Task creation with name, description, due date, and priority
  • Mark tasks as completed
  • Delete tasks and lists
  • Cross-platform (iOS & Android)

Technology Stack

Mobile App

  • React Native with Expo
  • TypeScript
  • Redux Toolkit for state management
  • Expo Router for navigation
  • React Native Safe Area Context for safe area handling

Backend API

  • Node.js with Express
  • TypeScript
  • MongoDB with Mongoose
  • JWT authentication
  • Express Validator for request validation

Setup Instructions

Prerequisites

  • Node.js 18+
  • MongoDB
  • Expo CLI (npm install -g expo-cli)
  • iOS Simulator (for iOS development)
  • Android Studio with an emulator (for Android development)

Mobile App Setup

# Navigate to the mobile app directory
cd mobile-app

# Install dependencies
npm install

# Start the development server
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

API Setup

# Navigate to the API directory
cd api

# Install dependencies
npm install

# Create a .env file with the following variables
# PORT=3000
# MONGODB_URI=mongodb://localhost:27017/todo-app
# JWT_SECRET=your-secret-key

# Start the development server
npm run dev

# Build the project
npm run build

# Start the production server
npm start

Environment Variables

Mobile App

Create a .env file in the mobile-app directory with:

EXPO_PUBLIC_API_URL=http://localhost:3000/api

API

Create a .env file in the api directory with:

PORT=3000
MONGODB_URI=mongodb://localhost:27017/todo-app
JWT_SECRET=your-secret-key

API Endpoints

Authentication

  • POST /api/auth/register - Register a new user
  • POST /api/auth/login - Login a user

Lists

  • GET /api/lists - Get all lists for the current user
  • POST /api/lists - Create a new list
  • GET /api/lists/:listId - Get a specific list
  • PUT /api/lists/:listId - Update a list
  • DELETE /api/lists/:listId - Delete a list

Tasks

  • GET /api/lists/:listId/tasks - Get all tasks for a list
  • POST /api/lists/:listId/tasks - Create a new task
  • GET /api/lists/:listId/tasks/:taskId - Get a specific task
  • PUT /api/lists/:listId/tasks/:taskId - Update a task
  • DELETE /api/lists/:listId/tasks/:taskId - Delete a task

Contributing

  1. Fork the repository
  2. Create your 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.