https://github.com/dilane3/shapx-client
Shapx is a web application that will help you to draw shapes like rectangles, circle, hexagon, diamond and so on.
https://github.com/dilane3/shapx-client
Last synced: about 1 year ago
JSON representation
Shapx is a web application that will help you to draw shapes like rectangles, circle, hexagon, diamond and so on.
- Host: GitHub
- URL: https://github.com/dilane3/shapx-client
- Owner: dilane3
- License: mit
- Created: 2023-11-17T11:20:32.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-17T14:36:02.000Z (over 2 years ago)
- Last Synced: 2025-06-10T14:49:43.690Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://shapx.vercel.app
- Size: 420 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# ShapX - Drawing Shapes Application
## Description
Ce projet represente la partie UI (Cliente) de l'application SHAPX qui vous permet de réaliser de forme géométrique telles que:
- Carré
- Rectangle
- Cercle
- Ellipse
- Losange
- Hexagone
Une 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:
URL: [https://shapx.vercel.app/](https://shapx.vercel.app/);
## Technologies Utilisées
- Typescript: Langage de programmation orientée objet
- React: Library javascript pour la conception des interfaces web
- KonvaJs: Library javascription utilisé pour le dessins des formes géométriques
## Comment lancer l'application Cliente ?
### 1. Configurer tout d'abord le projet Serveur
- 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.
- Suivez donc les instructions présent dans le fichier Readme.md à la racine de ce projet serveur.
### 2. Installer les outils nécessaires
Vous avez besoin d'installer Node (un Runtime JS coté serveur) afin d'exécuter du code JS coté serveur.
- Sur Linux (Ubuntu): [Download Node on Linux](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-fr)
- Sur Windows: [Download Node on Windows](https://nodejs.org/en/download)
L'installation de Node vient avec NPM (Node Package Manager), un outil permettant de gérer les paquets Javascript.
### 3. Installer les dépendances de l'application
- Ouvrir le projet dans le terminal ou la console à la racine du projet.
- Lancer la commande d'installation de packages:
```bash
npm install
```
- Faudra patienter un moment, le temps de l'installation.
### 4. Lancer le serveur de l'application en local
- En étant dans le même terminal ou console, toujours à la racine, lancer la commande suivante:
```bash
npm run dev
```
- C'est ok si vous avez un message présentant l'adresse URL du serveur qui est: **http://localhost:5173**
### 5. Guide d'évaluation
- La description des classes, abstrations, polymorphisme, encapsulation est présente dans le dossier [entities](./src/entities/)
- 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/)
- La partie UI est défini dans le dossier [components](./src/components/)
### 6. Captures d'écrans
- **Page d'accueil**
- **New file**
- **Rectangle shape**
- **Change color**
- **Menu**
