SADo - Simple Todo App

This is a monorepo for the SADo (Simple Todo) application, built as an example project for SAD (System Analysis and Design). It includes a Next.js frontend and an Express.js backend.

Tech Stack

• Monorepo: pnpm workspaces + Turborepo
• Frontend: Next.js, React, TypeScript, Tailwind CSS, Shadcn UI (via @workspace/ui)
• Backend: Node.js, Express.js, TypeScript, MongoDB with Mongoose
• Linting/Formatting: ESLint (via @workspace/eslint-config), Prettier
• Testing (Frontend): Playwright, Jest

Project Structure

• apps/frontend: Contains the Next.js frontend application.
• apps/backend: Contains the Express.js backend application.
• packages/ui: Shared React UI components based on Shadcn UI.
• packages/eslint-config: Shared ESLint configurations.
• packages/typescript-config: Shared TypeScript configurations.

Getting Started

Prerequisites

• Node.js (v20 or higher - see root package.json)
• pnpm (v9.12.3 or compatible - see root package.json)
• MongoDB instance (running locally or accessible via connection string)

Installation

1. Clone the repository.
2. Install dependencies from the root directory:

   pnpm install

3. Set up environment variables:
   • Copy .env.example to .env in apps/backend and configure your MONGODB_URI.
   • (Optional) Configure frontend environment variables if needed.

Running the Development Servers

To start both the frontend and backend development servers concurrently:

pnpm dev

This uses Turborepo to run the dev script defined in package.json and package.json.

• Frontend will be available at http://localhost:3000 (or the next available port).
• Backend will be available at http://localhost:5000 (or the port specified in your backend config/env).

Available Scripts

Run these commands from the root directory:

• pnpm build: Build both frontend and backend applications.
• pnpm start: Start the production builds of both applications (requires building first).
• pnpm dev: Start development servers for frontend and backend.
• pnpm lint: Lint all code in the monorepo.
• pnpm format: Format all code using Prettier.
• pnpm test: Run unit tests (currently configured for the frontend using Jest).
• pnpm test:e2e: Run end-to-end tests (currently configured for the frontend using Playwright).

You can also run scripts for individual workspaces, e.g., pnpm --filter backend dev.