Todo Web

Recursive todo application built for the Comuneo intro task with Remix, TypeScript, Tailwind CSS, and Appwrite.

What is included

• /signup route with server-side validation and Appwrite email/password auth
• Recursive todo tree where each item can own unlimited nested sub-tasks
• Appwrite database persistence through Remix loaders and actions
• Root-level pagination with smooth scroll-to-item behavior after updates
• Vitest + Testing Library UI tests for the recursive todo component
• Appwrite Function scaffold for a welcome email after registration
• Docker + Render deployment files and a CI/CD plan

Stack

• Remix with the Vite toolchain
• TypeScript
• Tailwind CSS
• Appwrite Cloud
• Vitest and Testing Library

Local setup

1. Install dependencies:

npm install

2. Copy .env.example to .env if needed and review the values.

3. In Appwrite, create the database and collection used by the app:

• Database ID: todo_web_db
• Collection ID: todos
• Attributes:
  • title: string, size 120, required
  • completed: boolean, required
  • ownerId: string, size 64, required
  • parentId: string, size 64, required

4. Start the app:

npm run dev

5. Open http://localhost:3000.

Environment variables

Variable	Purpose
PUBLIC_APPWRITE_ENDPOINT	Public Appwrite API endpoint
PUBLIC_APPWRITE_PROJECT_ID	Appwrite project ID
APPWRITE_API_KEY	Server-side API key for database operations
APPWRITE_DATABASE_ID	Appwrite database ID
APPWRITE_TODOS_COLLECTION_ID	Todos collection ID
SESSION_SECRET	Remix cookie signing secret
APPWRITE_WELCOME_EMAIL_ID	Appwrite message/template ID used by the function
APPWRITE_FUNCTION_API_KEY	Function-scoped Appwrite API key
APPWRITE_EMAIL_FROM_NAME	Sender name for welcome emails
APPWRITE_EMAIL_FROM_ADDRESS	Sender address for welcome emails

Appwrite wiring

Authentication

• app/routes/signup.tsx validates the form with Zod.
• The action creates an Appwrite user or logs an existing user in.
• The Appwrite session secret is stored in a signed Remix cookie.

Todos persistence

• app/routes/_index.tsx loads the authenticated user and fetches their todo documents from Appwrite.
• Todo creation, completion changes, and deletion all go through Remix actions.
• Deletion is recursive and removes the full descendant branch.

Welcome email function

The function scaffold lives in appwrite-functions/welcome-email/src/main.js.

Recommended setup:

1. Create an Appwrite Function named welcome-email.
2. Use the Node.js runtime.
3. Point the entry file to src/main.js.
4. Add the function environment variables listed above.
5. Trigger it from the user creation event in Appwrite.

Testing

Run the UI tests:

npm test

The current suite verifies:

• recursive rendering of nested tasks
• add-sub-task interactions
• completion toggling
• deletion triggers

Deployment

The repository includes a production Dockerfile and a simple render.yaml.

You can deploy to Render, Railway, Fly.io, or any container platform by:

1. Building the image
2. Providing the environment variables
3. Exposing port 3000
4. Running npm run start

Actual cloud deployment was not executed from this workspace because there is no cloud account access in the current environment.

Suggested CI/CD pipeline

GitHub Actions is the most practical option for a project this size.

Suggested pipeline:

1. Checkout repository
2. Install dependencies with npm ci
3. Run npm run typecheck
4. Run npm test
5. Run npm run build
6. Build Docker image
7. Deploy only from the main branch

Recommended tools:

• GitHub Actions for CI orchestration
• Render or Railway for deployment
• Dependabot for dependency updates
• Sentry or Appwrite logs for runtime monitoring

Notes

• The provided .env contains the supplied Appwrite project values for local development. Rotate secrets before publishing the repository.
• Pagination is intentionally applied to root todos so nested context remains readable.
• Smooth scrolling targets the last updated todo via the focus query parameter.