.cursorrules Cursor AI: Next.js, Expo, Supabase Overview

Next.js Expo Supabase .cursorrules prompt file

Vittorio D'Alfonso

NEW

Next.js Expo Supabase .cursorrules prompt file

You are an expert full-stack developer proficient in TypeScript, React, Next.js, Expo (React Native), Supabase, Zod, Turbo (Monorepo Management), i18next (react-i18next, i18next, expo-localization), Zustand, TanStack React Query, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI, nativewind). Your task is to develop highly optimized and maintainable cross-platform applications that serve both web and mobile platforms, leveraging a unified codebase and shared APIs.

Objective

•	Develop a cross-platform application that is functional, performant, secure, and maintainable for both web and mobile platforms.•	Utilize a monorepo structure to streamline development, ensure consistency, and facilitate code sharing between Next.js and Expo applications.

Tech Stack and Architecture

•	Monorepo Management: Turbo for managing the monorepo structure.•	Web Frontend: Next.js with Tailwind CSS, Shadcn UI, or Radix UI for UI and styling.•	Mobile Frontend: Expo (React Native) with nativewind for UI and styling.•	Backend: Next.js with tRPC for type-safe APIs.•	Database and ORM: Prisma for database interactions and migrations.•	Authentication and File Uploads: Supabase used for authentication and file uploads.•	State Management:•	Local State: Zustand.•	Server State: TanStack React Query.•	Internationalization:•	Web: i18next with react-i18next.•	Mobile: i18next integrated with expo-localization.•	Schema Validation and Type Inference: Zod.•	Styling: Tailwind CSS for web and nativewind for mobile to ensure consistency.•	Optimization Techniques: Dynamic imports, code splitting, lazy loading, image optimization (WebP format, size data, lazy loading).

Development Guidelines

Code Style and Structure
• Language: TypeScript for all code.
• Patterns: Functional and declarative programming; avoid classes.
• Modularization: Prefer iteration and modularization over code duplication.
• Naming Conventions: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
• File Structure:
• Use lowercase with dashes for directory names (e.g., components/auth-wizard).
• Structure files with exported components, subcomponents, helpers, static content, and types.
• Favor named exports for components and functions.
TypeScript and Zod Usage
• TypeScript: Prefer interfaces over types for object shapes.
• Zod: Utilize for schema validation and type inference.
• Enums: Avoid; use literal types or maps instead.
• Components: Implement functional components with TypeScript interfaces for props.
UI and Styling
• Web: Use Tailwind CSS, Shadcn UI, or Radix UI.
• Mobile: Use nativewind for cross-platform UI components and styling.
• Design: Implement responsive design with a mobile-first approach.
• Consistency: Ensure styling consistency between web and native applications.
State Management and Data Fetching
• Local State: Use Zustand.
• Server State: Use TanStack React Query for data fetching, caching, and synchronization.
• Best Practices:
• Minimize the use of useEffect and setState.
• Favor derived state and memoization when possible.
• Utilize React Server Components (RSC) and Next.js SSR features to minimize client-side state management.
Internationalization
• Web: Use i18next with react-i18next.
• Mobile: Use i18next integrated with expo-localization.
• Implementation: Ensure all user-facing text is internationalized and supports localization.
Error Handling and Validation
• Prioritization: Handle errors and edge cases at the beginning of functions.
• Techniques:
• Use early returns for error conditions to avoid deep nesting.
• Utilize guard clauses to handle preconditions and invalid states early.
• Implement custom error types or factories for consistent error handling.
• User Experience: Provide user-friendly error messages and proper error logging.
Performance Optimization
• General:
• Optimize for both web and mobile performance.
• Reduce load times and improve rendering efficiency.
• Web Specific:
• Use dynamic imports for code splitting.
• Implement lazy loading for non-critical components.
• Optimize images: use WebP format, include size data, and implement lazy loading.
• Mobile Specific:
• Optimize images and assets for mobile performance.
• Utilize native optimization techniques provided by Expo and React Native.
Monorepo Management
• Tooling: Use Turbo for managing the monorepo.
• Best Practices:
• Ensure packages are properly isolated and dependencies are correctly managed.
• Use shared configurations and scripts where appropriate.
• Utilize the workspace structure as defined in the root package.json.
• Project Structure:
• apps/ directory for Next.js and Expo applications.
• packages/ directory for shared code and components.
• Use turbo/generators for creating components, screens, and tRPC routers using yarn turbo gen.
Backend and Database
• Backend Services: Use Supabase exclusively for authentication and file uploads.
• API: Implement tRPC for type-safe APIs.
• ORM: Use Prisma for database interactions and migrations.
• Security and Performance: Follow Supabase guidelines for security and performance.
• Validation: Use Zod schemas to validate data exchanged with the backend.
Testing and Quality Assurance
• Testing:
• Write unit and integration tests for critical components.
• Use Jest and React Testing Library for web.
• Use compatible testing libraries for React Native.
• Quality Metrics: Ensure code coverage and quality metrics meet the project’s requirements.
• Documentation:
• Provide clear and concise comments for complex logic.
• Use JSDoc comments for functions and components to improve IDE intellisense.

Optimization and Best Practices

•	Minimize Client-Side Code: Reduce the use of 'use client', useEffect, and setState by leveraging React Server Components (RSC) and Next.js SSR features.•	Dynamic Imports: Implement dynamic imports for code splitting and optimization.•	Responsive Design: Use a mobile-first approach to ensure responsiveness across all devices.•	Image Optimization: Use WebP format, include size data, and implement lazy loading for images to enhance performance.

Methodology

1. System 2 Thinking: Approach development with analytical rigor. Break down requirements into smaller, manageable parts and thoroughly consider each step before implementation.2. Tree of Thoughts: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.3. Iterative Refinement: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.

Process

1. Deep Dive Analysis: Conduct a thorough analysis of the task at hand, considering technical requirements and constraints.2. Planning: Develop a clear plan outlining the architectural structure and flow of the solution, using `<PLANNING>` tags if necessary.3. Implementation: Implement the solution step-by-step, ensuring adherence to specified best practices.4. Review and Optimize: Review the code to identify areas for potential optimization and improvement.5. Finalization: Finalize the code by ensuring it meets all requirements, is secure, and performs efficiently.

Project Structure and Environment

•	Directory Structure:•	apps/: Contains Next.js and Expo applications.•	packages/: Contains shared code, components, and utilities.•	Environment Management:  •	Use dotenv for environment variable management.  •	Follow patterns for environment-specific configurations in eas.json and next.config.js.•	Generators:  •	Utilize custom generators in turbo/generators for creating components, screens, and tRPC routers using yarn turbo gen.

Output Expectations

•	Code Quality:•	Provide concise, accurate TypeScript code snippets adhering to the guidelines.•	Ensure all code is clear, correct, and production-ready.•	Explanations:•	Include brief explanations to clarify complex implementations when necessary.•	Best Practices:•	Demonstrate adherence to best practices in performance, security, and maintainability.•	Feature Implementations:•	When asked about specific features or components, provide detailed implementations showcasing the integration of multiple parts of the tech stack.

Always refer to the most up-to-date official documentation for each technology used, particularly for Expo, Supabase, and Next.js, as these may evolve rapidly.

Next.js Expo Supabase .cursorrules prompt file

Vittorio D'Alfonso

About .cursorrules prompt file

What you can build

Unified eCommerce Platform: Develop a cross-platform eCommerce platform using the given tech stack, ensuring seamless integration between web and mobile. Utilize a monorepo structure for code sharing and manage product listings, user accounts, and payment gateways using Supabase for backend support.
Healthcare Management App: Create a web and mobile application for healthcare providers to manage patient records, appointments, and telehealth services. Use the monorepo architecture to streamline development, with Expo for mobile functionality and Next.js for web interfaces.
Social Media Platform: Build a social media application that works seamlessly on both desktop and mobile. Leverage Zustand and TanStack React Query for efficient state management, and Supabase for real-time interactions, file uploads, and authentication.
Learning Management System (LMS): Design a cross-platform LMS to deliver online courses with video content, quizzes, and student tracking. Use Next.js for the web platform and Expo for the mobile app, ensuring performance optimization with dynamic imports and lazy loading techniques.
Real-time Collaboration Tool: Develop a collaboration tool for teams to share files, chat, and manage projects in real-time. Use Supabase for authentication and file storage, employing TanStack React Query for real-time updates and Zustand for local state management.
Cross-platform Blogging Platform: Create a blogging platform that provides a rich text editor, content management, and SEO tools. Tailwind CSS and nativewind can be used for cohesive styling between web and mobile versions, with i18next ensuring content localization.
Fitness Tracking App: Build a fitness tracking application that allows users to set goals, track workouts, and share progress. Implement TypeScript and Zod for data validation and ensure a seamless UI experience across platforms using Radix UI and nativewind.
Event Management System: Design a platform for users to create and manage events, sell tickets, and track attendance. Use Prisma for database migrations and tRPC for API interactions, supporting various payment integrations and Supabase for user management.
Remote Education Platform: Develop an educational platform with live classes, assignments, and forums, compatible with web and mobile devices. Utilize Zustand for client state, ensuring real-time synchronization through TanStack React Query.
Decentralized Finance (DeFi) Dashboard: Build a DeFi dashboard for tracking investments and managing portfolios on both web and mobile. Maximize security with custom error handling and schema validation using Zod, and manage financial data using Prisma and Supabase.
Recipe Sharing Application: Create a community-driven recipe sharing app with ratings, comments, and ingredient tracking. Optimize cross-platform performance and ensure data consistency with server-side rendering via Next.js and dynamic imports.
Personal Finance Manager App: Develop an app for users to track expenses, budgets, and financial goals. Seamless synchronization of data across devices using TanStack React Query and an intuitive UI with Tailwind CSS and nativewind for styling coherence.

Benefits

Utilizes a monorepo structure with Turbo for streamlined development, allowing shared code between Next.js and Expo, supporting consistency and efficient cross-platform application deployment.
Employs advanced state management with Zustand for local state and TanStack React Query for server state, enhancing performance through memoization and minimizing reliance on useEffect and setState.
Implements comprehensive optimization techniques, including dynamic imports, code splitting, and image optimizations, ensuring responsive, mobile-first design and efficient resource loading on both web and mobile platforms.

Synopsis

Full-stack developers looking to build efficient, scalable cross-platform web and mobile applications using a unified TypeScript-based codebase will benefit from this prompt.

Overview of .cursorrules prompt

The .cursorrules file outlines the guidelines and best practices for developing cross-platform applications using a specified tech stack. It emphasizes building maintainable and efficient web and mobile applications with a unified codebase. The file defines the architecture and technologies involved, including Next.js, Expo, Supabase, Zustand, and others. It provides detailed instructions on monorepo management with Turbo, coding standards using TypeScript, Zod for validation, and optimization techniques. It also covers state management, internationalization, error handling, performance optimization, testing, and quality assurance. The file serves as a comprehensive guide aimed at ensuring high code quality, consistency, and alignment with modern web and mobile development practices.

Next.js Expo Supabase .cursorrules prompt file

Next.js Expo Supabase .cursorrules prompt file

Next.js Expo Supabase .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Node React Tailwind Guide .cursorrules prompt file

Shopify Polaris Prisma .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components