About .cursorrules prompt file
What you can build
E-commerce Platform: Develop a scalable e-commerce platform using Next.js with a server-centric architecture leveraging Supabase for product and order data management. Use React Server Components to enhance page load performance, and Tailwind for responsive design.
Task Management Tool: Create a task management tool using Next.js and Supabase for managing projects and tasks. Implement a clean and modern UI with Shadcn UI and Radix UI components, and ensure fast, server-rendered pages with dynamic client-side loading for task details.
Content Management System (CMS): Build a CMS using Node.js and Next.js, storing data in Supabase. Use Tailwind CSS for a fully responsive and aesthetic design with an admin panel constructed with Radix UI components for managing site content efficiently.
Real-time Chat Application: Develop a real-time chat application using Supabase's real-time capabilities and Next.js for a performant, SSR-based web application. Utilize React and Tailwind for an engaging UI/UX.
Portfolio Website Builder: Create a no-code portfolio website builder with user-friendly interfaces made with Shadcn and Radix UI, enabling users to design their sites with drag-and-drop tools, while storing data in Supabase.
Event Booking System: Implement an event booking system that allows users to create, view, and register for events. Use Next.js for building SSR pages, Supabase for data management, and Tailwind CSS to ensure a responsive and interactive UI.
Online Learning Platform: Create a comprehensive online learning platform where educators can create courses and users can enroll and track progress. Utilize Next.js server components for optimized learning materials delivery and Supabase for backend data operations.
Community Forum: Design a community forum website using Node.js and Next.js for robust server-side rendering, where Supabase handles user authentication, threads, and responses. Use Radix UI to streamline forum interactions and Tailwind for styling.
Digital Marketplace: Develop a digital marketplace for buying and selling digital products. Implement Supabase for data handling and Tailwind for creating a responsive, mobile-first user interface, while ensuring fast page loads with React Server Components.
Personal Finance Tracker: Construct a personal finance management app in Next.js, with Supabase storing transaction data securely. Use Shadcn UI to create intuitive dashboards and mobile-first layouts with Tailwind for tracking expenses and savings.
Benefits
- Adopts Shadcn UI, Radix, and Tailwind CSS for consistent, responsive UI development using a mobile-first approach.
- Emphasizes functional and declarative patterns, promoting iteration and modularization with TypeScript interfaces, avoiding enums for improved code clarity.
- Focuses on performance by optimizing React usage, favoring server components, lazy loading images, and ensuring responsive design to enhance Web Vitals.
Synopsis
Developers building a full-stack TypeScript application with a focus on performance, modularity, and server-rendering optimizations would benefit by implementing the best practices outlined here.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive guide for writing TypeScript applications using Node.js, Next.js, React, Shadcn UI, Radix UI, Supabase, and Tailwind. It emphasizes concise, technical TypeScript code adhering to functional and declarative programming patterns. The file outlines coding standards, including naming conventions, TypeScript usage, syntax, and formatting rules. It suggests methodologies for UI and styling using Shadcn UI, Radix, and Tailwind, advocating for a mobile-first responsive design. Performance optimization strategies are included, such as the minimization of 'use client', 'useEffect', and 'setState', favoring React Server Components. The file advises on efficient database querying and data model creation using Supabase and highlights key conventions for managing URL search parameters and optimizing Web Vitals.
