React Tailwind Convex .cursorrules prompt file
About .cursorrules prompt file
What you can build
Task Management App - Create a task management application that utilizes Convex for real-time collaboration and storing task data, React for the front-end, and Tailwind CSS for styling. It can support features such as creating, editing, and deleting tasks, and assigning tasks to users.
Real-Time Chat Application - Develop a chat application using Convex for managing messages, React and Vite for a responsive front-end, and Tailwind for styling. The application can support text, emoji, and GIFs using HTTP Actions and the GIPHY API.
E-Commerce Platform - Implement an e-commerce platform using Convex to handle product storage, user authentication, and order management. React and Shadcn will be used for an interactive front-end, and Tailwind CSS for a stylish UI. Stripe integration could be managed using Convex Actions.
Social Media Analytics Dashboard - Build a dashboard that collects and displays social media data using Convex for storage and querying. Use React for the UI, Vite for fast build processes, and Tailwind CSS for layout and design.
Online Learning Management System - Create an LMS using Convex for storing courses, user progress, and content management. React, Vite, and Tailwind CSS will be used to develop a user-friendly interface that supports responsive design.
Bug Tracking System - Develop a bug tracking tool using Convex for managing bug reports, React for the user interface, and Tailwind CSS for styling. Features could include bug categorization, assignment, and real-time status updates.
Custom CRM Tool - Design a customer relationship management tool that uses Convex for data handling, React and Shadcn for the interactive UI, and Tailwind for responsive design. The system can include features for contact management, communication logging, and sales tracking.
Event Management Platform - Construct a platform for managing events using Convex for database management, React and Vite for front-end efficiency, and Tailwind CSS for layout and styling. Features could include event creation, registration management, and attendee tracking.
Collaborative Document Editor - Develop a collaborative document editor using Convex for real-time document synchronization, React for building the UI, and Tailwind CSS for style. The editor can support text formatting, version history, and user collaboration.
IoT Device Management Dashboard - Create a dashboard to manage IoT devices using Convex for storing device data and React for an interactive UI. Tailwind CSS can be used for responsive design, and the application could include features like device status monitoring and configuration management.
Benefits
- Rigorous multi-level code validation ensures suggestions work seamlessly, verified by checking both direct and cascading impacts across the entire codebase.
- Adopts functional and declarative patterns in TypeScript, prioritizing modularization and vivid, action-oriented naming for coherent and understandable code.
- Integrates cutting-edge UI/UX with Shadcn, Radix, and Tailwind for usability, alongside server-driven performance enhancements and responsive design principles.
Synopsis
Web developers familiar with Convex, React, and Tailwind can use this prompt to build a robust web application with real-time data handling, user-friendly interfaces, and optimized performance.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for expert web developers specializing in certain technologies like Convex, React, Vite, Shadcn, and Tailwind. It emphasizes best practices for writing clear, efficient, and reliable TypeScript code. This includes using functional programming patterns, descriptive naming conventions, and prioritizing error handling. The file also details performance optimization strategies, file structuring, and styling preferences, particularly using Shadcn UI, Radix, and Tailwind CSS. Additionally, it covers the use of Convex for data fetching, mutations, actions, HTTP actions, scheduling, cron jobs, and file storage. The rules ensure optimized code and effective state management while adhering to modern development practices.