Next.js Supabase Todo App .cursorrules prompt file
100
Mckay Wrigley
Visit
About .cursorrules prompt file
What you can build
- Todo App with Advanced Animations - Develop a web app that leverages Framer Motion extensively to create visually appealing animations for task management processes, making user interaction more engaging and dynamic.
- Collaborative Todo List - Create a platform where users can share and collaborate on todo lists using Supabase for real-time data synchronization and Clerk for user authentication.
- Subscription-based Goal Tracker - Utilize Stripe to set up a subscription model for a todo app that offers premium features such as goal tracking and project management.
- Tailwind Cheat Sheet Generator - Build a tool that helps developers quickly generate Tailwind CSS configurations for components, enhancing productivity when building the todo app.
- Schema Visualization Tool - Design a service that visualizes database schemas stored in
/db/schema
, making it easier for developers to understand and manage their data structures. - Task Notification System - Implement a system using Next.js that integrates with browser notifications to alert users of pending todos, keeping tasks top-of-mind even when away from the app.
- Personalized Todo Recommendations - Use Server Actions to analyze user behavior and offer personalized todo suggestions to help users manage their tasks more effectively.
- Simplified Payment Integration Wizard - Develop a wizard-like tool for easily integrating Stripe payments into web applications, tailored for use with todo app features.
- Gamified Todo Experience - Introduce a gamification feature using Framer Motion for animations and Supabase for tracking user achievements and progress.
- Component Marketplace for Todo Apps - Create a marketplace for components like those in
/components
, where developers can find and share reusable pieces for enhancing the functionality of todo applications. - Automated Testing Framework for Next.js Apps - Set up a comprehensive testing framework specifically for Next.js applications to ensure todo apps function correctly across various use cases.
- Secure Todo List Backup Service - Design a backup service integrated with Supabase to ensure user tasks are securely stored and easily retrievable in case of data loss.
- Customizable Theme Builder for Todo Apps - Enable users to modify the appearance of their todo apps by offering a range of themes built with Tailwind, improving the personalization of their experience.
Benefits
- Leverages modern tech stack with Next.js, Tailwind, and Supabase for robust and scalable solutions.
- Organized file structure with dedicated directories for components, actions, schemas, and queries.
- Integrates Clerk for seamless authentication and Stripe for handling payments efficiently.
Synopsis
Developers aiming to create a structured full-stack Todo app with modern frameworks and best practices would benefit from this prompt.
Overview of .cursorrules prompt
The .cursorrules file provides a structured guideline for building a Todo web application. It specifies the use of certain technologies, including Next.js for the frontend and Supabase for the backend. Other tools in the tech stack include Tailwind, Shadcn, Framer Motion for UI components, Clerk for authentication, and Stripe for payment processing. The file sets clear organizational rules, stating where specific files should be placed, such as components in the `/components` directory and actions in the `/actions` directory, along with recommended naming conventions.