Canvas Image Editor

Version - 1.0.0

Author - Abhay Rohit

License - _Copyright (c) 2022

Table of contents

1. Quick Setup
   1. Prerequisite
   2. Install Packages
   3. Development
2. Packages Used
   1. Core Packages
   2. Frontend Packages
   3. VSCode Extensions
3. Advanced Configuration
   1. File Structure
   2. Languages
   3. Responsive Design

1. Quick Setup

(I) Prerequisite

Install Node.js 12 or Above (https://nodejs.org/en/)

Install Yarn Package Manager (https://classic.yarnpkg.com/lang/en/docs/install/)

(II) Install Packages

yarn

(III) Development

Deploy the app and start Webpack 5 Server:

yarn start

2. Packages used

(I) Core dependencies

• ReactJS (https://reactjs.org/)

• ReactDOM (https://reactjs.org/docs/react-dom.html)

(II) Front-end dependencies

• Sass (https://sass-lang.com/)

(III) VS Code Extensions

• Better Comments (https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments/)

• Color Highlight (https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight/)

• Import Cost (https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost/)

• Prettier Code Formatter (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode/)

3. Advanced configuration

(I) File structure

├── /node_modules/              # NodeJS Packages
├── /src/                       # Source Code
    ├── blocks                  # Full Page Reusable Components
    ├── components              # Functional Display Components
    ├── effects                 # SpecialFX and Animation Data
    ├── math                    # Javascript and Math Calculations
    ├── menu                    # Site Navigation Menu
    ├── pageData                # Dynamic Site Generation JSON
    ├── seo                     # NextJS Head and SEO Tags
    ├── tools                   # Utilities and Tools
    ├── /styles/                # SCSS styles
└── /public/                    # Static Public Directory
    ├── /icons/                 # SVG and other icons
    ├── /locales/               # JSON localizations strings
    ├── /static/                # Static files (fonts, images, videos, etc..)
    ├── manifest.json           # NextPWA Config
    ├── robots.txt              # Google Web Crawler Config
├── .babelrc                    # Babel config
├── .env                        # Environment variables
├── .eslintrc.json              # ESLint Config
├── .gitignore                  # Ignored Files for Github
├── jsconfig.json               # Absolute Import Paths
├── package.json                # Project meta and dependencies
├── README.md                   # Instructions and Usage
├── yarn.lock                   # Yarn Lockfile

(II) Languages

All locales should be stored in ./src/locales/{LANG}/*.json.

(III) Responsive Design

Style Library Used Sass preprocessor.

By default entrypoint is ./src/scss/main.scss

Media Query

Breakpoints :

Device	Size	Description
phone	361px	Phone Size
tablet	767px	Tablet Size
crt	1023px	CRT Square Monitor
laptop	1280px	Laptop Size
desktop	1600px	Desktop Size
tv	1920px	4K TV Size
split	3840px	Multiple Monitors

Usage in SASS File :

@include media('<=phone') { content: "I'm Tiny Phone" } // Query for Devices Smaller Than a Phone
@include media('>phone', '<=tablet') { content: "I'm Average Phone"} // Device Between Phone and Tablet Size
@include media('>tablet', '<=crt') { content: "I'm Small Tablet"} // Between Tablet and CRT Monitor
@include media('>crt', '<=laptop') {content: "I'm Big Tablet and also CRT" } // Between CRT and Laptop Size
@include media('>laptop', '<=desktop') { content: "I'm Small Laptop"} // Between Laptop and Desktop Size
@include media('>desktop', '<=tv') {content: "I'm Small Desktop" } // Between Desktop and TV Size
@include media('>tv','<=split') { content: "I'm Large Desktop and Big TV" } // Greater Than TV but not as much as Split Monitor
@include media('>split') { content: "I'm 4x4 Gaming Setup" } // All Devices Larger than 4K are Covered

(IV) SoundFX

Sound Library used is HowlerJS.

All Sound Effects are stored in public/static/sounds/

(V) JS

All javascript is processed with webpack + Babel.

Webpack config is stored in next.config.js

Babel config is stored in .babelrc

By default, entry point is pages/_app.js

• Read webpack docs.

• Read Babel docs.