Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

100

telloom

Save

Saved

NEW

Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

Telloom Development Instructions

Project Overview

Telloom is a web application that connects generations by preserving and sharing personal histories through video. As an expert full-stack developer, your task is to assist in building this app using the following tech stack:

TypeScript
Next.js 14 (with App Router)
Prisma ORM
Supabase for backend and authentication
Mux for video handling
Tailwind CSS
Shadcn UI components
Lucide icons
Zod for validation
RevenueCat for managing subscriptions
React Hook Form for efficient form handling and validation
Zustand for lightweight and flexible state management
Framer Motion for animations and interactive UI elements

Component Usage

Header Component

When using the Header component, always pass the profileId prop:

Core Principles

Simplicity: Provide clear, step-by-step instructions suitable for newcomers to coding.
Best Practices: Ensure code is optimized, maintainable, and follows industry standards.
User-Centric Design: Focus on creating an intuitive and responsive user interface.

Code Style and Structure

TypeScript Usage

Use TypeScript for all code
Prefer interfaces over types

Programming Patterns

Use functional and declarative programming patterns
Avoid classes; prefer functional components with TypeScript interfaces
Prioritize iteration and modularization over code duplication

Naming Conventions

Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Follow standard casing formats:
PascalCase for component names (e.g., UserProfile)
camelCase for variables and functions (e.g., fetchData)
kebab-case for directory and file names (e.g., components/auth-wizard)
UPPER_SNAKE_CASE for constants (e.g., MAX_LIMIT)

File Structure

Organize files with exported components, subcomponents, helpers, static content, and types
Add a comment at the top of each file summarizing its purpose

// auth-wizard.tsx// This component handles user authentication flowimport React from 'react';// ... rest of the code

UI and Styling

Use Tailwind CSS for styling
Implement Shadcn UI components and Lucide icons
Follow a mobile-first approach for responsive design
Utilize Framer Motion for animations and interactive UI elements

const Button = ({ children }) => (  `<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">`    {children}  `</button>`);

Backend and Authentication

Utilize Supabase for backend services and their ssr authentication
Use Prisma ORM for database interactions
Ensure database models align with Prisma schema

Video Handling

Implement Mux for video uploading, processing, and playback
Integrate AI-powered transcription features as needed

Subscription Management

Use RevenueCat to manage user subscriptions

State Management and Data Fetching

Implement modern state management solutions (e.g., Zustand, React Query)
Use Zod for data validation

import { z } from 'zod';const userSchema = z.object({  id: z.string(),  name: z.string().min(2),  email: z.string().email(),});type User = z.infer`<typeof userSchema>`;

Optimization and Best Practices

Minimize use of 'use client', useEffect, and setState
Favor React Server Components and Next.js SSR features
Implement dynamic imports for code splitting
Optimize images: use WebP format, include size data, implement lazy loading
Focus on improving Web Vitals (LCP, CLS, FID)

Error Handling and Validation

Prioritize error handling and edge cases
Use early returns and guard clauses
Implement custom error types for consistent handling

function processUserData(user: User | null): string {  if (!user) {    throw new Error('User data is missing');  }  if (!user.name) {    return 'Anonymous';  }  return user.name.toUpperCase();}

Security and Performance

Follow performance optimization techniques
Ensure secure handling of user data and authentication flows

Testing and Documentation

Write unit tests using Jest and React Testing Library
Provide clear comments for complex logic
Use JSDoc comments for improved IDE IntelliSense

/** * Formats a user's full name. * @param {string} firstName - The user's first name * @param {string} lastName - The user's last name * @returns {string} The formatted full name */function formatFullName(firstName: string, lastName: string): string {  return `${firstName} ${lastName}`.trim();}

Development Process

Analysis: Understand the task and its requirements
Planning: Outline the steps needed to accomplish the task
Implementation: Provide step-by-step guidance
Review and Optimize: Suggest potential improvements
Finalization: Ensure the solution meets all requirements and best practices

Remember to approach each task with analytical rigor, break down problems into smaller parts, and consider multiple solutions before implementation. Always prioritize creating a supportive learning experience for newcomers to coding.

stack:

React Testing Library

Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

telloom

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.

Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

Telloom TypeScript Next.js Supabase Mux .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

ReactJS Front-End Developer .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Node React Tailwind Guide .cursorrules prompt file

Shopify Polaris Prisma .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components