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 as CSS.

Last update: Dec 26, 2022

Overview

Create, Export, Share, and Use any Shapes of your choice.

View Demo · Report Bug · Request Feature

👋 Introducing `TryShape`

TryShape is an opensource 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 as CSS.

🚀 Demo

Here is a quick demo of the app. We hope you enjoy it.

The Demo Link

Liked it? Please give a ⭐️ to TryShape to build its triceps 💪 stronger.

Many Thanks to all the `Stargazers` who has supported this project with stars( ⭐ )

💻 Use TryShape

Please access TryShape using the URL:

https://tryshape.vercel.app/

🔥 Features

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

🔢 Listing Shapes

List out shapes for you to pick and use.

🏗️ Create Shapes

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.

📢 Controlling the Visibility of Shapes

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 Shapes

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 Shapes

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 Shapes

Search a shape with key-in search.

🎿 Sort Shapes

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.

🏗️ How to Set up `TryShape` for Development?

You can run TryShape locally with a few easy steps.

Clone the repository

git clone https://github.com/TryShape/tryshape.git

Change the working directory

cd tryshape

Install dependencies

npm install # or, yarn install

Create .env file in root and add your variables

NEXT_PUBLIC_DB_URL= YOUR_HARPER_DB_DATABASE_URL
NEXT_PUBLIC_DB_AUTHORIZATION= YOUR_HARPER_DB_AUTHORIZATION_ID

NEXT_PUBLIC_FIREBASE_AUTHORIZATION=YOUR_FIREBASE_AUTH_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_PROJECT_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SERNDER_ID=YOUR_FIREBASE_MESSAGING_SERNDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID

Run the app

npm run dev # or, yarn dev

That's All!!! Now open localhost:3000 to see the app.

🍔 Built With

Next JS: The coolest 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 home grown module to handle 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

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

🦄 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 shape using SVG elements to support Curvy Node adjustments.
✔️ Manage your shape collection
✔️ Import shapes
✔️ Following a contributor.
✔️ PWA(Progressive Web App)
✔️ Flexible Datastore
✔️ Better Performance
✔️ Tagging a shape
✔️ Cloning a shape
✔️ Provide comment on a shape.
✔️ More authetication mechanisms like twitter, facebook, etc.

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

🏃‍♀️ Deploy

🤝 Contributing to `TryShape`

Any kind of positive contribution is welcome! Please help us 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.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🙏 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. Don't forget to leave a star ⭐️ before you move away.

If you found the app helpful, consider supporting us with a coffee.

A ⭐️ to TryShape is to build its triceps 💪 stronger.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Tapas Adhikary}

_{Nirmal Kumar}

_{William Zhu}

_{Savio Martin}

_ckuthyar

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments

bug: Clip-path without spaces do not render DraggableVertices

When typing out a clip-path in the ShapeForm, new DraggableVertices will not be created if there is no spaces in between numbers and commas.

Steps to reproduce the behavior: Type out clip-path in the shape form without spaces. The DraggableVertices will not update accordingly.

The vertices on the preview should update even if there is no spaces.
bug

opened by williamzhu17 8
fix: remove console logs on the home page
Describe the bug The console prints an empty array and the number 121 when the home page is loaded

To Reproduce

Open dev tools

Load home page

Expected behavior

Keep these logs on dev environment only.

Screenshots

hacktoberfest
opened by ShaneMaglangit 7
Website fails to load

The website is stuck in an infinite loading state. The request (https://tryshape.vercel.app/api/GET/shapes?type=public) that gets the shapes returns a 504 status code and is not handled properly.

Additionally, there seems to be no lazy loading or pagination of any sort so the page will always make huge requests.

opened by MatijaNovosel 7
New Feature: ✨️ Double tap liking effect

New Feature ✨️ Double tapping on a card item will like that shape. Ui is similar to Instagram. here you go 🤟

This makes the app perfect to interact with users on small mobile devices. Cheers 🍻

opened by saviomartin 6
fixed: made No shape found image responsive

I have made the no-shape found image responsive. Here are the results after fixing the code:

When merging, please do add hacktoberfest-accepted tag 🙏.
hacktoberfest hacktoberfest-accepted

opened by dhairyathedev 4
Trending shapes section @ landing page
Is your feature request related to a problem? Please describe. User doesn't the shapes that are currently trending

Describe the solution you'd like

Keeping the user informed about the shapes that are currently most liked and re-edited quite often.

each of the trending shape should have the owner info and when it was created will motivate the owners to come up with more trending shapes
opened by nirmalkc 4
Infinite Scroll Feature

Is your feature request related to a problem? Please describe.

Currently, on the main page ( all public shapes ) app pulls all shapes from API, I don't think it's a scalable long-term solution,

Now performance is ok and API is not overloaded, but what if we have a thousand shapes or 100 thousand or even a million,

Describe the solution you'd like

I like to implement some kind of pagination, or even better "infinity scroll", that way app will pull only the first few shapes and continue to pull more if needed.

For example, the first 10-20 shapes, and when the user reaches the bottom of the page and then pulls the next 10-20, We also need some unique default sort ( for example createdAtDate because every shape has a unique createdAtDate ) That parameter will be used as 'cursor', for infinity scroll to work

Describe alternatives you've considered

I think that this feature is needed because it is a scalable, long-term solution for handling even millions of records.

Also, 99% of users will only look for the first few shapes anyway, and if they want to see more they just need to keep scrolling.

opened by Shomy032 2
Added PR template and github workflow

I've added and tested the github workflow to greet new user whenever they raise a new issue or raise a pr, they will be greeted and I've also added a PR template to specify what type of changes and describe them.

This PR fixes #124
hacktoberfest-accepted

opened by hasnainmakada-99 2
Typo on the landing page

Hello. There are typos on the landing page under 'Key Features' - 'Share'. The word 'fabulously' is misspelled as 'fabously' and 'creativity' is misspelled as 'ceativity'. The typos are in the Landing.js line 565 and 566.

hacktoberfest

opened by abhishek-munda 2
build(deps): bump next from 10.2.3 to 11.1.1
Bumps next from 10.2.3 to 11.1.1.

Release notes

Sourced from next's releases.

v11.1.1

Core Changes

Next.js swc publish flow: #27984

Ensure config file message is only shown once: #28017

Add missing fields to NextConfig type: #27974

use a shared worker pool for collecting page data and static page generation: #27924

Use @next scope for native packages: #28046

Fix generateBuildId type that can be async function: #28040

Fix image optimization encoding url: #28045

Clean up Document in preparation for streaming: #28032

Render as a concatenation of streams: #28082

Add support for dynamic HTML: #28085

Support suspense in next dynamic: #27611

Handle blob urls in image component: #27975

Bypass webpack compilation for precompiled @next/polyfills-nomodule: #27596

Update util to 0.12.4: #27939

Remove duplicate doctypes: #28089

Fix revalidate for initial notFound: true paths: #28097

Add proper error when failing to load next.config.js: #28099

Fix: wrong link error message: #28127

Add support for Jaeger trace target: #28129

Enable pure client suspense in blocking rendering: #28165

Add entrypoint tracing: #25538

Add module type to build-module trace: #28128

Update to latest babel versions: #28174

Improve jaeger traces: #28168

fix development mode bug with pages with "+" and other special characters: #28122

let loaders automatically infer source map setting: #28204

Avoid fs write next-env.d.ts on read-only filesystems: #28206

Document usage of suspense option of next/dynamic: #28210

Add warning when parent styles break next/image: #28221

Use zen-observable library: #28214

Fix HMR when custom _app or _document is removed: #28227

Add relationship between issuer and module to traces: #28192

Update generating next-server dependencies: #28223

Fix next/image blur placeholder when JS is disabled: #28269

Ensure adding _app/_document HMRs correctly: #28279

upgrade webpack to 5.51.1: #28291

[ESLint] Adds process.exit to next lint success output: #28299

Fix next env vars injection in dynamic: #28309

Add layout to data-nimg attribute: #28312

Add data attribute to script component: #28310

Ensure @babel/core is de-duped when nccing: #28384

Fix forked NODE_OPTIONS except for inspect: #28420

[ESLint] Enable caching by default: #28349

Update test config to leverage swc: #28400

Add missing typescript property to NextConfig: #28459

next/script fix duplicate scripts : #28428

Ensure error is shown correctly for empty headers field: #28430

... (truncated)

Commits

804971f v11.1.1

194d70f v11.1.1-canary.19

36d922f Add apiVersion to config (#28610)

a60690f v11.1.1-canary.18

7afc97c Add CSP to Image Optimization API (#28620)

8711c5c Tests: Remove unnecessary await (#28594)

d209435 Small grammar fixes (#28590)

04cc37f Add docs for using pageExtensions to colocate other files with page component...

f1dbc92 Ensure dev server side errors are correct (#28520)

27c2937 Update with-jest packages and docs (#28209)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 2
ShapeCard Shape Display Incorrect
The ShapeCards on the Browse Now page displays the Shape incorrectly when named a certain word. In this case, the shape's name is "triangle" and has a clip-path that creates a circle. However, the ShapeCard displays a triangle instead of a circle.

To Reproduce Steps to reproduce the behavior:

Go to create a new shape.

Name it "triangle"

Put a CSS clip-path that does not create a triangle

Create the shape

The display of the shape on the card becomes a triangle instead of a circle.

Expected behavior The correct shape is displayed on the shape card.

Shape Data:

Display of the ShapeCard:
bug
opened by williamzhu17 2
More Authentication Mechanisms Feature

I noticed that you have only one form of authentication.

I would like to add a new feature to increase authentication channels through platforms other than Google. With that I would like to know, which ones will be interesting to add in addition to the ones that already exist?

opened by jessica-leoa 1
Increase Performance
Fixes Issue

#107 Increase Performance on the App Page Use the next/image component instead of <img> to automatically optimize image format.

Check List (Check all the applicable boxes)

[x] My code follows the code style of this project.

[x] My change requires changes to the documentation.

[x] I have updated the documentation accordingly.

[x] All new and existing tests passed.

[x] This PR does not contain plagiarized content.

[x] The title of my pull request is a short description of the requested changes.
opened by senali-d 1
fixing typos
Pull Request Template

Changes proposed

Just typos

Check List (Check all the applicable boxes)

[x] This PR does not contain plagiarized content.

[ ] The title of my pull request is a short description of the requested changes.
opened by mersonfufu 1
The name has changed
The correct internet name of YouTube has placed instead of "youtube"

Pull Request Template

Fixes Issue

Changes proposed

Check List (Check all the applicable boxes)

[ ] My code follows the code style of this project.

[ ] My change requires changes to the documentation.

[ ] I have updated the documentation accordingly.

[ ] All new and existing tests passed.

[ ] This PR does not contain plagiarized content.

[x] The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers
opened by Abishethvarman 1
Footer text

Issues

Hey !! In the footer section of the website the font-size too small and anchor tag has underline text-decoration which can be removed.

Screenshot

I can work on that issue if you think this can be fixed.
Thanks

opened by hemant-sw 1

Releases(v1.0-beta)

v1.0-beta(Jul 8, 2021)
It is a beta release of v1.0. This release was made as part of the Hasnode and HarperDB Hackathon in June 2021.

Features Included

Listing Shapes

Create Shapes

Controlling the Visibility of Shapes

Like Shapes

Export Shapes

Search Shapes

Sort Shapes

Authentication & Authorization

Responsive and mobile-friendliness

Source code(tar.gz)
Source code(zip)
tryshape.v1.0-beta.zip(1.29 MB)

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 as CSS.

Related tags

Overview

Create, Export, Share, and Use any Shapes of your choice.

👋 Introducing TryShape

🚀 Demo

Many Thanks to all the Stargazers who has supported this project with stars( ⭐ )

💻 Use TryShape

🔥 Features

🔢 Listing Shapes

🏗️ Create Shapes

📢 Controlling the Visibility of Shapes

💘 Like Shapes

✨ Export Shapes

🔍 Search Shapes

🎿 Sort Shapes

🔑 Authentication & Authorization

📱 Responsive and mobile-friendly

🏗️ How to Set up TryShape for Development?

🍔 Built With

🛡️ License

🦄 Upcoming Features

🏃‍♀️ Deploy

🤝 Contributing to TryShape

🙏 Support

A ⭐️ to TryShape is to build its triceps 💪 stronger.

Contributors ✨

Comments

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

v11.1.1

Core Changes

Fixes Issue

Check List (Check all the applicable boxes)

Pull Request Template

Changes proposed

Check List (Check all the applicable boxes)

Pull Request Template

Fixes Issue

Changes proposed

Check List (Check all the applicable boxes)

Screenshots

Note to reviewers

Issues

Screenshot

I can work on that issue if you think this can be fixed. Thanks

Releases(v1.0-beta)

v1.0-beta(Jul 8, 2021)

Features Included

Owner

TryShape

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

🌀 Insert Awesome Shapes into Your React Site with Ease

This command line helps you create components, pages and even redux implementation for your react project

You can use this CLI Tool to clean your iOS and Android projects and keep them updated.

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Open Source Website where you can manage your information and artworks of your fursona(s)

Notices on a digital platform are quick and easy to access, reduce a lot of paper waste, and one can get notified about the updates and news.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

use this to replace redux,you can use useActions to change context value and useActions return a mutable function collection

A style export tool that live edits and exports code ready to copy / paste

Document Typescript React components with TSDoc and export Storybook-friendly JSON 🤖

Easy and simple to use Radio Buttons for your React Native Application.

Easy to maintain open source documentation websites.

The UI for staking NFTs on Solana. Cardinal staking UI can be treated as an admin interface for stake pools hosted by cardinal-staking as well as a barebones end-user staking UI

JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

⚪ SVG-Powered component to easily create skeleton loadings.

Hello, world! :) Welcome to this project. This is a free web repository that you can use as a blog for your website. This project is dedicated to "Sina Sattari" as an honorary title.

Plock is a responsive masonry layout implementation for React. Very simple to use and easy to understand.

👋 Introducing `TryShape`

Many Thanks to all the `Stargazers` who has supported this project with stars( ⭐ )

🏗️ How to Set up `TryShape` for Development?

🤝 Contributing to `TryShape`

I can work on that issue if you think this can be fixed.
Thanks