typescript react nextui supabase cursorrules promp
via PatrickJS/awesome-cursorrules
TypeScript + React + NextUI + Supabase stack guide for full-stack web apps with auth and dashboards.
What is typescript react nextui supabase cursorrules promp?
Cursor rules for a TypeScript/React application using NextUI components and Supabase backend services. Use this rule when building web applications with email/OAuth authentication, user dashboards, and database integration via Supabase.
- Provides TypeScript type-safe patterns for React components with NextUI
- Guides authentication flows including email/password and GitHub OAuth login
- Structures Supabase integration for database and authentication services
- Establishes layout patterns for landing pages, dashboards, and authenticated user flows
- Supports email confirmation and logout workflows
- Organizes navigation with responsive navbar and collapsible sidebar 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
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.