TypeScript Next.js React .cursorrules prompt file
About .cursorrules prompt file
What you can build
Virtual Learning Platform: Create a learning management system using Next.js and Supabase, leveraging Radix UI for component design and Tailwind for responsive styling. Implement custom administrative dashboards for user management and analytics.
E-commerce Platform: Develop a scalable e-commerce platform with a focus on performance using Next.js and SSR composed of Shadcn UI components, PostgreSQL functions for transactional data handling, and dynamic loading for non-essential features.
Social Media App: Build a social media platform that prioritizes Web Vitals, featuring real-time updates with Supabase's real-time capabilities, utilizing React's Suspense for loading, and managing URLs with 'nuqs'.
Fitness Tracker: Construct a fitness and health tracking web application with a mobile-first design and Tailwind CSS for UI, PostgreSQL for data storage, and comprehensive privacy controls featuring RLS policies in Supabase.
Project Management Tool: Create a project management application using Next.js for intuitive navigation, employing Shadcn UI and Radix for customizable components, and optimizing task handling with Supabase's database functions.
Event Management System: Develop an event management system that allows users to organize and track events with real-time updates, using Supabase for database management and Next.js RSC for server rendering.
Recipe Sharing Platform: Design a recipe sharing site where users can upload, share, and rate recipes. Use Next.js for server components, Supabase for handling authentication and database functions, and Tailwind CSS for styling.
Online Forum: Build a modern online forum application with specific emphasis on performance, using Radix UI components, structured file organization of React components, and PostgreSQL for complex query handling.
Job Portal: Develop a job portal that connects employers and candidates, utilizing Next.js for SSR benefits, dynamic data fetching with Supabase, and Tailwind for responsive UI design.
Real-Time Collaboration Tool: Implement a real-time collaboration tool using Supabase for real-time data, Radix UI for accessible and seamless user interface, and Next.js RSC to optimize loading and performance.
Benefits
- Use TypeScript for all code; prioritize functional programming and modular structure.
- Implement responsive design using Tailwind and favor server components for optimal performance.
- Name directories in lowercase with dashes; prefer named exports and semantic HTML.
Synopsis
Developers using this prompt can build optimized, scalable web applications with a focus on TypeScript, Next.js, and Supabase, ensuring clean code, efficient data management, and modern UI/UX practices.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive guide for developers using TypeScript, Next.js App Router, React, Supabase, Shadcn UI, Radix UI, and Tailwind. It outlines best practices for code style, structure, and naming conventions, emphasizing concise, modular, and declarative programming. It also specifies TypeScript usage, PostgreSQL practices, and syntax formatting rules. The file highlights UI styling techniques using Shadcn UI, Radix, and Tailwind, and gives directions for performance optimization, including React Server Components and dynamic loading. Key conventions include managing URL search parameters with 'nuqs' and optimizing Web Vitals. It also discusses technical preferences such as using semantic HTML and handling errors, advising adherence to Next.js and Supabase documentation.