19
Introducing TryShape: Give Your Creativity a Shape
We all are creative at heart. Any creativity needs support, encouragement, and tools to take the desired shape. As creative web developers, designers we think about using custom graphics for banners, elements, backgrounds, and many more. We can not ignore the need to create our shapes and use them as images, CSS rules, properties in our application.
TryShape
is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even CSS snippets.Here is a quick demo of all the features of
TryShape
as of today,TryShape
app linkThe source code is available on GitHub. Please take a look and contribute.
GitHub Link: https://github.com/TryShape/tryshape
Liked it? Please give a βοΈ to TryShape to build its triceps πͺ stronger.
TryShape
comes with a bundle of features already. You can do the followings with it,Google Firebase
.TryShape
seamlessly from any device.TryShape
is my official entry to the #harperdbhackathon. So undoubtedly, the HarperDB
is part of its tech stack. I had an opportunity to explore some exciting frameworks and libraries while implementing this project. Here is the list of them,Let's start by talking about the idea and history first. So, here is the flashback.
I had created a Hackathon project called
Anko
to provide a mathematics practice platform for kids. When I wanted to expand it with additional features, I found, I need various shapes(like circles, polygon, ellipses, many more) to form exciting questions. This thought made me look into the CSS clip-path property, and I found it exciting. Then, I created a simple npm(node package manager module) to create shapes using clip-path in a React-based project. It's called react-clip-path that is available publicly to use.Naturally, the next step is to enable users to create, manage, share, export, and use shapes. That's how the idea of
TryShape
took place. So from one side hustle to another π.Let's touch upon the design consideration and implementation part briefly here. You can have a look at the code or DM me on Twitter for any detailed understanding. I will be thrilled if you take part in the journey as a contributor.

I had an opportunity to explore HarperDB while writing an article to configure and use it with gatsby. The flexibility, ease of use, and comprehensive documentation make it easy for anyone to start with HarperDB.
After initial setups, I have created a schema and three tables to store data for shapes, likes, and users, respectively.
shapes
table contains the shape metadata information like name, color, createdBy, types, formula(clip-path value), description, visibility(private pr public).
The users
table containers the users who create and manage shapes using TryShape.likes
table contains the information of which users liked what shapes.
TryShape uses Google Firebase to set up social logins with Gmail and GitHub accounts. It is super easy to configure the authentication mechanisms and integrate them with any JavaScript applications. After creating a web project in Firebase, we need to take the configurations to use with the user interface framework.

The
Next.js
is the one-point solution for both APIs and User Interface components. It is an excellent framework to define components, routes, APIs in a single go. I have created APIs to interact with the database tables. It is a safer approach than interacting with HarperDB directly from a React component.The User Interface components are heavily supported by styled-components and several other libraries for icons, loaders, and handling clip-path.
TryShape
has all the potentials to grow further. Here are some of the upcoming features planned(not in any order),If you find something is missing,
TryShape
is listening. Please create a feature request from here.Any kind of positive contribution is welcome! Please help it to grow by contributing to the project.
If you wish to contribute, you can work on any features listed here or create one on your own. After adding your code, please send us a Pull Request. My sincere thanks to everyone already started contributing to it since I have made it public π.
We all need support and motivation.
TryShape
is not an exception. Please give this project a βοΈ to encourage and show that you liked it.If you found the app helpful, consider supporting it with a coffee.
Twitter(@tapasadhikary)
That's all for now. Please take good care of yourself & your family. See you soon with my next side hustle. Keep hacking!!!
19