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.
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 userPOST /api/auth/login
- Login a user
Lists
GET /api/lists
- Get all lists for the current userPOST /api/lists
- Create a new listGET /api/lists/:listId
- Get a specific listPUT /api/lists/:listId
- Update a listDELETE /api/lists/:listId
- Delete a list
Tasks
GET /api/lists/:listId/tasks
- Get all tasks for a listPOST /api/lists/:listId/tasks
- Create a new taskGET /api/lists/:listId/tasks/:taskId
- Get a specific taskPUT /api/lists/:listId/tasks/:taskId
- Update a taskDELETE /api/lists/:listId/tasks/:taskId
- Delete a task
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License
This project is licensed under the MIT License.