Search for a command to run...
Learn how I have come up with the idea of making TryShape and the journey so far. Please read to know about the tech stack and its future.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Thanks for sharing this informative article, I am a photographer that's why your article is really helpful for me. mylittleone.photography
Thanks Andrew Baisden
WoW! this project is gonna help me and other developers a lot. Really loved the UI. you did an amazing job there.
wang xiao bo , Thanks a lot.
Thanks CapsCode
Oh no, I'm late to the comments! But it's an amazing project and initiative! As expected from the amazing Tapas! 👏 Always building inspiring projects for everyone!👏
Victoria Lo, No Problem!!!
Thanks for looking into it and very glad you liked it. The side hustles shall continue :)
Thanks a lot, Piyush. Glad you found it useful. Please feel free to contribute as well to improve it 🙂
This is really a big project and also helpful.
It will surely come handy whenever I need to work with shapes, nice tool Tapas.
Thanks Favourite Jome, that's cool. Please feel to check the repo as well. You may find it interesting to contribute too. :)
Here is a series to list down articles related to my experience in participating in several Hackathons. You can learn the motivation, process, full journey of those by reading these. Keep Hacking!
WebAPIs Playground is a platform to build, learn, and share about Web APIs. It is an Opensource app for web developers by web developers.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
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 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.
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.
TryShapeAny 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.
That's all for now. Please take good care of yourself & your family. See you soon with my next side hustle. Keep hacking!!!