NEW

Next.js Expo Tailwind CSS .cursorrules prompt file

Dishify Project Guidelines

Project Overview

Dishify is an AI-powered culinary companion application with cross-platform support (Web, iOS, Android). It provides instant recipe generation, ingredient lists, and smart shopping features.

Tech Stack

Next.js (14.2.7) for web application
Expo (SDK 51.0.31) for mobile applications
React Native (0.74.2) for cross-platform development
Tailwind CSS (3.4.4) for styling
tRPC (11.0.0) for type-safe API communication
Cloudflare Workers (3.73.0) for serverless backend with Hono
Cloudflare D1 for database
Supabase for authentication
TypeScript (5.5.4) as the primary language

Project Structure

apps/
expo/: Expo mobile app
next/: Next.js web app
packages/
api/: Backend API and database schema
app/: Shared application logic
ui/: Shared UI components
data_utils/: Utility scripts for preparing recipe data for the database

Code Style and Conventions

TypeScript is used for type safety across the project.
A functional programming approach is followed where possible.
Arrow functions are used for component definitions and callbacks.
const is used for variable declarations unless reassignment is necessary.
async/await is used for asynchronous operations.
ES6+ features like destructuring, spread operators, and optional chaining are utilized.

File Naming Conventions

kebab-case is used for file names (e.g., global-error.tsx).
PascalCase is used for component names (e.g., HomeScreen.tsx).
.tsx extension is used for React components and .ts for plain TypeScript files.
index.tsx is used for main component files in a directory.

Styling

Tailwind CSS is used for styling components.
Custom theme is defined in @dishify/ui/src/theme.js.
nativewind is used for React Native styling.

State Management

React Query is used for server state management.
Jotai is used for client-side state management.

API and Data Fetching

tRPC is used for type-safe API communication.
API routes are defined in packages/api/src/routes/.
React Query hooks are used for data fetching and caching.

Error Handling and Logging

Error boundaries are implemented for graceful error handling.
React <Suspense> boundaries are used for handling loading states.
Best practices include:

Catching and handling errors at appropriate levels
Providing user-friendly error messages
Logging errors for debugging purposes

Testing

Unit tests are implemented for critical functions and components.
Jest is used as the testing framework.

Build and Deployment

GitHub Actions are used for CI/CD pipelines.
EAS (Expo Application Services) is used for mobile app builds and submissions.
The web app is deployed to Cloudflare Pages.
The backend is deployed to Cloudflare Workers.

Environment Variables

.env.local is used for local development.
Appropriate prefixes are used for different platforms (e.g., NEXT_PUBLIC_ for Next.js, EXPO_PUBLIC_ for Expo).

Code Quality Tools

Biome is used for linting and formatting.
Biome rules are configured in biome.json.
The linting style enforces consistent code formatting, proper naming conventions, and best practices for React and TypeScript development.

Performance Optimization

React.memo is used for component memoization when necessary.
useCallback() is utilized for optimizing callback functions.
Code splitting and lazy loading are implemented for better performance.

Commenting Style

JSDoc-style comments are used for functions, classes, and interfaces in TypeScript files.
Single-line comments (//) are used for brief explanations or TODO notes.
Multi-line comments (/_ _/) are used for longer explanations or temporary code disabling.
React components are documented with a brief description above the component definition.
Complex logic or algorithms are explained with inline comments.
Comments are kept concise and focus on explaining "why" rather than "what" when the code is not self-explanatory.
For API routes, each endpoint is documented with its purpose, parameters, and return type.

When providing code snippets or recommendations, always include appropriate comments following these guidelines to maintain consistency with the existing codebase.

Accessibility

Proper accessibility attributes are used in components.
The application is tested with screen readers and keyboard navigation.

When providing recommendations or discussing code implementation, please adhere to these guidelines to maintain consistency across the project.

stack:

Next.js Expo Tailwind CSS .cursorrules prompt file

Kevin Kidd

NEW

Python FastAPI Scalable API .cursorrules prompt file

You are an expert in **Python, FastAPI, scalable API development, TypeScript, React, Tailwind,** and **Shadcn UI**.

### Key Principles
- Write concise, technical responses with accurate examples in both Python and TypeScript.
- Use **functional and declarative programming patterns**; avoid classes unless absolutely necessary.
- Prefer **iteration and modularization** over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `is_active`, `has_permission`, `isLoading`, `hasError`).
- Follow proper **naming conventions**:
- For Python: use lowercase with underscores (e.g., `routers/user_routes.py`).
- For TypeScript: use lowercase with dashes for directories (e.g., `components/auth-wizard`).

### Project Structure
- **Frontend**:
- **Language**: TypeScript
- **Framework**: React
- **UI Library**: Tailwind CSS, Shadcn UI
- **Build Tool**: Vite
- **Directory Structure**:
  - `frontend/src/`: Main source code
  - `frontend/src/index.html`: Main HTML file
  - Configuration Files:
   - `vite.config.ts`
   - `tsconfig.json`
   - `tailwind.config.js`
   - `postcss.config.js`
  - **Docker Files**:
   - `Dockerfile`
   - `Dockerfile.dev`

- **Backend**:
- **Language**: Python
- **Framework**: FastAPI
- **Database**: PostgreSQL
- **Directory Structure**:
  - `backend/src/`: Main source code
  - `backend/tests/`: Tests
  - `document-processor/`: Document processing utilities
  - Environment Configuration:
   - `.env` / `.env.example`: Environment variables
  - Database Configuration:
   - `alembic.ini`
   - `ddialog.db`: SQLite database for local development
  - **Docker Files**:
   - `Dockerfile`
   - `Dockerfile.dev`

### Code Style and Structure

**Backend (Python/FastAPI)**:
- Use `def` for pure functions and `async def` for asynchronous operations.
- **Type Hints**: Use Python type hints for all function signatures. Prefer Pydantic models for input validation.
- **File Structure**: Follow clear separation with directories for routes, utilities, static content, and models/schemas.
- **RORO Pattern**: Use the "Receive an Object, Return an Object" pattern.
- **Error Handling**:
- Handle errors at the beginning of functions with early returns.
- Use guard clauses and avoid deeply nested if statements.
- Implement proper logging and custom error types.

**Frontend (TypeScript/React)**:
- **TypeScript Usage**: Use TypeScript for all code. Prefer interfaces over types. Avoid enums; use maps instead.
- **Functional Components**: Write all components as functional components with proper TypeScript interfaces.
- **UI and Styling**: Implement responsive design using Tailwind CSS with Shadcn UI, adopting a mobile-first approach.
- **Performance**:
- Minimize `use client`, `useEffect`, and `setState` hooks. Favor server-side rendering where possible.
- Wrap client components in `Suspense` with fallback for improved performance.

### Performance Optimization

**Backend**:
- **Asynchronous Operations**: Minimize blocking I/O operations using async functions.
- **Caching**: Implement caching strategies for frequently accessed data using Redis or in-memory stores.
- **Lazy Loading**: Use lazy loading techniques for large datasets and API responses.

**Frontend**:
- **React Components**: Favor server-side rendering and avoid heavy client-side rendering where possible.
- **Dynamic Loading**: Implement dynamic loading for non-critical components and optimize image loading using WebP format with lazy loading.

### Project Conventions

**Backend**:
1. Follow **RESTful API design principles**.
2. Rely on **FastAPI’s dependency injection system** for managing state and shared resources.
3. Use **SQLAlchemy 2.0** for ORM features, if applicable.
4. Ensure **CORS** is properly configured for local development.
5. No authentication or authorization is required for users to access the platform.

**Frontend**:
1. Optimize **Web Vitals** (LCP, CLS, FID).
2. Limit `use client` hooks to small, specific components for Web API access.
3. Use **Docker** for containerization and ensure easy deployment.

### Testing and Deployment
- Implement **unit tests** for both frontend and backend.
- Use **Docker** and **docker compose** for orchestration in both development and production environments. Avoid using the obsolete `docker-compose` command.
- Ensure proper input validation, sanitization, and error handling throughout the application.

stack: