Next.js Vercel Todo App .cursorrules prompt file
About .cursorrules prompt file
What you can build
TaskFlow: A task management web application providing users with the ability to create, update, and delete tasks using Next.js and Supabase for efficient real-time synchronization.
Stripe-Powered Invoicing System: A web app that allows freelancers to manage tasks and automatically generate invoices for completed work using Stripe for payment processing.
Secure Task Management-Lite: A simple task manager focused on privacy and security, leveraging Clerk for authentication to ensure only authorized users can access and modify their task data.
Team Task Collaboration Hub: An advanced to-do app for teams to manage projects collaboratively, featuring role-based permissions, real-time updates with Supabase, and engaging UI animations via Framer Motion.
Task Tracker Widget: A browser extension or small web widget that allows users to quickly add tasks on-the-go, synchronizing with a main to-do app using Drizzle ORM to handle background data transactions.
Personal Productivity Dashboard: An interactive dashboard integrating tasks with Stripe subscription payments for personal coach services, empowering users to achieve better work-life integration.
Scheduled Task Reminder App: A service with server-side Scheduler Actions that sends timely reminders about pending tasks via email or in-app notifications to ensure task completion.
Accessible Todo List App: A simplistic and accessible todo list application focusing on UI/UX designs using Tailwind and accessibility standards for users with disabilities.
Mobile Todo & Payment App: A mobile-first web app version of the todo app with integrated payments via Stripe for purchasing add-on task management features.
Data-Driven Task Insights: A backend analytics service providing insights into your task usage patterns, productivity peaks, and personalized suggestions using data from Postgres queries.
Customizable Kanban Board: An upgrade from a simple task list to a dynamic Kanban board layout, allowing users to visually organize tasks across customizable stages with Drizzle ORM-backed data persistence.
Family Task Organizer: A family-focused task management app that lets family members share and delegate tasks among each other, incorporating Clerk for easy user management.
SyncTask Between Devices: A cross-device synchronization app designed to keep task lists consistent between various user devices with Supabase real-time updates.
Framer Motion Task Animation Tool: A specialized tool or library catalog developed for the todo app to leverage Framer Motion animations in customizing task entry and completion animations.
Task Management Training App: A guided tutorial and simulated environment teaching productivity and task management techniques, accompanied by interactive task management exercises.
Benefits
- Detailed folder structure to maintain organized code separation between components, schemas, actions, and queries.
- Comprehensive instructions on data handling using Postgres, Supabase, and Drizzle ORM with specific file naming conventions and import paths for consistency.
- Emphasis on server-side data fetching and mutations using actions, ensuring server components are used effectively with actions, suspense, and fallback components.
Synopsis
This prompt is ideal for developers building a todo app with Next.js and Supabase, offering a structured guide for implementing frontend and backend rules, database schemas, and server actions.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive guide to building a todo app using specified technology stacks, both for frontend and backend development. It outlines the project's structure, including guidelines for server actions, database schemas, API routes, and UI components. The file includes detailed rules for managing environment variables, interacting with types, organizing code, and implementing both server and client components. It also specifies best practices for utilizing Next.js, integrating authentication with Clerk, managing payments with Stripe, and deploying with Vercel. The document emphasizes code organization, type usage, data fetching strategies, and provides examples of schema and query implementations.