TypeScript React NextUI Supabase .cursorrules prompt file

Author: jjfantini

What you can build

Supabase Authentication Manager: A tool that allows developers to easily set up and customize authentication flows using Supabase, with drag-and-drop options for email/password and OAuth integrations. It includes monitoring and managing users' authentication statuses and provides analytics on user sign-in patterns.UI Theme Generator with NextUI: An online platform that helps developers design and export themed components for their NextUI-based projects. This generator would allow for the customization of colors, typography, and component styles with real-time previews.Next.js App Scaffolding Service: A service to generate ready-to-deploy Next.js applications with Supabase integrations out-of-the-box, featuring default pages for authentication, dashboards, and navigation components.Iconify Icon Manager: A web app that allows developers to search, customize, and manage Iconify icons, providing tools to adjust their size, color, and integrate them seamlessly into TypeScript and React applications.React Dashboard Template Builder: A tool for creating customizable React dashboard templates using NextUI components, designed to integrate smoothly with Supabase backend services. Includes pre-built widgets for data visualization and user management.Landing Page Creator for TypeScript Apps: A specialized page builder aimed at developers to quickly create and deploy landing pages using a Typescript and React stack. Features template selections, contact forms, and user sign-up components.Authentication Flow Testing Tool: An application for testing and verifying the authentication flows of web apps integrated with Supabase. It provides simulations for login, signup, and email confirmation procedures.Supabase Database Visualizer: An online interface for visualizing and managing your Supabase databases. Includes features such as querying, schema exploration, and relationship mapping with interactive diagrams.Responsive React Navbar Creator: A simple tool to create and customize responsive navbars for React applications, supporting both mobile and desktop designs, and facilitating easy integration into projects using TypeScript and NextUI.Real-time Error Monitoring Dashboard: A service that integrates into your application to provide real-time monitoring of errors and exceptions, with detailed reports and user-friendly dashboards for easier debugging and handling within React applications.

Benefits

Synopsis

Developers building a TypeScript-based web application can leverage this prompt to create a structured solution with integrated authentication using React, NextUI, Supabase, and Next.js.

Overview of .cursorrules prompt

The .cursorrules file outlines the structure and components of a web application built using TypeScript and React, with a focus on a landing page, authentication flows, and a user dashboard. It integrates Supabase for backend functionalities such as authentication and database interactions. The front end is designed with NextUI components and utilizes Next.js for server-side utilities. Authentication supports email/password and GitHub OAuth login, with logic located in specified TypeScript files. The user interface includes a responsive navbar, a collapsible sidebar for navigation in a multi-page dashboard, and error handling features. Iconify is used for application icons.

.cursorrules Content

# Codebase OverviewThis 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 TechnologiesFrontend Framework: ReactTypeScript: 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## AuthenticationThe 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 InterfaceLanding 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 LayoutNavbar: 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.