DEV Community

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

Posted on

1

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 😉

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay