SketchFlow

SketchFlow is a powerful and intuitive collaborative whiteboard platform designed to bring ideas to life. It provides a seamless environment for brainstorming, visual collaboration, and recording creative processes. With features like real-time collaboration, customizable templates, AI assistance, and exporting options, SketchFlow empowers individuals and teams to transform ideas into actionable plans.

Features

Core Features

• Collaborative Whiteboard: Real-time drawing, writing, and brainstorming with team members.
• Pre-Built Templates: A collection of templates to kickstart your projects.
• Recording and Exporting: Record your whiteboard sessions and export them in formats like PNG, PDF, or MP4.
• AI Assistance: Get suggestions for summarizing content, generating ideas, or creating visuals.

Advanced Features

• Slack, Notion, and Trello Integrations: Connect your whiteboard with productivity tools.
• Offline Mode: Work offline and sync when back online.
• Subscription Plans: Premium features with flexible subscription options.

Payment Integration

Razorpay Setup

1. Create a Razorpay account at razorpay.com
2. Get your API keys from the Razorpay Dashboard
3. Add the following environment variables to your .env file:

   RAZORPAY_KEY_ID=your_key_id
   RAZORPAY_KEY_SECRET=your_key_secret
4. Add the Razorpay script to your HTML:

   <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Cashfree Payment Integration

1. Create a Cashfree account at cashfree.com
2. Get your App ID and Secret Key from the Cashfree Dashboard
3. Add the following environment variables to your .env file:

   CASHFREE_APP_ID=your_app_id
   CASHFREE_SECRET_KEY=your_secret_key
   CASHFREE_API_VERSION=2022-09-01
   CASHFREE_BASE_URL=https://sandbox.cashfree.com/pg  # Use https://api.cashfree.com/pg for production
   
   # Subscription Plans
   PRO_MONTHLY_PLAN_AMOUNT=999
   PRO_YEARLY_PLAN_AMOUNT=9999
4. Add the Cashfree script to your HTML:

   <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>

Testing Payments

• Use Razorpay's test card numbers for development:
  • Card Number: 4111 1111 1111 1111
  • Expiry: Any future date
  • CVV: Any 3 digits
• Use Cashfree's test card numbers for development:
  • Card Number: 4111 1111 1111 1111
  • Expiry: Any future date
  • CVV: Any 3 digits
  • OTP: 123456
• Version Control: Keep track of changes and revert to previous versions as needed.

Tech Stack

• Frontend: React.js/Next.js, TailwindCSS
• Backend: Node.js, WebSocket (for real-time collaboration)
• Database: MongoDB or Firebase
• AI Tools: OpenAI API for AI assistance
• Hosting: Vercel (frontend), AWS/DigitalOcean (backend)

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v16 or later)
• npm or yarn
• MongoDB (if not using Firebase)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/sketchflow.git
   cd sketchflow
2. Install dependencies:

   npm install
   # or
   yarn install
3. Set up environment variables: Create a .env file in the root directory and configure the following variables:

   DATABASE_URL=your_database_url
   OPENAI_API_KEY=your_openai_api_key
4. Start the development server:

   npm run dev
   # or
   yarn dev
5. Open the app in your browser at http://localhost:3000.

Usage

• Sign up or log in using your email or third-party services (Google, Microsoft).
• Start a new whiteboard or choose a template.
• Invite team members to collaborate in real-time.
• Use AI features for suggestions and enhancements.
• Save, record, and export your work.

Contributing

We welcome contributions from the community! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch for your feature or bug fix:

   git checkout -b feature-name
3. Commit your changes and push to your fork:

   git push origin feature-name
4. Open a pull request with a detailed description of your changes.

Roadmap

For a detailed roadmap and future development plans, check out our Plans document.

Key highlights of upcoming features:

• Add more AI-powered tools for text/image suggestions.
• Improve UI/UX with feedback from early users.
• Expand template library.
• Implement offline mode and enhanced exporting options.

License

This project is licensed under the MIT License.

Contact

For support or inquiries, reach out to:

• Email: sh20raj@gmail.com
• GitHub: @sh20raj

---

Start collaborating and bring your ideas to life with SketchFlow!