TypeScript Next.js .cursorrules prompt file

Author: Shreyas Prakash

What you can build

Task Management App: Develop a task management tool with a clean user interface using React, Daisy UI, and Tailwind for styling. Use Next.js App Router for seamless navigation and Drizzle ORM with TypeScript for data management. Implement features like project categorization, task prioritization, and deadline notifications.E-Commerce Platform: Create a scalable e-commerce platform with node.js and Next.js. Use Drizzle ORM for product and user data management. Implement a responsive shopping cart and a secure checkout process. Utilize Daisy UI and Tailwind for a modern shopping experience, and optimize images for better performance.Online Learning Platform: Build a platform for online courses with React and Next.js. Use Drizzle ORM to manage users, courses, and progress tracking. Ensure a responsive design with Tailwind CSS, and implement interactive components like quizzes and discussion forums.Personal Finance Tracker: Design a personal finance tracker using Node.js and React with a Next.js framework. Manage financial data with Drizzle ORM and represent it with graphs and charts using a Tailwind-styled UI. Provide users with budgeting tools and financial insights.Social Networking Site: Construct a social networking site with Next.js and React, employing Drizzle ORM for database interactions. Implement user authentication and messaging features. Use Tailwind CSS for a seamless, responsive design.Real Estate Listing Site: Develop a real estate listing website using Next.js, React, and Drizzle ORM. Enable property searches with filters and sorting, and integrate interactive maps. Style the interface with Daisy UI and Tailwind for a professional look.Event Management System: Create an event management system using Next.js and Node.js, with Drizzle ORM to handle events and attendees data. Implement features like RSVP management and reminders. Style the platform using Daisy UI and Tailwind CSS for an engaging user experience.Job Portal Website: Construct a job portal with Next.js and React, leveraging Drizzle ORM for handling job listings and user profiles. Integrate search functionality and allow users to apply for jobs online. Ensure a responsive experience using Tailwind CSS.Recipe Sharing App: Develop a recipe-sharing platform using Next.js and React, managing data with Drizzle ORM. Implement user-uploaded content and community-rated recipes. Style the user interface with Daisy UI and Tailwind for an intuitive design.Fitness Tracking Application: Build a fitness tracking app with React and Next.js, using TypeScript for strong typing and Drizzle ORM for data management. Implement features like workout logs, progress visualization, and nutrition tracking, with a responsive design from Tailwind CSS.

Benefits

Synopsis

Developers proficient with TypeScript, Node.js, and React can create a web app using the specified tech stack, optimized for both performance and readability, with emphasis on responsive UI using Daisy UI and Tailwind CSS.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developing a TypeScript application using Node.js, Next.js App Router, Drizzle ORM, React, Daisy UI, and Tailwind. It recommends using 'bun' as the package manager and emphasizes the importance of step-by-step planning with detailed pseudocode before writing secure, functional, and efficient code. The file promotes the use of functional and declarative programming patterns, descriptive variable naming, concise syntax, and modularization to enhance code readability. It specifies TypeScript, Daisy UI, and Tailwind CSS usage for styling and encourages performance optimization through server components, dynamic loading, and image optimization. Additionally, it advises on following best practices from the Next.js documentation for data fetching, rendering, and routing.

.cursorrules Content

You are an expert in TypeScript, Node.js, Next.js App Router, Drizzle ORM, React, Daisy UI and Tailwind. Always run bun as a package manager (and not npm)Follow the user's requirements carefully and to the letter.First think step by step - describe your plan for what to build in pseudocode, written down in great detail.Confirm, then write code!Always write code, up to date, bug free, fully functional and working, secure, performant, and efficient code.Focus on readability over being performant.Fully implement all requested functionality.Be sure to reference file names.Be concise. Minimize any other prose.If you think there might not be a correct answer, say so. If you do not know the answer, say so instead of guessing.   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.   TypeScript Usage - Use TypeScript for all code; prefer interfaces over types. - Avoid enums; use maps instead. - Use functional components with TypeScript interfaces.   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.   UI and Styling - Use Daisy UI and Tailwind for components and styling. - Implement responsive design with Tailwind CSS; use a mobile-first approach.   Performance Optimization - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC). - 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.   Key Conventions - Use 'nuqs' for URL search parameter state management. - Optimize Web Vitals (LCP, CLS, FID). - Limit 'use client':  - Favor server components and Next.js SSR.  - Use only for Web API access in small components.  - Avoid for data fetching or state management.   Follow Next.js docs for Data Fetching, Rendering, and Routing.