https://github.com/akshaypanchivala/edit-verse
EditVerse: A modern, interactive document editor built with React, Vite, and TypeScript, showcasing advanced web development practices.
https://github.com/akshaypanchivala/edit-verse
document-editor reactjs worddoc
Last synced: 15 days ago
JSON representation
EditVerse: A modern, interactive document editor built with React, Vite, and TypeScript, showcasing advanced web development practices.
- Host: GitHub
- URL: https://github.com/akshaypanchivala/edit-verse
- Owner: AkshayPanchivala
- Created: 2025-08-14T03:03:28.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-15T05:37:07.000Z (10 months ago)
- Last Synced: 2025-08-15T06:22:38.591Z (10 months ago)
- Topics: document-editor, reactjs, worddoc
- Language: TypeScript
- Homepage: https://edit-verse.vercel.app
- Size: 845 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# EditVerse
## Project Overview
This project presents a robust and interactive web-based document editor, meticulously crafted to demonstrate proficiency in modern web development practices. Built with **React** and **Vite**, it showcases a component-driven architecture, efficient state management, and a clean, responsive user interface. This application is designed to provide a seamless document creation and editing experience, highlighting key features essential for a production-ready application.
## Key Features
* **Rich Text Editing:** Comprehensive text formatting options including bold, italic, underline, various font sizes, and text alignment. Supports ordered and unordered lists.
* **Page Management:** Seamless handling of document pages, including dynamic page breaks and the ability to add or remove pages.
* **Intuitive User Interface:** A clean and responsive design built with **Tailwind CSS** for rapid styling and maintainability, ensuring a smooth user experience across devices.
* **Modular Component Design:** Well-structured React components promoting reusability, maintainability, and scalability, making the codebase easy to understand and extend.
* **Fast Development Workflow:** Leverages **Vite** for lightning-fast hot module reloading and optimized builds, significantly enhancing developer productivity.
* **TypeScript Integration:** Ensures robust type safety throughout the application, leading to fewer runtime errors and improved code quality and maintainability.
## Technologies Used
* **Frontend:**
* **React.js:** A declarative, component-based JavaScript library for building user interfaces.
* **TypeScript:** A superset of JavaScript that adds static typing.
* **Vite:** A next-generation frontend tooling that provides an extremely fast development experience.
* **Tailwind CSS:** A utility-first CSS framework for rapidly building custom designs.
* **Tooling:**
* **ESLint:** For consistent code quality and style.
* **Prettier:** For automatic code formatting.
## Project Structure
```
edit-verse/
├───.gitignore
├───eslint.config.js
├───index.html
├───package-lock.json
├───package.json
├───postcss.config.js
├───README.md
├───tailwind.config.js
├───tsconfig.app.json
├───tsconfig.json
├───tsconfig.node.json
├───vite.config.ts
├───.git\...
├───node_modules\...
└───src\
├───App.tsx
├───constants.ts
├───index.css
├───main.tsx
├───vite-env.d.ts
├───components\
│ ├───DocumentEditor.tsx
│ ├───DocumentFooter.tsx
│ ├───DocumentHeader.tsx
│ ├───DocumentPage.tsx
│ ├───DocumentToolbar.tsx
│ ├───ErrorBoundary.tsx
│ ├───PageBreakComponent.tsx
│ ├───ToolbarButton.tsx
│ └───ToolbarSeparator.tsx
└───extensions\
└───PageBreak.ts
```
## Getting Started
To get a local copy up and running, follow these simple steps.
### Prerequisites
Ensure you have the following installed on your machine:
* [Node.js](https://nodejs.org/en/download/) (LTS version recommended)
* [npm](https://www.npmjs.com/get-npm) (Node Package Manager, usually comes with Node.js)
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/AkshayPanchivala/edit-verse
cd edit-verse # Navigate into the project directory
2. **Install dependencies:**
```bash
npm install
```
### Running the Development Server
To start the development server with hot-reloading for local development:
```bash
npm run dev
```
This command will typically open the application in your default web browser at `http://localhost:5173`.
### Building for Production
To build the optimized, production-ready version of the application:
```bash
npm run build
```
This will compile and bundle the application into the `dist/` directory, ready for deployment to a static hosting service.
### Code Quality and Formatting
* **Linting:** To check for code style and potential errors:
```bash
npm run lint
```
* **Formatting:** (If Prettier is configured, add a command like `npm run format` or `npx prettier --write .`)
## Future Enhancements (Optional - Consider adding specific ideas)
* **Real-time Collaboration:** Implement WebSocket for multi-user editing.
* **Export Options:** Add functionality to export documents to PDF, DOCX, etc.
* **Cloud Integration:** Save and load documents from cloud storage services.
* **Advanced Formatting:** Introduce more sophisticated text formatting options (e.g., tables, images).