About .cursorrules prompt file
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
- Prioritize TypeScript interfaces over types; use maps rather than enums, and leverage functional components in a modularized structure to ensure scalability and maintainability.
- Utilize Daisy UI and Tailwind for responsive, mobile-first design, optimizing images for web performance using WebP format and lazy loading techniques.
- Emphasize TypeScript, Node.js, and Next.js App Router; favor server components for data fetching, minimize 'use client', and enhance web vitals like LCP and FID.
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.
