Sample Todo Next App

Todo Next App is a robust project management application designed to streamline team collaboration. It allows users to manage organizations, boards, statuses, tasks, and team members efficiently. With features like real-time notifications, activity logging, and a drag-and-drop interface, Todo Next App Boards ensures a seamless project management experience.

Features

• User Authentication: Secure authentication and authorization using Clerk.
• CRUD Operations: Full management of organizations, boards, statuses, and tasks.
• Task Management: Assign tasks to team members with real-time status updates.
• Member Invitations: Invite team members to organizations.
• Task Commenting: Add comments to tasks to foster collaboration.
• Real-time Notifications: Stay up-to-date with relevant actions and events.
• Activity Logging: Track actions and events for transparency.
• Drag-and-Drop Interface: Easily manage tasks via an intuitive drag-and-drop UI.

Tech Stack

• Framework: Next.js with App Router
• Frontend: React + Tailwind CSS for styling
• State Management: TanStack Query (React Query) for data fetching and caching
• Validation: Zod for schema validation
• Authentication: Clerk for user authentication and authorization
• TypeScript: Ensuring type safety throughout the codebase

Getting Started

Prerequisites

• Node.js v18 or later
• npm v10 or later

Installation

1. Clone the repository:

   git clone https://github.com/FiftyfiveTech/sample-next-app.git
   cd sample-next-app

2. Install dependencies:

   npm install

   Or with yarn:

   yarn install

3. Set up environment variables:

   • Copy the .env.sample file to .env:

     cp .env.sample .env

   • Fill in the required values for the following keys (see Environment Variables).

4. Run the development server:

   npm run dev

   Or with yarn:

   yarn dev

5. Access the app:

   Open http://localhost:3000 in your browser.

Environment Variables

Create a .env file in the root directory and add the following variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_JWT_KEY=your_jwt_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
TASK_SERVICE_BACKEND_URL=task_service_backend_url
ACTIVITY_SERVICE_BACKEND_URL=activity_service_backend_url
NOTIFICATION_SERVICE_BACKEND_URL=notification_service_backend_url

Replace the your_clerk_pub_key, your_clerk_secret_key, and your_jwt_key placeholders with your actual Clerk credentials. Replace the task_service_backend_url, activity_service_backend_url and notification_service_backend_url placeholders with your service http(if localhost) or https urls.

Project Structure

├── app/               # Next.js app router and pages
├── components/        # Reusable React components
├── hooks/             # Custom React hooks for data fetching and mutations
├── lib/               # Utility functions and helpers
├── schemas/           # Zod schemas for data validation
├── styles/            # Global styles and Tailwind CSS configuration
└── ...

Adding a New API Endpoint

1. Create a new API route:

   Add a new file under app/api/, e.g., app/api/new-endpoint/route.ts.

2. Implement your API logic:

   Write the required logic for the new endpoint. Protect the route with Clerk middleware if needed.

3. Update your frontend hooks:

   Add or update the corresponding hooks in the hooks/ directory to call the new endpoint.

Adding a New Service APIs

1. Add the origin in api/[...path]/route file:

   Add a new /unique-path-part for the service, e.g., /notification/ or /activities/ in API path.

2. Configure environment variables:

   Add the service URL in .env and .env.sample.

3. Create service hooks:

   Create the necessary hooks in hooks/ for interacting with the service(remember to use authenticatedFetch for token passing).

4. Update frontend components:

   Modify relevant components to use the newly created service hooks.

Using Zod Schemas

1. Define Zod schemas:

   Create schema definitions in the schemas/ directory.

2. Validate your API and component data:

   Use these schemas for validation in API routes or components to ensure proper data structure.

3. Generate TypeScript types:

   Use z.infer<typeof YourSchema> to generate TypeScript types from the Zod schema.

Contributing

We welcome contributions! Please feel free to fork the repository, create a branch, and submit a Pull Request with your changes.