Due-it

Task management app built with Next.js 16, Clerk, and MongoDB Atlas. It supports local development and container deployment with Docker and Portainer.

🚀 Key Features

• Global search across todos.
• Create, rename, and delete categories.
• Mobile swipe navigation between categories.
• Inline task editing and task deletion.
• Due-date labels and color-coded left borders.
• Clerk authentication with signed-out redirect.
• Docker and Portainer deployment support.

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Auth: Clerk
• Database: MongoDB Atlas
• Styling: Tailwind CSS
• Deployment: Docker Hub & Portainer

⚙️ Local Development

1. Clone the Repository:

   git clone [https://github.com/AznRaven/next-todo-26.git](https://github.com/AznRaven/next-todo-26.git)
   cd next-todo-26

2. Install Dependencies:

   npm install

3. Configure Environment Variables: Create a .env or .env.local file in the project root:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   CLERK_JS_URL=https://your-clerk-domain/npm/@clerk/clerk-js@5/dist/clerk.browser.js
   MONGODB_URI=your_mongodb_atlas_connection_string

4. Run Locally:

   npm run dev

🐳 Portainer Deployment

This project includes a push-docker.ps1 script for Windows and a Portainer stack definition in the repo root as portainer-stack.yml.

1. Build and Push:

   .\push-docker.ps1

2. Update Portainer: In Portainer, load portainer-stack.yml, set the required environment variables, and deploy the stack with image pull enabled.

3. Required Stack Variables:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
   CLERK_SECRET_KEY=...
   CLERK_JS_URL=...
   MONGODB_URI=...

👤 First-Time Login Tutorial

1. Open the app and go to the sign-in page.
2. Sign in or sign up with your Clerk account.
3. Land on the dashboard after authentication. If you are signed out, the app redirects you back to sign-in.
4. Choose a category from the sidebar or swipe between categories on mobile.
5. Create your first category if needed using the add category field in the sidebar.
6. Add your first task from the main input, then pick a due date in the calendar modal.
7. Tap the task name to edit it later, or use the delete button on the card to remove it.

📂 Project Structure

• app/page.js: Main dashboard, mobile swipe navigation, and task list.
• lib/actions.js: Server actions for todos and categories.
• components/Sidebar.js: Category navigation and management.
• components/TodoInput.js: Task creation modal and calendar.
• portainer-stack.yml: Portainer stack definition.
• .env: Local environment values, including CLERK_JS_URL.

🔗 Repository

• App name: Due-it
• Repository name: next-todo-26
• GitHub: AznRaven/next-todo-26
• Docker image: aznraven/next-todo:latest
• Portainer stack: portainer-stack.yml

🚢 Deployment Notes

• Keep Clerk and MongoDB values in environment variables.
• Set CLERK_JS_URL to the Clerk frontend asset URL for your app.
• In Portainer, enable image pull on stack updates.

📄 License

This project is licensed under the MIT License.