TypeScript Next.js React .cursorrules prompt file

Dang Phung

NEW

TypeScript Next.js React .cursorrules prompt file

Monorepo TypeScript Development Guidelines

You are an expert in TypeScript, Node.js, Next.js App Router, React, Express, Vite, Shadcn UI, Radix UI, Tailwind, MongoDB, and API development. You're working on a monorepo project with multiple services.

Monorepo Structure and Management

Organize the monorepo into three main directories: express-services, nextjs-apps, and react-vite-apps.
Use a package manager like Yarn or npm workspaces for managing dependencies across the monorepo.
Implement a shared tsconfig.json at the root level with service-specific extends.
Use Lerna or Nx for managing the monorepo, versioning, and running scripts across multiple packages.

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: exported component, subcomponents, helpers, static content, types.

Naming Conventions

Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.
Use consistent naming across services (e.g., UserService in Express and Next.js).

TypeScript Usage

Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Share types and interfaces across services when possible, placing them in a common types directory.

Syntax and Formatting

Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use declarative JSX.
Maintain consistent formatting across all services using tools like Prettier.

UI and Styling

Use Shadcn UI, Radix, and Tailwind for components and styling in Next.js and React apps.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Create a shared component library that can be used across Next.js and React Vite apps.

Performance Optimization

Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC) in Next.js.
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Implement caching strategies for API responses in Express and Next.js API routes.

API Development

Use Express for standalone API services.
Implement RESTful principles and follow OpenAPI specifications.
Use middleware for common functionalities like authentication, logging, and error handling.
Implement rate limiting and security best practices.

Database Integration

Use MongoDB as the primary database.
Implement a data access layer to abstract database operations.
Use Mongoose for MongoDB object modeling in Node.js environments.
Implement database connection pooling for optimal performance.

Key Conventions

Use 'nuqs' for URL search parameter state management in Next.js apps.
Optimize Web Vitals (LCP, CLS, FID) for all front-end applications.
Limit 'use client' in Next.js:
Favor server components and Next.js SSR.
Use only for Web API access in small components.
Avoid for data fetching or state management.

Service-Specific Guidelines

Express Services

Organize routes, controllers, and services in separate directories.
Implement proper error handling and logging.
Use environment variables for configuration.

Next.js Apps

Follow Next.js docs for Data Fetching, Rendering, and Routing.
Implement API routes for backend functionality when appropriate.
Use Next.js Image component for optimized image loading.

React with Vite Apps

Optimize bundle size using Vite's built-in features.
Implement code splitting and lazy loading for optimal performance.
Use environment variables for configuration management.

Testing and Quality Assurance

Implement unit tests for all services using Jest.
Use React Testing Library for component tests in Next.js and React apps.
Implement integration tests for API endpoints.
Use GitHub Actions or similar CI/CD tools for automated testing and deployment.

Documentation

Maintain comprehensive README files for each service and at the root level.
Use JSDoc comments for functions and components.
Keep API documentation up-to-date, preferably using tools like Swagger.

Follow these guidelines to ensure consistency, maintainability, and optimal performance across all services in your monorepo.

TypeScript Next.js React .cursorrules prompt file

Dang Phung

About .cursorrules prompt file

What you can build

Monorepo Management Tool for TypeScript Projects: Develop a tool or service to automate the setup and management of TypeScript monorepos using Lerna or Nx, with preset configurations for express-services, nextjs-apps, and react-vite-apps.
Tailwind CSS Component Library: Create a shared component library using Shadcn UI, Radix UI, and Tailwind that can be integrated into Next.js and React Vite apps for consistent UI styling across a monorepo.
TypeScript Interface Sharing Service: A tool for sharing and managing TypeScript interfaces and types across multiple services within a monorepo, ensuring consistency and reducing duplication.
Online Linter and Formatter for Consistent Code Style: Provide a web-based service that automatically applies consistent Prettier and ESLint configurations based on these guidelines for typescript codebases.
CI/CD Workflow for Monorepos using GitHub Actions: Develop a pre-configured CI/CD pipeline template using GitHub Actions to automate testing, integration, and deployment across complex monorepo structures.
Next.js API Optimization Service: Create a service for optimizing Next.js API performance that implements caching strategies, rate limiting, and dynamic loading of components.
Responsive Design Checker: A tool that tests and ensures all components in Next.js and React Vite apps adhere to responsive design principles using a mobile-first approach with Tailwind CSS.
Database Management Console for MongoDB with Mongoose: Develop a tool to visually manage MongoDB objects using Mongoose schema abstraction, providing an intuitive interface for database operations within TypeScript monorepos.
REST API Documentation Generator: Offer a service that automatically generates and updates REST API documentation conforming to OpenAPI specifications, integrated with Express.js services.
Automated Codebase Analyzer for Performance Metrics: Provide a tool that analyzes a monorepo's codebase to identify and suggest optimizations related to Web Vitals like LCP, CLS, and FID.
Functional Programming Playground for TypeScript: An interactive platform for learning and experimenting with functional and declarative programming patterns in TypeScript as outlined in the guidelines.
Environment Variable Configuration Manager: A service that securely manages and injects environment variables into multiple services within a monorepo, useful for handling configuration in Express, Next.js, and Vite environments.
Error Handling Middleware Pack for Express: Develop a collection of pre-built middleware for common error handling, logging, and authentication functionalities to plug into Express services.
SEO and Performance Optimization Tool for Next.js Apps: A service to analyze SEO and performance metrics for Next.js applications, providing actionable recommendations to optimize server components.
Automated Test Coverage Analyzer: Develop a service that integrates with Jest and React Testing Library to provide a comprehensive report on test coverage across different ts services in a monorepo.

Benefits

Comprehensive monorepo structure, leveraging Lerna or Nx for efficient management, versioning, and script execution across packages.
Enforces a mobile-first, responsive strategy utilizing Shadcn UI, Radix, and Tailwind for consistent styling.
Emphasizes performance with React Server Components, dynamic loading, and comprehensive caching for API responses.

Synopsis

Developers creating a scalable and maintainable TypeScript-based monorepo with multiple services would benefit, enabling them to standardize structure, coding style, and optimize performance using these guidelines.

Overview of .cursorrules prompt

The .cursorrules file provides a comprehensive set of TypeScript development guidelines for a monorepo project with multiple services. It covers a variety of areas essential for efficient development within a monorepo, including monorepo structure and management, code style, naming conventions, TypeScript usage, syntax and formatting, UI styling, performance optimizations, API development, database integration, and service-specific guidelines for Express services, Next.js apps, and React with Vite apps. Additionally, it details testing and quality assurance practices, as well as documentation standards to ensure consistency and maintainability across the entire project. The guidelines emphasize modern engineering practices such as functional programming, shared configurations, and the use of consistent naming and styling conventions.

TypeScript Next.js React .cursorrules prompt file

TypeScript Next.js React .cursorrules prompt file

TypeScript Next.js React .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Python Pytest Typer .cursorrules prompt file

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

React TypeScript Care Project .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .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

ES Module Node.js Guidelines .cursorrules prompt file

Next.js TypeScript .cursorrules prompt file

Optimize Rell Blockchain Code .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