🌲 Cypress

A Powerful Real-time Collaboration Platform

An editor with multi cursor functionality using Nextjs 13, Websockets, Supabase Realtime, Real-time presence, Custom Rich text editor, Update profile settings.

📑 Table of Contents

1. ✨ Features that Empower Teams
2. 🛠️ Technology Stack
3. 🚀 Quick Start Guide
4. 🎯 Key Features in Detail
5. 💫 Core Features
6. 🤝 Contributing
7. 📄 License
8. 🌟 Show your support

✨ Features that Empower Teams

Real-time Collaboration

Watch your team's cursors move and text selections update instantly, making remote collaboration feel natural and intuitive.

Workspace Management

Create and organize workspaces effortlessly, providing your team with a structured environment for their projects.

Shared Workspace Experience

Collaborate in real-time with team members in shared workspaces, enhancing productivity and communication.

Smart File Organization

Keep your work organized with intuitive folder management and hierarchical structure.

Document Recovery

Never lose important work with our comprehensive trash and restore functionality.

🛠️ Technology Stack

🎨 Frontend

• Next.js 14 🚀: Server-side rendered React applications
• Tailwind CSS 💅: Utility-first styling framework
• Socket.io Client 🔌: Real-time communication
• Quill ✍️: Rich text editor with cursor support
• Shadcn UI 🎯: Beautifully designed components library
• React Hook Form 📝: Form validation and handling

⚙️ Backend & Infrastructure

• Next Auth 🔐: Authentication with Google and GitHub providers
• Prisma ORM 🗃️: Type-safe database toolkit
• Supabase ⚡: Backend-as-a-service platform
• Socket.io 🔄: WebSocket server implementation

🔧 Development & Utilities

• TypeScript 📘: Static type checking
• Zod ✅: Schema validation
• TailwindCSS Animate 💫: Animation utilities

🚀 Quick Start Guide

📋 Prerequisites

• Node.js 16 or higher ⚡
• npm or yarn 📦
• Git 🔄

Installation Steps

1. Clone the repository

   git clone https://github.com/HarshDodiya1/cypress.git
   cd cypress

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env

   Required environment variables:

    # Database URL
    # The URL to connect to your database.
    DATABASE_URL=
    
    # Supabase URL
    # The URL of your Supabase project. 
    NEXT_PUBLIC_SUPABASE_URL=
    
    # Supabase Anon Key
    # The anonymous key for your Supabase project.
    NEXT_PUBLIC_SUPABASE_ANON_KEY=
    
    # The service role key for your Supabase project.
    SERVICE_ROLE_KEY=
    
    # JWT Secret
    # The secret key used to sign JSON Web Tokens (JWT). This should be a long, random string.
    # generate directly via terminal by running: openssl rand -base64 32
    JWT_SECRET=
    
    # Site URL
    # The URL of your site.
    NEXT_PUBLIC_SITE_URL=
    
    # The secret key used by NextAuth.js for signing and encrypting session tokens. 
    NEXTAUTH_SECRET=
    
    # Google Credentials
    # The client ID and client secret for Google OAuth.
    GOOGLE_CLIENT_ID=
    GOOGLE_CLIENT_SECRET=
    
    # Github Credentials
    # The client ID and client secret for GitHub OAuth.
    GITHUB_CLIENT_ID=
    GITHUB_CLIENT_SECRET=

4. Run database migrations

   npx prisma migrate dev --name init

5. Start the development server

   npm run dev
   # or
   yarn dev

6. Open http://localhost:3000 in your browser

🎯 Key Features in Detail

Live Cursor Tracking

See your teammates' cursors in real-time as they move across the workspace.

Team Collaboration

Easily add team members to your workspace and manage permissions.

Workspace Creation

Set up new workspaces in seconds with our intuitive interface.

File Recovery

Robust trash management system for recovering deleted items.

💫 Core Features

• Real-time Cursor Tracking 🖱️: See collaborators' cursors in real-time
• Live Text Selection ✨: Share and observe text selections instantly
• Workspace Management 📂: Create and organize shared workspaces
• File Organization 📁: Intuitive folder structure and management
• Trash & Restore 🔄: Comprehensive file recovery system
• Authentication 🔐: Secure user authentication with NextAuth
• Responsive Design 📱: Works seamlessly across devices

🤝 Contributing

We welcome contributions to Cypress! Here's how you can help:

1. Fork the repository 🍴
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Show your support

Give a ⭐️ if this project helped you!

---

Built with ❤️ by Harsh Dodiya

Report Bug · Request Feature