ymtech-labs / quadrilateral-drawing

Web interface to manipulate squares or rectangles

UBSTREAM / Quadrilateral Drawing

Web interface to drawing quadrilateral (squares or rectangles)

• Getting Started
• Features
• Directory Structure
• Tech Stack
• Requirements
• Scripts
  • Repository
  • App

Getting Started

• Clone the repo
  git clone -o seed -b master --single-branch https://github.com/ymtech-labs/quadrilateral-drawing.git

Application

• Install PNPM package manager — npm install -g pnpm
• Install project dependencies — pnpm install
• Launch the app — pnpm run dev, it will become available at http://localhost:5173/

Features

INDICATORS

• DONE : ✅ - production
• IN PROGRESS : 🔁 - development
• TO DO : 🚧

RELEASE	DESCRIPTION	STATUS
V0.0.x	🛠️ Settings & Technicals Environnement	✅
V0.1.x	🔲 Draw random-colored squares (or rectangles) with the mouse	✅
V0.2.x	⭕ Double-click on a quadrilateral to rotate it through 360°	✅
V0.3.x	🗑️ At the end of the rotation, remove the quadrilateral	✅
V0.4.x	❌ Batch Quadrilateral Removal on Rotation Completion	🔁

Directory Structure

├── .github — GitHub configuration including CI/CD workflows
├── .vscode — VSCode settings including code snippets, recommended extensions etc.
├── .husky — Git Hooks, for code quality
├── public — Static Asset Handling
├── src — App files
├──── _styles — Sass files of app
├──── components — Components files
├──── helpers — Specific utility functions
├──── types — Type declaration files.
├──── utils — Generic utility function
├────── main.ts — Inject app in index.html
├──── index.html — Application entry point

Tech Stack

Cypress, Vitest

• TypeScript, ESLint, Prettier, PNPM, Vite
• Github Actions, Vercel, Renovate, Gist

Requirements

• Node.js v16 or newer, PNPM package manager
• VS Code editor with recommended extensions

IMPORTANT: Ensure that VSCode is using the workspace versions of TypeScript and ESLint.

Scripts

Repository

• pnpm prepare — Install and configure husky hooks system
• pnpm commit — Run commitizen command line to receive assistance in drafting commit

App

• pnpm dev — Launches the app in development mode on http://localhost:5173
• pnpm build — Compiles and bundles the app for deployment
• pnpm preview — Preview your build app

---

^{Made with ♥ by Younès Manjal.}