Skip to content

Latest commit

 

History

History
122 lines (89 loc) · 3.44 KB

README.md

File metadata and controls

122 lines (89 loc) · 3.44 KB
Raw

Docs Project (WIP)

Welcome to the Docs Project, a collaborative, real-time document editing web application inspired by Google Docs. This project leverages cutting-edge technologies to provide a seamless and efficient user experience for document creation and collaboration.

Features

  • Real-Time Collaboration: Work on documents with multiple users simultaneously.
  • Rich Text Editing: Built with Tiptap editor for advanced formatting and styling options.
  • Responsive Design: Fully optimized for desktop and mobile devices.
  • Fast and Scalable Backend: Powered by Convex for real-time data synchronization.
  • Modern UI Components: Designed using ShadCN and styled with Tailwind CSS.
  • Type Safety: Ensured through TypeScript.

Demo Video

Watch the project in action:

video.mp4

Tech Stack

Frontend

  • Next.js: React-based framework for server-rendered and statically generated web applications.
  • React 19: Core library for building interactive UIs.
  • TypeScript: Superset of JavaScript that adds static typing.
  • ShadCN: Collection of reusable and accessible UI components.
  • Tailwind CSS: Utility-first CSS framework for styling.

Backend

  • Convex: Backend-as-a-service for real-time data storage and synchronization.

Rich Text Editor

  • Tiptap: Extensible and customizable rich text editor.

Installation

Prerequisites

Make sure you have the following installed on your system:

  • Node.js (>= 18.x)
  • npm or yarn
  • Git

Clone the Repository

git clone https://github.com/yourusername/docs-project.git
cd docs-project

Install Dependencies

npm install
# or
yarn install

Configure Environment Variables

Create a .env.local file in the root directory and add your environment variables:

NEXT_PUBLIC_CONVEX_URL=<your-convex-url>
NEXT_PUBLIC_API_KEY=<your-api-key>

Run the Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 to view the app in your browser.

Project Structure

/docs-project
├── components      # Reusable UI components
├── pages           # Next.js pages
├── styles          # Global and Tailwind CSS styles
├── lib             # Utility functions and helpers
├── convex          # Convex backend configuration
├── public          # Static assets
├── types           # TypeScript types
├── .env.local      # Environment variables
├── next.config.js  # Next.js configuration
└── tailwind.config.js # Tailwind CSS configuration

Contributing

Contributions are welcome! To contribute:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature/your-feature.
  3. Commit your changes: git commit -m 'Add some feature'.
  4. Push to the branch: git push origin feature/your-feature.
  5. Submit a pull request.

Acknowledgements

Happy coding! 🚀