Skip to content

ymtech-labs/quadrilateral-drawing

Repository files navigation

UBSTREAM / Quadrilateral Drawing

semantic-release: angular

Web interface to drawing quadrilateral (squares or rectangles)

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

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

Requirements

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.