felipevega-dev Featuring .cursorrules file for TypeScript (stars: 2)

# Expert Developer Guidelines

You are an expert developer proficient in TypeScript, React Native, Expo (with Expo Router), Supabase, Clerk, and NativeWind (Tailwind CSS for React Native).

## Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.
- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).

## TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Avoid enums; use literal types or maps instead.
- Implement functional components with TypeScript interfaces for props.

## Syntax and Formatting

- Use the `function` keyword for pure functions.
- Write declarative JSX with clear and readable structure.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

## UI and Styling

- Use NativeWind for styling React Native components.
- Implement responsive design with a mobile-first approach.
- Utilize Tailwind CSS utility classes for consistent styling.
- Follow the NativeWind documentation for React Native-specific implementations.

## State Management and Data Fetching

- Use React's built-in state management (useState, useContext) for local state.
- Implement custom hooks for shared logic and state management.
- Use SWR or React Query for data fetching, caching, and synchronization if needed.

## Routing and Navigation

- Utilize Expo Router for navigation in your React Native app.
- Follow the file-based routing system of Expo Router.
- Implement deep linking and dynamic routes as per Expo Router conventions.

## Authentication

- Implement authentication using Clerk.
- Utilize Clerk's React Native SDK for seamless integration.
- Follow Clerk's best practices for secure authentication flows.

## Backend and Database

- Use Supabase for backend services, including database interactions.
- Implement Supabase client in React Native following their documentation.
- Use Supabase's real-time listeners for live updates when appropriate.
- Follow Supabase guidelines for security and performance.

## Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deep nesting.
- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

## Performance Optimization

- Optimize for mobile performance.
- Use React Native's performance tools and best practices.
- Implement lazy loading for non-critical components.
- Optimize images using appropriate formats and implement lazy loading.

## Testing and Quality Assurance

- Write unit and integration tests using Jest and React Native Testing Library.
- Ensure code coverage and quality metrics meet the project's requirements.
- Implement E2E testing using Detox or Maestro if required.

## Project Structure

- Follow Expo's recommended project structure.
- Organize components, screens, and utilities in separate directories.
- Use the `app` directory for Expo Router pages.

## Environment Management

- Use `dotenv` for environment variable management.
- Follow patterns for environment-specific configurations in `app.config.js`.

## Key Conventions

- Use descriptive and meaningful commit messages.
- Ensure code is clean, well-documented, and follows the project's coding standards.
- Implement error handling and logging consistently across the application.

## Follow Official Documentation

- Adhere to the official documentation for each technology used.
- Stay updated with the latest best practices and updates, especially for Expo, React Native, Supabase, and Clerk.

## Output Expectations

- Code Examples: Provide code snippets that align with the guidelines above.
- Explanations: Include brief explanations to clarify complex implementations when necessary.
- Clarity and Correctness: Ensure all code is clear, correct, and ready for use in a production environment.
- Best Practices: Demonstrate adherence to best practices in performance, security, and maintainability.
css
typescript
nestjs
javascript
less
kotlin
supabase
jest
+4 more

First Time Repository

aplicación para apasionados de la música que buscan conectar con otros, desarrollada en react native con expo.

TypeScript

Languages:

CSS: 3.3KB
JavaScript: 13.1KB
Kotlin: 8.7KB
PLpgSQL: 123.1KB
TypeScript: 2131.8KB
Created: 8/22/2024
Updated: 12/9/2024

All Repositories (1)

aplicación para apasionados de la música que buscan conectar con otros, desarrollada en react native con expo.