typescript react nextui supabase cursorrules promp
via PatrickJS/awesome-cursorrules
TypeScript + React + NextUI + Supabase integration guide for full-stack web applications.
What is typescript react nextui supabase cursorrules promp?
Cursor rules for a TypeScript-based React application using NextUI components and Supabase backend services. Use this rule when building web apps with authentication flows, dashboards, and real-time database integration across Next.js projects.
- Provides TypeScript type-safe patterns for React and NextUI component development
- Guides authentication implementation including email/password and OAuth (GitHub) login flows
- Structures Supabase integration for authentication, database queries, and storage operations
- Establishes layout patterns for landing pages, dashboards, and authenticated user interfaces
- Defines server-side action handlers for login, signup, logout, and email confirmation flows
- Supports responsive UI with navbar and collapsible sidebar navigation components
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
Codebase Overview
This codebase appears to be part of a web application built using TypeScript, React, and various NextUI components. It is structured to support a landing page, authentication flows, and a dashboard for logged-in users. The application integrates with Supabase for backend services, including authentication and database interactions.
Stack and Key Technologies
Frontend Framework: React TypeScript: Used for type-safe code across the frontend. NextUI: A React UI library used for building the UI components like buttons, modals, inputs, etc. Supabase: An open-source Firebase alternative used for backend services like authentication, database, and storage. Next.js: Likely used as the React framework, indicated by the usage of next/navigation and server utilities. Iconify: For icons across the application.
Purpose and Functionality
Authentication
The application includes a comprehensive authentication flow: Login: Users can log in using email/password or GitHub OAuth. The login logic is handled in frontend/app/(landing-page)/login/action.ts. Signup: New users can sign up with an email and password. The signup logic is also in frontend/app/(landing-page)/login/action.ts. Logout: Users can log out, with the logic located in frontend/app/(landing-page)/logout/action.ts. Email Confirmation: The application handles email confirmation through a callback route in frontend/app/auth/callback/confirm/route.ts.
User Interface
Landing Page: Contains components like SubmitButton, LoginPage, and LogoutModal to facilitate user interactions. Dashboard: For logged-in users, showing personalized content and a sidebar for navigation within the dashboard. Error Handling: A generic error component is used to display errors and provide a retry mechanism.
Navigation and Layout
Navbar: A responsive navbar for the landing page and possibly other public pages. Sidebar: A collapsible sidebar for the dashboard, indicating a more complex, multi-page application structure for authenticated users.
Related rules
TypeScript + shadcn/ui + Next.js development conventions with RSC-first patterns and Tailwind styling.
TypeScript, Vite, and Tailwind best practices with Vue 3 Composition API and DaisyUI.
TypeScript and Vue.js development conventions and best practices.
TypeScript, Zod, Tailwind, and Next.js coding standards for Cursor.
TYPO3 CMS extension development with modern PHP 8.3+, PSR standards, and best practices.
Swift UIKit development guidelines emphasizing clean architecture, Auto Layout with SnapKit, and programmatic UI composition.