A modern, secure, and scalable multi-tenant todo application built with Next.js, PayloadCMS, and TypeScript. This application empowers organizations to manage their tasks efficiently while ensuring complete data isolation between different tenants. ✨

• Automatic tenant creation upon user registration
• Complete data isolation between tenants
• Tenant-specific task management

• Role-based access control (User, Admin)
• Secure authentication with token-based sessions
• Rate limiting for login attempts
• User profile management

• Create, read, update, and delete todos
• Task prioritization (High, Medium, Low)
• Task status tracking (Todo, In Progress, Done)
• Task assignment to team members
• Due date management
• Detailed task descriptions

• JWT-based authentication
• Rate limiting for API endpoints
• Secure password handling
• CORS and CSRF protection
• Environment-based configuration

• Frontend: Next.js 13+ with App Router
• Backend: PayloadCMS
• Database: PostgreSQL
• Authentication: Built-in PayloadCMS auth with JWT
• Type Safety: TypeScript
• Styling: Modern UI with responsive design

• Node.js 18+
• PostgreSQL 16+
• npm or yarn

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

# Database
DATABASE_URL=postgresql://username:password@localhost:5432/todo_app

# PayloadCMS
PAYLOAD_SECRET=your-secret-key
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000

# Development URLs
NEXT_PUBLIC_DEV_URL=http://localhost:3000
NEXT_PUBLIC_DEV_ADMIN_URL=http://localhost:3000/admin

# Production URLs
NEXT_PUBLIC_PROD_URL=https://your-domain.com
NEXT_PUBLIC_PROD_ADMIN_URL=https://your-domain.com/admin

1. Clone the repository:

git clone https://github.com/akshay0077/todo-payload-app.git
cd todo-payload-app

2. Install dependencies:

npm install

or

yarn install

3. Set up environment variables as described above.
4. Start the development server:

npm run dev

or

yarn dev

├── src/
│ ├── app/
│ │ ├── (frontend)/ # Client-side application routes
│ ├── collections/ # PayloadCMS collections
│ │ ├── Users.ts # User collection with multi-tenant support
│ │ └── Todos.ts # Todo collection with tenant isolation
│ ├── payload.config.ts # PayloadCMS configuration
│ └── types/ # TypeScript type definitions
├── public/
│ └── auth-templates/ # Authentication templates
└── package.json

• GET /api/users - User login
• POST /api/users - User registration & Create new tenant

• GET /api/todos - List todos (tenant-scoped)
• POST /api/todos - Create new todo
• PUT /api/todos/:id - Update todo
• DELETE /api/todos/:id - Delete todo

Here are snapshots of the key interfaces in the Multi-Tenant Todo Application:

This is the initial user registration screen, built with HTML, CSS, and JavaScript, located in public/auth-templates/register.html. It provides a clean, responsive form for users to enter their details and create a new account.

The main todo web application, accessible after login at /todos, built with Next.js and PayloadCMS. It displays a user’s tasks, allows task management, and ensures tenant isolation.

###3. PayloadCMS Admin Panel 🛠️ The admin interface at /admin, powered by PayloadCMS, allows administrators to manage users, todos, and tenant settings securely.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature/my-new-feature
5. Submit a pull request

This project is licensed under the MIT License.

For support, please open an issue in the GitHub repository 😊