Next.js Expo Supabase .cursorrules prompt file
About .cursorrules prompt file
What you can build
Unified eCommerce Platform: Develop a cross-platform eCommerce platform using the given tech stack, ensuring seamless integration between web and mobile. Utilize a monorepo structure for code sharing and manage product listings, user accounts, and payment gateways using Supabase for backend support.
Healthcare Management App: Create a web and mobile application for healthcare providers to manage patient records, appointments, and telehealth services. Use the monorepo architecture to streamline development, with Expo for mobile functionality and Next.js for web interfaces.
Social Media Platform: Build a social media application that works seamlessly on both desktop and mobile. Leverage Zustand and TanStack React Query for efficient state management, and Supabase for real-time interactions, file uploads, and authentication.
Learning Management System (LMS): Design a cross-platform LMS to deliver online courses with video content, quizzes, and student tracking. Use Next.js for the web platform and Expo for the mobile app, ensuring performance optimization with dynamic imports and lazy loading techniques.
Real-time Collaboration Tool: Develop a collaboration tool for teams to share files, chat, and manage projects in real-time. Use Supabase for authentication and file storage, employing TanStack React Query for real-time updates and Zustand for local state management.
Cross-platform Blogging Platform: Create a blogging platform that provides a rich text editor, content management, and SEO tools. Tailwind CSS and nativewind can be used for cohesive styling between web and mobile versions, with i18next ensuring content localization.
Fitness Tracking App: Build a fitness tracking application that allows users to set goals, track workouts, and share progress. Implement TypeScript and Zod for data validation and ensure a seamless UI experience across platforms using Radix UI and nativewind.
Event Management System: Design a platform for users to create and manage events, sell tickets, and track attendance. Use Prisma for database migrations and tRPC for API interactions, supporting various payment integrations and Supabase for user management.
Remote Education Platform: Develop an educational platform with live classes, assignments, and forums, compatible with web and mobile devices. Utilize Zustand for client state, ensuring real-time synchronization through TanStack React Query.
Decentralized Finance (DeFi) Dashboard: Build a DeFi dashboard for tracking investments and managing portfolios on both web and mobile. Maximize security with custom error handling and schema validation using Zod, and manage financial data using Prisma and Supabase.
Recipe Sharing Application: Create a community-driven recipe sharing app with ratings, comments, and ingredient tracking. Optimize cross-platform performance and ensure data consistency with server-side rendering via Next.js and dynamic imports.
Personal Finance Manager App: Develop an app for users to track expenses, budgets, and financial goals. Seamless synchronization of data across devices using TanStack React Query and an intuitive UI with Tailwind CSS and nativewind for styling coherence.
Benefits
- Utilizes a monorepo structure with Turbo for streamlined development, allowing shared code between Next.js and Expo, supporting consistency and efficient cross-platform application deployment.
- Employs advanced state management with Zustand for local state and TanStack React Query for server state, enhancing performance through memoization and minimizing reliance on useEffect and setState.
- Implements comprehensive optimization techniques, including dynamic imports, code splitting, and image optimizations, ensuring responsive, mobile-first design and efficient resource loading on both web and mobile platforms.
Synopsis
Full-stack developers looking to build efficient, scalable cross-platform web and mobile applications using a unified TypeScript-based codebase will benefit from this prompt.
Overview of .cursorrules prompt
The .cursorrules file outlines the guidelines and best practices for developing cross-platform applications using a specified tech stack. It emphasizes building maintainable and efficient web and mobile applications with a unified codebase. The file defines the architecture and technologies involved, including Next.js, Expo, Supabase, Zustand, and others. It provides detailed instructions on monorepo management with Turbo, coding standards using TypeScript, Zod for validation, and optimization techniques. It also covers state management, internationalization, error handling, performance optimization, testing, and quality assurance. The file serves as a comprehensive guide aimed at ensuring high code quality, consistency, and alignment with modern web and mobile development practices.