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.

✌️ Introducing TryShape

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 link

https://tryshape.vercel.app/

The 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.

🔥 Features

TryShape comes with a bundle of features already. You can do the followings with it,

🔢 Listing

List out shapes for you to pick and use.

🏗️ Create and Manage

Create any shapes using an intuitive editor.

Create Polygonal, Circular, Elliptical shapes without knowing the underlying complexities like CSS clip-path.

Add/Remove vertices, join them, drag-drop to position them to create a shape.

Provide your choice of colors, add the contextual information as notes while creating the shapes.

Are you an expert in CSS clip-path? Great, you can add a clip-path value directly and start from there.

📢 Share & Make it Public

You can create a shape and share it with the TryShape community by making it public.

Do you want to keep your creativity private? No worries, that's possible too.

💘 Like

Liked a shape and want to add it to your shape collection? You can do that just with a click. Want to undo? That's supported as well.

✨ Export

Export the shapes to use in your application.

Export the shapes as PNG, JPEG, and SVG files.

Single-Click Copy of the underlying CSS and clip-path property to use directly into your web app.

🔍 Search

Search a shape with key-in search.

🎿 Sort

Sort shapes by most liked, recent, and oldest.

🔑 Authentication & Authorization

Features like export, like, create, edit shapes need you to authenticate with the app. You can use your Gmail or GitHub credentials to authenticate to the app. It is secured and powered by Google Firebase.

📱 Responsive and mobile-friendly

Use TryShape seamlessly from any device.

🍔 Technology Stack

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,

Next JS: The most astonishing React-based framework on the planet

Harper DB: A flexible Data Store

react-icons: One shop for all the icons

react-hot-toast: Super cool toast messages

firebase: Authentication services

date-fns: Date formatting

axios: Makes API calls easy

react-bootstrap: A popular frontend framework built-for React

Styled Components: Visual primitives for the component age

react-clip-path: A homegrown module handles clip-path property in a React app.

react-draggable: Make a HTML element draggable in React

react-loader-spinner: Provides simple React SVG spinner component which can be implemented for async-await operation before data loads to the view

react-switch: A draggable toggle-switch component for React.

downloadjs: Trigger a download from JavaScript

html-to-image: Converts an HTML element to image

Vercel: Best for Hosting a Next.js app

🚊 The Journey

Let's start by talking about the idea and history first. So, here is the flashback.

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 😃.

Design & Implementation

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.

Database

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.

The 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.

The likes table contains the information of which users liked what shapes.

Authentication

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.

APIs & User Interfaces

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.

🦄 Upcoming Features

TryShape has all the potentials to grow further. Here are some of the upcoming features planned(not in any order),

✔️ Add the ability to create a shape using SVG elements to support Curvy Node adjustments.

✔️ Manage your shape collection

✔️ Show Trending shapes

✔️ Import shapes

✔️ Following a contributor.

✔️ PWA(Progressive Web App)

✔️ Accessibility improvements

✔️ Flexible Datastore

✔️ Better Performance

✔️ Tagging a shape

✔️ Cloning a shape

✔️ Provide comment on a shape.

✔️ More authentication mechanisms like Twitter, Facebook, etc.

If you find something is missing, TryShape is listening. Please create a feature request from here.

🤝 Contributing to TryShape

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 🙏.

🙏 Support

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!!!