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)

1721759008122.mp4

Installation

Prerequisites

• Node.js (v14 or higher)
• Yarn or npm

Steps

1. Clone the repository:

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

2. Install dependencies:

   yarn install
   # or
   npm install

Running the Development Server

1. Start the development server:

   yarn dev
   # or
   npm run dev

2. Open 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:

   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:

   git checkout -b feature/your-feature-name

Make Changes

1. Make your changes in the codebase.
2. Commit your changes:

   git add .
   git commit -m "Add your commit message"

Push Changes

1. Push your changes to your forked repository:

   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 - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.