https://github.com/blockbusterdev/canva-paint
canva-paint
https://github.com/blockbusterdev/canva-paint
canva drawing-app eslint javascript jsx jsx-renderer nextjs react-icons react-webco reactjs tailwindcss
Last synced: about 2 months ago
JSON representation
canva-paint
- Host: GitHub
- URL: https://github.com/blockbusterdev/canva-paint
- Owner: blockbusterdev
- Created: 2025-03-02T18:11:08.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-03-21T06:16:52.000Z (2 months ago)
- Last Synced: 2025-03-27T04:31:14.167Z (about 2 months ago)
- Topics: canva, drawing-app, eslint, javascript, jsx, jsx-renderer, nextjs, react-icons, react-webco, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://canva-paint.vercel.app
- Size: 109 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# canva-paint
## Overview
canva-paint is a responsive drawing application built with Next.js, offering server-side rendering, automatic code splitting, and a powerful development environment. The application allows users to draw, select various tools, take picture with their device's camera, import images, and save their creations.
### Code Organization and Comments
The source code is thoroughly documented with comments to provide insights into the functionality, purpose, and usage of various components and functions. Comments are strategically placed to explain complex logic, configurations, and implementation details.
### Key Features
- **Responsive Drawing:** Enjoy a smooth drawing experience on various devices.
- **Tool Selection:** Choose from a set of drawing tools, including pencil, eraser, and more.
- **Image Import:** Easily import images from your device or take a snapshot using the camera(mobile devices only).
- **Save Your Artwork:** Save your creations and share them with others.
## Development Choices
### Framework: Next.js
I chose Next.js for several reasons:
- **Server-Side Rendering (SSR):** Next.js provides server-side rendering, improving performance and SEO.
- **Automatic Code Splitting:** Next.js enables automatic code splitting, enhancing page load times.
- **React Support:** Next.js seamlessly integrates with React, allowing us to leverage the power of React components.
### Libraries
#### `react-icons`
I opted for the `react-icons` library for the following reasons:
- **Extensive Icon Set:** `react-icons` offers a comprehensive set of icons, providing flexibility in design.
- **Ease of Use:** Integrating icons into React components is straightforward with `react-icons`.
- **Consistency:** `react-icons` maintains a consistent API, making it easy to switch between different icon sets.
#### `react-webcam`
The `react-webcam` library is used to integrate webcam functionality into the application, allowing users to take snapshots. It enhances the drawing experience on mobile devices.
## Getting Started
### Prerequisites
1. **Node.js:** Ensure that Node.js is installed on your machine. You can download it from [here](https://nodejs.org/).
### Installation
```bash
git clone https://github.com/Wael-Morjen/canva-paint.git
cd canva-paint
```
### Install dependencies
```bash
npm install
```
### Deployment (Build the Application)
```bash
npm run build
```
### Start the Application
```bash
npm start
```
### Run Locally
```bash
npm run dev
```
Visit http://localhost:3000 in your browser.
### Application already in production on Vercel
Visit [canva-paint](https://canva-paint.vercel.app/)
## Acknowledgments
- [React Icons](https://react-icons.github.io/react-icons/): Used for providing a variety of icons in the application.
- [React Webcam](https://www.npmjs.com/package/react-webcam): Integrated to enable webcam functionality, allowing users to take snapshots.
- [Next.js](https://nextjs.org/): Chosen for building a fast, scalable, and SEO-friendly React application with server-side rendering.
- [Tailwind CSS](https://tailwindcss.com/): Utilized for a utility-first CSS approach to styling components.
- [ESLint](https://eslint.org/): Used for linting the code and maintaining a consistent coding style.
- [GitHub](https://github.com/): Hosts the project and provides version control.
- [Vercel](https://vercel.com/): Used for deploying and hosting the application in production.
## Author
- **Denys Pyroh** - (https://denys-pyroh.vercel.app)