FastAPI Next.js React Guide .cursorrules prompt file
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.