About .cursorrules prompt file
What you can build
Project Management Dashboard: A web app to help teams manage projects effectively. It includes task assignment, progress tracking, and collaboration features. Users can customize their dashboards with Tailwind CSS-styled components from Shadcn/UI. Next.js ensures an efficient and responsive interface, while Zustand manages the state of each project. Framer Motion provides smooth transitions and animations. Supabase stores all project-related data, making it accessible and secure.
Social Media Analytics Tool: A platform for influencers and marketers to track and analyze their social media performance. The application uses Tailwind CSS for sleek design and Shadcn/UI components for intuitive user interactions. Next.js delivers a fast user experience, with Zustand handling complex state across charts and graphs. Framer Motion adds engaging visualizations, and Supabase stores historical data for comprehensive insights.
E-Commerce Platform: An online marketplace using Next.js for server-side rendering and powerful routing. Tailwind CSS styles both the user and admin interfaces, ensuring a modern and cohesive look. Shadcn/UI components facilitate product browsing and purchasing processes. Zustand manages the cart and user sessions effortlessly. Framer Motion enhances the shopping experience with lively animations. Supabase acts as a robust backend, handling product inventories and user data.
Personal Finance Tracker: An application that allows users to track their spending and savings effortlessly. It utilizes Tailwind CSS for a clean, user-friendly design and Shadcn/UI for interactive charts and inputs. Next.js ensures app speed and reliability, while Zustand maintains the state of user accounts and financial data. Framer Motion adds fluidity to financial graphs and visualizations. Supabase handles data storage and retrieval securely.
Online Learning Portal: A web platform for hosting and managing online courses, styled with Tailwind CSS for a modern and engaging look. Shadcn/UI provides components for lessons, quizzes, and student interactions. Built with Next.js, the portal is optimized for performance. Zustand keeps track of course progress and student profiles, while Framer Motion livens up the learning process with sleek animations. Supabase manages all course content and user data efficiently.
Event Booking System: An app designed to streamline event management and ticketing. With Tailwind CSS and Shadcn/UI, it offers an attractive and cohesive user interface. Next.js provides fast page loads and smooth navigation, while Zustand efficiently manages booking states and user sessions. Framer Motion enhances user interactions with appealing animations. Supabase supports event scheduling, bookings, and attendee management, ensuring a seamless experience.
Benefits
- Emphasize modularity and scalability with Next.js and TypeScript, ensuring maintainability.
- Prioritize UI consistency with Tailwind CSS and Shadcn/UI, enhanced with Framer Motion animations.
- Harness state management and database needs with Zustand and Supabase integration.
Synopsis
Front-end developers can create a modular, scalable Next.js web application with Tailwind CSS, Shadcn/UI components, TypeScript, Zustand, Supabase, and Framer Motion, ensuring clean, maintainable code.
Overview of .cursorrules prompt
The .cursorrules file outlines a set of development guidelines and best practices for building a project using Tailwind CSS for styling, Shadcn/UI for components, and Next.js as the framework. It emphasizes the use of TypeScript for type safety and requires Zustand for state management, Framer Motion for animations, and Supabase for the database. The file enforces naming conventions such as lowercase for file names, snake_case for variables and functions, camelCase for custom hooks, and PascalCase for components and pages. It also advises housing global types in a specific directory, maintaining separation of concerns, and ensuring the project is modular, scalable, and easy to maintain. Social media icons should be sourced from react-icons, while other icons should use lucide-react. The importance of writing clean, readable, and maintainable code is stressed, along with avoiding unnecessary code repetition.
