DEV Community

Cover image for I created a shapes drawing app using React called ShapX.
Dilane3
Dilane3

Posted on

I created a shapes drawing app using React called ShapX.

Hello everyone πŸ‘‹πŸΌ, I'm coming here to present to you an application that I created using React that I called ShapX which aims to provide you the possibility to draw shapes like in drawing apps.

What's ShapX ?

well, ShapX is a shapes drawing app that you can use to create forms like: squares, rectangles, circles, ellipses, diamonds and hexagons...

After having drew a shape, it directly calculates some geometric properties like perimeter and area of your shape.

What are the core features ?

You will have the possibility to test it in real live (only on your computer), but globally, ShapX comes with the following features:

  • Creating new drawing file
  • Renaming the file
  • Adding shapes for any available types
  • Changing parameters of the shapes (position, width, height, radius)
  • Changing color of the shape
  • Removing and duplicating shapes
  • Export the file into PNG, JPG and a custom file with .shapx extension
  • Load a SHAPX file

These are the fundamentals πŸ”₯

I did the whole app in just 5 days πŸ˜…πŸ˜…

Let's see it in images

  • Welcome screen

Shapx - Welcome screen

  • Empty drawing screen

Shapx - Empty drawing file

  • Adding one shape

Shapx - Add shapes

  • Changing color of the shape

Shapx - Change color

More

For managing state, I decided to use GX, a lightweight and powerful tool that helps a lot in state management.

It's my own tool that I created 😁😁, and I use it in all my React, Nextjs and React Native applications.

Check the documentation of GX: https://gx.dilane3.com

The app is available to public, and you have the possibility to test and leave comments right here, I will really appreciated it.

Link of the app: https://shapx.dilane3.com

You also have to possibility to access the code on GITHUB, please leaves stars ⭐, it helps a lot.

GITHUB: https://github.com/dilane3/shapx-client

Thanks for reading

Thanks for having read my post πŸ˜‰

Top comments (0)