Optimize Cursor AI Prompt: FastAPI, Next.js & React Guide

FastAPI Next.js React Guide .cursorrules prompt file

100

Emilio Gagliardi

Save

Saved

NEW

FastAPI Next.js React Guide .cursorrules prompt file

You are an expert in Python, FastAPI, Next.js, and ShadCN UI components.

Key Principles

Provide concise, technical responses with accurate Python and JavaScript examples.
Prefer functional, declarative programming; Use classes where appropriate such as FastAPI inputs and outputs and the SQLAlchemy models.
Use modular, reusable components to avoid duplication.
Name variables descriptively with auxiliary verbs (e.g., is_active, has_error).
Use lowercase with underscores for Python and lowercase with dashes for React file names.
Favor named exports for components and utility functions.

Backend (Python/FastAPI)

Use def for pure functions and async def for asynchronous functions.
Pydantic models for input validation, and SQLAlchemy with Alembic for migrations.
Use the RORO (Receive an Object, Return an Object) pattern where appropriate.
Follow a clean structure: routers, sub-routes, utilities, types (models/schemas).
Prioritize error handling: early returns, guard clauses, and custom error types.
Minimize @app.on_event("startup"/"shutdown"); prefer context managers.
Use async for I/O-bound tasks.

Frontend (Next.js/React)

Use functional components and JavaScript for everything.
Install ShadCN UI components via npm.
Implement a simple two-page layout: a dashboard and an editor.
Use Tailwind CSS and Radix UI for styling; adopt a mobile-first approach.
For form validation, use Zod and react-hook-form.
Use dynamic imports for non-critical components.
Ensuring Frontend Doesn't Crash
- The Axios interceptor checks for 503 status codes and displays an alert. You can replace the alert with a more sophisticated UI message if desired.
```import axiosInstance from '../api/axiosInstance';
axiosInstance.get('/projects/')
.then(response => setProjects(response.data))
.catch(error => console.error(error));```
Important. In order to install shadcn-ui, you must run the command npx shadcn-ui@latest init --src-dir from within the frontend directory, but the installer may throw an error if it detects a 'src' directory. Therefore, install shacdn before having composer create directories and files there.

Vercel AI Integration

Use Vercel’s v0 workflow to integrate standalone components.

Performance

Favor async operations and lazy loading for performance.

Python/FastAPI

Use def for pure functions and async def for asynchronous operations.
Use type hints for all function signatures. Prefer Pydantic models over raw dictionaries for input validation.
File structure: exported router, sub-routes, utilities, static content, types (models, schemas).
Avoid unnecessary curly braces in conditional statements.
For single-line statements in conditionals, omit curly braces.
Use concise, one-line syntax for simple conditional statements (e.g., if condition: do_something()).

FastAPI-Specific Guidelines

Use functional components (plain functions) and Pydantic models for input validation and response schemas.
Use declarative route definitions with clear return type annotations.
Use HTTPException for expected errors and model them as specific HTTP responses.
Use Pydantic's BaseModel for consistent input/output validation and response schemas.

Key Conventions

Rely on FastAPI’s dependency injection system for managing state and shared resources.
Prioritize API performance metrics (response time, latency, throughput).
Limit blocking operations in routes:
- Favor asynchronous and non-blocking flows.
- Use dedicated async functions for database and external API operations.
- Structure routes and dependencies clearly to optimize readability and maintainability.

Dependencies

Package	Description
FastAPI	Web framework for building APIs
Uvicorn	ASGI server implementation
SQLAlchemy	Database ORM
Alembic	Database migrations
Pydantic	Data validation and settings management
Jinja2	Templating engine
Psycopg2-binary	PostgreSQL database adapter for Python
Python-Multipart	Handling multipart/form-data for file uploads

Install and configure Next.js.

cd frontend
npx create-next-app@latest . (Optional)
npx shadcn@latest init -d --src-dir
npm install react react-dom axios react-router-dom

Refer to FastAPI, Next.js, and Vercel AI SDK documentation for best practices.

stack:

No items found.

FastAPI Next.js React Guide .cursorrules prompt file

Emilio Gagliardi

About .cursorrules prompt file

What you can build

AI-Powered Code Review Tool: Develop a web application that leverages Vercel AI to analyze and review Python and JavaScript codebases, providing automated feedback, suggestions, and best practice recommendations based on the guidelines outlined. Integration with GitHub could allow for continuous integration and early detection of code issues.
Async API Performance Tracker: Create a FastAPI-based tool to monitor and report on API performance metrics, such as response time and latency. Use SQLAlchemy to store historical data and provide dashboards using Next.js to visualize insights, trends, and potential bottlenecks in API performance.
Modular Component Library: Build a library of reusable ShadCN UI components tailored for fast integration with Next.js applications. The components should follow best practices for accessibility, responsive design, and incorporate Tailwind CSS and Radix UI for styling.
Dynamic Form Builder: Develop a Next.js web application with a drag-and-drop interface for creating forms. Utilize react-hook-form and Zod for validation, and FastAPI for backend logic to manage form submissions and related data storage using SQLAlchemy.
Async Database Query Platform: Offer a web application that allows users to run asynchronous SQL queries on a PostgreSQL database using a FastAPI backend. Provide a Next.js frontend where users can save queries, schedule execution, and view formatted results.
Custom Error Management Dashboard: Implement a backend service in FastAPI for centralizing HTTP error handling, logging, and status monitoring. Create a Next.js frontend admin panel where users can manage error responses, and view logs or statistics.
GraphQL to REST API Converter: Develop a tool to convert GraphQL queries to RESTful endpoints using a FastAPI backend. Provide an interactive Next.js web interface for users to input their GraphQL schemas and visualize the corresponding REST endpoints.
Real-Time Data Synchronization Service: Integrate Vercel AI for predictive synchronization algorithms in a FastAPI service that provides real-time data updates to Next.js clients. Use WebSockets for updating connected clients asynchronously with the latest data.
Authentication & Authorization Module: Design a reusable FastAPI module and companion Next.js package for handling secure authentication and authorization, including JWT support, OAuth providers, and role-based access control with a dashboard for managing user roles.
Automated Migration Generator: Create a CLI tool with FastAPI and Alembic to automatically generate and apply database migration scripts based on SQLAlchemy model changes, and integrate it with a Next.js interface for viewing and managing migrations.

Benefits

Modular architecture: Emphasizes reusability using modular components, routers, and utilities across both backend and frontend.
Pydantic & SQLAlchemy: Harnesses efficient input validation and database handling via Pydantic models and SQLAlchemy with Alembic migrations.
Asynchronous performance: Advocates async I/O in FastAPI and lazy loading in React for optimized performance.

Synopsis

Developers familiar with Python, JavaScript, FastAPI, Next.js, and ShadCN UI can build a modular, performant web application with a robust backend and dynamic, responsive frontend.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developing a web application using Python with FastAPI for the backend and Next.js with ShadCN UI components for the frontend. It emphasizes using modular, reusable components and naming conventions. For the backend, it recommends using Pydantic models for input validation, SQLAlchemy for database operations, and prioritizing error handling and performance with asynchronous programming. The file also covers frontend architecture, suggesting the use of React functional components, Tailwind CSS for styling, and Zod for form validation. Vercel AI integration instructions and performance optimizations through lazy loading and async operations are included. Dependencies and installation steps for setting up the development environment with appropriate tools like FastAPI, SQLAlchemy, and Next.js are outlined.

FastAPI Next.js React Guide .cursorrules prompt file

FastAPI Next.js React Guide .cursorrules prompt file

FastAPI Next.js React Guide .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Go Backend Scalability .cursorrules prompt file

Angular TypeScript .cursorrules prompt file

React Native .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

TypeScript Tailwind Next.js SSR .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Next.js React TypeScript .cursorrules prompt file

Python FastAPI Scalable API .cursorrules prompt file

PyQt6 EEG Processing .cursorrules prompt file

TypeScript Node.js Next.js React UI CSS .cursorrules prompt file

Cursor Tip

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

Cursor Tip

Cursor Tip

Cursor Tip

Build ChatGPT with Python: Cursor AI Tutorial Guide

Create a Chrome Extension Fast: Cursor AI Tutorial

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components