Wael-Morjen / canva-web-app

A responsive drawing application built with Next.js, offering server-side rendering, automatic code splitting, and a powerful development environment. Users can enjoy a smooth drawing experience, choose from various tools, import images, and save their creations. Developed with Next.js, Tailwind CSS, React Icons and React webcam

canva web app

Overview

Canva web app 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.

Installation

git clone https://github.com/Wael-Morjen/canva-web-app.git
cd canva-web-app

Install dependencies

npm install

Deployment (Build the Application)

npm run build

Start the Application

npm start

Run Locally

npm run dev

Visit http://localhost:3000 in your browser.

Application already in production on Vercel

Visit canva web app

Acknowledgments

• React Icons: Used for providing a variety of icons in the application.
• React Webcam: Integrated to enable webcam functionality, allowing users to take snapshots.
• Next.js: Chosen for building a fast, scalable, and SEO-friendly React application with server-side rendering.
• Tailwind CSS: Utilized for a utility-first CSS approach to styling components.
• ESLint: Used for linting the code and maintaining a consistent coding style.
• GitHub: Hosts the project and provides version control.
• Vercel: Used for deploying and hosting the application in production.

Author

• Wael Morjen - GitHub Profile