About .cursorrules prompt file
What you can build
Interactive Resume Builder - Create a web app where users can build, customize, and share interactive resumes using React with Daisy UI and Tailwind. Implement sections using form components for entering personal information, experience, and skills. Use Framer Motion for smooth animations and transitions between sections.
Collaborative Task Manager - Develop a task management tool using Node.js and Next.js App Router with React for the frontend. Enable real-time collaboration with Socket.io. Implement tasks and project creation with updates, using Tailwind for styling and Daisy UI components for user interface elements.
Animated Portfolio Website - Build a dynamic portfolio template with Next.js showcasing projects and skills. Use Framer Motion to animate project thumbnails and profile sections. Implement responsive layouts with Tailwind and style with Daisy UI, including customizable themes for users.
E-commerce Platform - Construct an e-commerce platform with TypeScript, integrating payment processing and product management. Use Next.js for server-side rendering, React for front-end components, and Tailwind for styling. Include user account features, secure authentication, and a shopping cart system.
Live Chat Support System - Create a Node.js app for businesses to offer live chat support to their customers on their websites. Implement chat functionality using WebSockets, and design a clean UI with Daisy UI and Tailwind. Enable chat history and customer support interaction logs.
Event Management System - Design a comprehensive event management system using Next.js and TypeScript where users can create, manage, and RSVP to events. Use React for interactive components, Tailwind for responsive design, and Framer Motion for engaging transitions.
Learning Management System (LMS) - Build an LMS platform allowing educators to create and publish courses. Use Next.js for server-side rendering, organize course content with a modular React structure, and style interfaces using Daisy UI and Tailwind CSS for a seamless user experience.
Recipe Sharing App - Develop a community-driven recipe platform using React and Node.js. Users can submit recipes, comment, and rate them. Design with Tailwind for mobile-first responsiveness, and use Framer Motion for smooth page transitions and interactions.
Personal Finance Tracker - Create a personal finance management app where users can track income, expenses, and savings. Employ Next.js for efficient data fetching and server-side rendering, along with a user-friendly interface utilizing Daisy UI and Tailwind.
Online Bookstore - Build a simple online bookstore platform with a catalog, author profiles, and review sections. Use TypeScript and React for logic and rendering, Tailwind for mobile-responsive design, and Framer Motion to animate book cards and details transitions.
Benefits
- Emphasize readable, up-to-date TypeScript code with a functional style, focusing on type safety using interfaces and maps over enums.
- Integrate Daisy UI and Tailwind for responsive design, optimizing images and minimizing client-side interactions for performance.
- Implement Next.js best practices: server-side rendering, dynamic imports, and URL state management using 'nuqs'.
Synopsis
Developers can build modern, efficient web applications with TypeScript, Node.js, and Next.js using concise and optimized code practices for improved performance and maintainability.
Overview of .cursorrules prompt
The .cursorrules file provides detailed guidelines and best practices for developing applications using TypeScript, Node.js, Next.js App Router, React, Daisy UI, Tailwind, and Framer Motion. It emphasizes a step-by-step approach to planning and code implementation, aiming for readable, up-to-date, secure, efficient, and bug-free code. The focus is on using functional programming patterns, descriptive naming conventions, and modules over duplication. TypeScript is heavily utilized, preferring interfaces over types and avoiding enums. UI components should be styled using Daisy UI and Tailwind with a mobile-first responsive design. Performance is optimized by minimizing client-side operations, favoring React Server Components, and implementing techniques like dynamic loading and image optimization. Key conventions include utilizing 'nuqs' for URL search parameter management and adhering to Next.js documentation for data handling and routing.
