.cursorrules file Next.js Tailwind .cursorrules prompt file
About .cursorrules prompt file
What you can build
Collaborative Project Management Tool: Develop a web-based platform for managing software development projects with real-time collaboration features, leveraging Next.js for the front-end and Apollo GraphQL for efficient data communication.
E-commerce Storefront: Create a full-featured e-commerce website using TypeScript and Next.js for a performant user interface, with a Postgres database for storing product data and TypeORM for server-side logic.
Real-Time Data Dashboard: Build a real-time analytics dashboard that uses Apollo GraphQL to fetch and display data updates, with Tailwind CSS for responsive visualization and Next.js features for server-side rendering.
Blog Platform with Headless CMS: Design a blogging platform with a headless CMS, using Next.js for frontend rendering, while Postgres and TypeORM handle content storage and management.
Online Learning Platform: Develop a platform for online courses utilizing Next.js for the front end, Tailwind for styling, Apollo GraphQL for querying data, and a Postgres database for storing course information and user progress.
Social Media Application: Create a modern social media application with features like user profiles, posts, and media sharing, leveraging the recommended tech stack for both the client-facing and backend services.
Job Board Platform: Design an online job board where employers can post job listings and job seekers can apply, utilizing the tech stack for scalable and efficient data management and interface presentation.
Personal Finance Management System: Build a web application for managing personal finances including budgeting and expense tracking, using Apollo GraphQL for seamless data interactions and Postgres for secure data storage.
Travel Booking Website: Develop a travel booking website with a focus on fast search and booking capability, using server-side rendering for fast initial loads and Apollo GraphQL for managing booking data.
Event Management System: Create an event management and ticketing platform that uses the tech stack to provide real-time updates on event information and quick user interface response times.
Benefits
- Emphasizes minimizing 'use client' usage, advocating server-side features and SSR for data handling.
- Encourages pure functional TypeScript coding and descriptive variable names for code clarity.
- Promotes UI responsiveness using a mobile-first approach with Tailwind CSS for styling.
Synopsis
Developers creating scalable web applications using the specified TypeScript tech stack will benefit from this prompt to establish best practices for maintainable codebases.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for a TypeScript project utilizing a specified tech stack that includes frameworks such as Next.js, Tailwind CSS, and Apollo GraphQL. It outlines a set of rules for maintaining code quality and style for server and client components, advocating for minimizing client-side rendering, writing pure functional code, using descriptive variable names, and following React best practices. State management is addressed by promoting state lifting and context usage, while UI styling emphasizes the use of Tailwind CSS and a mobile-first approach for responsive design. These rules ensure consistency and efficiency in project development.