{"id":19055316,"url":"https://github.com/dilane3/shapx-client","last_synced_at":"2025-06-26T19:37:18.268Z","repository":{"id":207771480,"uuid":"720004357","full_name":"dilane3/shapx-client","owner":"dilane3","description":"Shapx is a web application that will help you to draw shapes like rectangles, circle, hexagon, diamond and so on.","archived":false,"fork":false,"pushed_at":"2023-11-17T14:36:02.000Z","size":430,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T14:49:43.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://shapx.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dilane3.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-17T11:20:32.000Z","updated_at":"2024-07-23T18:49:14.000Z","dependencies_parsed_at":"2023-11-17T14:59:33.661Z","dependency_job_id":null,"html_url":"https://github.com/dilane3/shapx-client","commit_stats":null,"previous_names":["dilane3/shapx-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dilane3/shapx-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Fshapx-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Fshapx-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Fshapx-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Fshapx-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dilane3","download_url":"https://codeload.github.com/dilane3/shapx-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Fshapx-client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262133425,"owners_count":23264208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T23:43:58.953Z","updated_at":"2025-06-26T19:37:18.240Z","avatar_url":"https://github.com/dilane3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ShapX - Drawing Shapes Application\n\n## Description\n\nCe projet represente la partie UI (Cliente) de l'application SHAPX qui vous permet de réaliser de forme géométrique telles que:\n\n- Carré\n- Rectangle\n- Cercle\n- Ellipse\n- Losange\n- Hexagone\n\nUne version en ligne existe, mais sans serveur et donc sans base de données. Mais il est quand même possible de tester l'application et dessiner des forme géométriques:\n\nURL: [https://shapx.vercel.app/](https://shapx.vercel.app/);\n\n## Technologies Utilisées\n\n- Typescript: Langage de programmation orientée objet\n- React: Library javascript pour la conception des interfaces web\n- KonvaJs: Library javascription utilisé pour le dessins des formes géométriques\n\n## Comment lancer l'application Cliente ?\n\n### 1. Configurer tout d'abord le projet Serveur\n\n- Avant de lancer l'application cliente, il est primordiale que vous configuriez et lanciez l'application serveur en premier car elle devra communiquer avec elle.\n- Suivez donc les instructions présent dans le fichier Readme.md à la racine de ce projet serveur.\n\n### 2. Installer les outils nécessaires\n\nVous avez besoin d'installer Node (un Runtime JS coté serveur) afin d'exécuter du code JS coté serveur.\n\n- Sur Linux (Ubuntu): [Download Node on Linux](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-fr)\n- Sur Windows: [Download Node on Windows](https://nodejs.org/en/download)\n\nL'installation de Node vient avec NPM (Node Package Manager), un outil permettant de gérer les paquets Javascript.\n\n### 3. Installer les dépendances de l'application\n\n- Ouvrir le projet dans le terminal ou la console à la racine du projet.\n- Lancer la commande d'installation de packages:\n\n```bash\n  npm install\n```\n\n- Faudra patienter un moment, le temps de l'installation.\n\n### 4. Lancer le serveur de l'application en local\n\n- En étant dans le même terminal ou console, toujours à la racine, lancer la commande suivante: \n\n\n```bash\n  npm run dev\n```\n\n- C'est ok si vous avez un message présentant l'adresse URL du serveur qui est: **http://localhost:5173**\n\n### 5. Guide d'évaluation\n\n- La description des classes, abstrations, polymorphisme, encapsulation est présente dans le dossier [entities](./src/entities/)\n- J'ai eu à utiliser un design pattern (**Factory Method**) pour la création des objets de type SHAPE dans le dossier [factories](./src/entities/factories/)\n- La partie UI est défini dans le dossier [components](./src/components/)\n\n### 6. Captures d'écrans\n\n- **Page d'accueil**\n\n![Page d'accueil](./src/assets/images/load-files.png)\n\n- **New file**\n\n![New file](./src/assets/images/new-file.png)\n\n- **Rectangle shape**\n\n![Draw rectangle shape](./src/assets/images/shape-draw.png)\n\n- **Change color**\n\n![Change color](./src/assets/images/shape-color.png)\n\n- **Menu**\n\n![Menu](./src/assets/images/menu.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Fshapx-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdilane3%2Fshapx-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Fshapx-client/lists"}