https://github.com/thre4dripper/boardy-webapp

A personal project of whiteboard application that contains all the necessary tools.
https://github.com/thre4dripper/boardy-webapp

board canvas nextjs nextjs14 react reactjs tools whiteboard

Last synced: 6 days ago
JSON representation

A personal project of whiteboard application that contains all the necessary tools.

• Host: GitHub
• URL: https://github.com/thre4dripper/boardy-webapp
• Owner: Thre4dripper
• License: mit
• Created: 2024-07-21T21:02:07.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-23T14:57:03.000Z (4 months ago)
• Last Synced: 2024-07-23T23:02:43.660Z (4 months ago)
• Topics: board, canvas, nextjs, nextjs14, react, reactjs, tools, whiteboard
• Language: TypeScript
• Homepage: https://boardy-web-app.vercel.app
• Size: 401 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Boardy

Boardy WebApp is a feature-rich drawing and design application built with Next.js. It provides a variety of tools and

functionalities to create and manipulate drawings on a canvas.

## Features

### 1. Drawing Tools

- ✏️ **Pencil**: Draw freehand lines on the canvas.

- ➖ **Line**: Draw straight lines with customizable stroke width.

- 📐 **Polygon**: Draw polygons with a specified number of sides.

- 🟢 **Ellipse**: Draw ellipses and circles.

- ➡️ **Arrow**: Draw arrows with customizable head size and style.

- 📝 **Text**: Add text to the canvas with customizable font size and family.

- 🖼️ **Image**: Add images to the canvas with the option to resize and move them.

- 🧽 **Eraser**: Erase parts of the drawing.

- 🖱️ **Select**: Select and move shapes and lines on the canvas.

### 2. Properties Panel

- 🎨 **Stroke Color**: Choose the color of the stroke for shapes and lines.

- 📏 **Stroke Width**: Adjust the width of the stroke.

- 🖌️ **Stroke Variant**: Select different stroke styles.

- 🎨 **Fill Color**: Choose the fill color for shapes.

- ➡️ **Arrow Heads**: Add arrowheads to lines.

- 📋 **Copy**: Copy the selected shape or line.

- 🗑️ **Delete**: Delete the selected shape or line.

### 3. Undo/Redo

- ↩️ **Undo**: Revert the last action.

- ↪️ **Redo**: Reapply the last undone action.

### 4. Theme Management

- 🌗 **Light/Dark Mode**: Toggle between light and dark themes.

- 💾 **Persistent Theme**: The selected theme is saved in `localStorage` and persists across sessions.

### 5. Export

- 🖼️ **Export as Image**: Export the canvas content as an image file.

## Demo [(LinkedIn)](https://www.linkedin.com/posts/ijlal-ahmad-14aa35202_nextjs-webdevelopment-golang-activity-7221580704273293312-GYwo?utm_source=share&utm_medium=member_desktop)

https://github.com/user-attachments/assets/6513c2aa-5d4f-4b6e-bf3c-4ec63b520b49

## Installation

### Prerequisites

- Node.js (v14 or higher)

- Yarn or npm

### Steps

1. Clone the repository:

    ```bash

    git clone https://github.com/Thre4dripper/Boardy-WebApp.git

    cd Boardy-WebApp

    ```

2. Install dependencies:

    ```bash

    yarn install

    # or

    npm install

    ```

## Running the Development Server

1. Start the development server:

    ```bash

    yarn dev

    # or

    npm run dev

    ```

2. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Collaboration

### Fork the Repository

1. Go to the repository on GitHub.

2. Click the "Fork" button in the top right corner.

### Clone Your Fork

1. Clone your forked repository to your local machine:

    ```bash

    git clone https://github.com/your-username/Boardy-WebApp.git

    cd Boardy-WebApp

    ```

### Create a Branch

1. Create a new branch for your feature or bugfix:

    ```bash

    git checkout -b feature/your-feature-name

    ```

### Make Changes

1. Make your changes in the codebase.

2. Commit your changes:

    ```bash

    git add .

    git commit -m "Add your commit message"

    ```

### Push Changes

1. Push your changes to your forked repository:

    ```bash

    git push origin feature/your-feature-name

    ```

### Create a Pull Request

1. Go to the original repository on GitHub.

2. Click the "New Pull Request" button.

3. Select your branch and submit the pull request.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions

are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use

the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)

from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.