Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file
About .cursorrules prompt file
What you can build
- Telloom Interactive Family Tree: Develop an interactive family tree feature within the Telloom app that allows users to visually map out their familial connections and attach video stories to specific family members, enhancing the storytelling and historical connection experience.
- Ancestry Timeline Generator: Create a tool within Telloom that generates a timeline based on user-uploaded videos and stories, providing a chronological view of family history with AI-powered video highlights and key milestones.
- Video Interview Scheduler: Implement a feature that allows users to schedule and conduct video interviews with family members directly through the platform, incorporating calendar integrations and prompts for suggested questions to guide storytelling.
- Virtual Memory Box: Develop a digital memory box feature where users can store and categorize videos, documents, and photos, ensuring these personal artifacts are organized and easily accessible for future generations.
- AI Story Editor: Introduce an AI-powered tool that assists users in editing their video narratives, suggesting edits or enhancements based on storytelling techniques and automatically correcting video quality issues.
- Heritage Language Support: Enhance Telloom by providing language support and translation tools, allowing users to upload and transcribe stories in different languages to preserve multicultural family histories.
- Interactive Tutorials for New Users: Implement a series of interactive onboarding tutorials within Telloom that guide new users through the process of uploading videos, managing their family stories, and utilizing various features of the app.
- Community Story Sharing: Develop a feature that allows users to share select family stories with the broader Telloom community, fostering connections and learning opportunities from diverse family histories.
- Telloom Mobile App: Create a mobile version of the Telloom app that mirrors the functionalities of the web application, with an emphasis on user-friendly design and intuitive navigation tailored for mobile usage.
- Privacy and Security Dashboard: Implement a dashboard within Telloom that allows users to customize their privacy settings, manage access permissions for their stories, and view security logs for peace of mind.
Benefits
- Modern Tech Stack: Integrates Next.js 14, Prisma ORM, and Supabase for robust, scalable application development, emphasizing TypeScript and latest web technologies for full-stack efficiency.
- UI and UX Excellence: Implements Tailwind CSS, Shadcn UI, and Framer Motion for aesthetic, responsive interfaces, alongside a mobile-first approach, enhancing user engagement across devices.
- Comprehensive Code Standards: Emphasizes TypeScript interfaces, functional programming, and structured file organization with robust error handling and consistent naming conventions to ensure maintainable code.
Synopsis
Developers can build a robust, user-friendly web app for storytelling and video sharing, leveraging a modern tech stack focused on performance, maintainability, and best coding practices.
Overview of .cursorrules prompt
The .cursorrules file provides detailed development instructions for building the Telloom web application, which facilitates the sharing of personal histories via videos. The app utilizes a comprehensive technology stack including TypeScript, Next.js, Prisma ORM, Supabase, and Mux, among others. It outlines core principles such as simplicity, best practices, and user-centric design while specifying TypeScript usage, programming patterns, naming conventions, and file structure. The guide emphasizes UI, styling with Tailwind CSS and Framer Motion, backend and authentication with Supabase, video handling with Mux, and subscription management with RevenueCat. It further covers state management, data fetching, optimization, error handling, security, performance, testing, and documentation. The development process follows stages like analysis, planning, implementation, review, and finalization, all designed to create a supportive environment for developers.