Skip to content

README.md

Latest commit

 

History

History
128 lines (93 loc) · 3.52 KB

README.md

File metadata and controls

128 lines (93 loc) · 3.52 KB

✨ CoCreate

Next.js Tailwind CSS TypeScript Liveblocks

A real-time collaborative creation platform built with Next.js, TypeScript, and Liveblocks.

🌟 Features

✅ Real-time multi-user collaboration
✅ Presence indicators & live cursors (via Liveblocks)
✅ Built with TypeScript for strong type safety
✅ Clean and modular architecture
✅ Ready-to-deploy configuration (Vercel-friendly)
✅ Linting & formatting support with ESLint and Prettier

🧰 Tech Stack

Category Technology
Frontend Framework Next.js 15+
Language TypeScript
Realtime Engine Liveblocks
Styling Tailwind

⚙️ Getting Started

📦 Prerequisites

Before you begin, ensure you have installed:

  • Node.js ≥ 18
  • npm, yarn, pnpm, or bun
  • A Liveblocks account (for collaboration features)

💻 Installation

Clone the repo and install dependencies:

git clone https://github.com/UKbhatt/CoCreate.git
cd CoCreate
npm install

🏃 Run Locally Start the development server:

npm run dev

📁 Project Structure

CoCreate/
├─ .vscode/
├─ app/                  # Next.js App directory
├─ components/           # Reusable UI components
├─ constants/            # App-wide constants
├─ hooks/                # Custom React hooks
├─ lib/                  # Utility and helper functions
├─ public/               # Static assets
├─ types/                # TypeScript types
├─ .gitignore
├─ eslint.config.mjs
├─ liveblocks.config.ts
├─ next.config.ts
├─ postcss.config.mjs
├─ tsconfig.json
└─ package.json

🧑‍💻 Usage

After setup:

1.Run npm run dev to start your local server.
2.Open the app and begin collaborating live.
3.Modify or extend components inside components/ or logic in hooks/.
4.Customize styles and constants as needed.

🛠 Configuration

  • Configure Liveblocks credentials in liveblocks.config.ts

  • Update environment variables (.env.local) if needed:

LIVEBLOCKS_PUBLIC_KEY=your_public_key_here

  • Customize Next.js config in next.config.ts

  • Run linting with:

npm run lint

👨‍💻 Contributing

💡 Want to improve this project? Feel free to contribute!

1.Fork the repository
2.Create a new branch (git checkout -b feature/your-feature)
3.Make your changes and commit (git commit -am 'Added a new feature')
4.Push the branch (git push origin feature/your-feature)
5.Submit a Pull Request

🌍 Contact

💻 Author: Utkarsh
📧 Email: ubhatt2004@gmail.com
🐙 GitHub: https://github.com/UKbhatt