Sponsored by Deepsite.site

Todo App

Created By
box-community8 months ago
This app was built completely with cursor using the Box MCP server to find a PRD and coding guidelines.
Content

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.

Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
TimeA Model Context Protocol server that provides time and timezone conversion capabilities. This server enables LLMs to get current time information and perform timezone conversions using IANA timezone names, with automatic system timezone detection.
Howtocook Mcp基于Anduin2017 / HowToCook (程序员在家做饭指南)的mcp server,帮你推荐菜谱、规划膳食,解决“今天吃什么“的世纪难题; Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
Serper MCP ServerA Serper MCP Server
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
DeepChatYour AI Partner on Desktop
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
Amap Maps高德地图官方 MCP Server
Baidu Map百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Playwright McpPlaywright MCP server
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
CursorThe AI Code Editor
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
ChatWiseThe second fastest AI chatbot™
WindsurfThe new purpose-built IDE to harness magic
Tavily Mcp
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
Context7Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors