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.

Overview

All Contributors

logo

name

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

tryshape licence tryshape forks tryshape stars tryshape issues tryshape pull-requests

View Demo · Report Bug · Request Feature

👋 Introducing TryShape

landing

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( ⭐ )

Stargazers repo roster for @TryShape/tryshape

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

  1. Clone the repository
git clone https://github.com/TryShape/tryshape.git
  1. Change the working directory
cd tryshape
  1. Install dependencies
npm install # or, yarn install
  1. 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
  1. Run the app
npm run dev # or, yarn dev

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

🍔 Built With

🛡️ 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

    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

    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

    1. Open dev tools
    2. Load home page

    Expected behavior

    Keep these logs on dev environment only.

    Screenshots

    image

    hacktoberfest 
    opened by ShaneMaglangit 7
  • Website fails to load

    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 tap liking effect

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

    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

    fixed: made No shape found image responsive

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

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

    hacktoberfest hacktoberfest-accepted 
    opened by dhairyathedev 4
  • Trending shapes section @ landing page

    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

    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

    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

    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.

    typos

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

    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

    Dependabot compatibility score

    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

    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:

    1. Go to create a new shape.
    2. Name it "triangle"
    3. Put a CSS clip-path that does not create a triangle
    4. Create the shape
    5. 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: image

    Display of the ShapeCard: image

    bug 
    opened by williamzhu17 2
  • More Authentication Mechanisms Feature

    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

    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

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

    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

    Screenshot 2022-10-15 211245

    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)
Owner
TryShape
Create, Edit, Share, and Use any Shapes of your choice
TryShape
React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

null 2 Jul 14, 2022
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Mateo Leal 70 Nov 28, 2022
An interesting project that can control iRobot Create 2 from a React.js web app, a native mobile app, a wireless Xbox controller, or even a smartwatch

An interesting project that can control iRobot Create 2 from a React.js web app, a native mobile app, a wireless Xbox controller, or even a smartwatch

null 2 Sep 21, 2022
Using this component, you can easily use any number of svg files in your project just with one component.

Dynamic-svg-icons-component Using this component, you can easily use any number of svg files in your project just with one component. Usage/Examples i

Hassan Mohammadi 2 Nov 2, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 14 Jun 30, 2022
Minimalist and lightweight UI library, even with its own markup language and a CSS-In-JS library built into the template, Router and a powerful template reactivity system.

Translations: Português do Brasil Bemtv(Abbreviation of the bird's name Bem-te-vi) is a JavaScript library that brings a new approach to creating inte

Diogo Neves 36 Dec 19, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Çankaya 10 Nov 13, 2022
Codemore is the open platform to help you enhance your problem solving skill, expand your knowledge of data structures and algorithms.

Platform to help you enhance your problem solving skills, expand your knowledge of data structures and algorithms.

Chandragupt Gosavi 2 Jun 8, 2022
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 4.8k Jan 2, 2023
A browser based game that is also mobile friendly so you can finally say "How about THEM apples"

Plant trees to harvest apples. Sell apples to buy upgrades. Sell apples and wares to make the most money and top the leaderboard!

Scott Rohrig 7 May 21, 2022
Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Rowy 4.1k Dec 29, 2022
dt money is a simple and effective alternative for managing your finances, allowing you to register inflows and outflows and organize them in categories.

dt money is a simple and effective alternative for managing your finances, allowing you to register inflows and outflows and organize them in categories.

Gabriel Cezar Muller 2 Sep 2, 2022
Kompass is an easy to integrate, open-source monitoring tool for your Kubernetes cluster.

Need direction on your Kubernetes cluster? Kompass can help! What is Kompass? Kompass is an easy to integrate, open-source monitoring tool for your Ku

OSLabs Beta 103 Oct 30, 2022
Free, Open Source collaborative text annotating platform based on React and Django

OpenContracts The Free and Open Source Document Analysis Platform CI/CD Meta What Does it Do? OpenContracts is an Apache-2 Licensed software applicati

JSIV 13 Jan 6, 2023
Uniswap Clone Interface - a Dapp application that replicates the Uniswap web application interface

This project was developed with ReactJS, being a Dapp application (decentralized application) that replicates the Uniswap web application interface. With this interface it is possible to perform the real login connection with your MetaMask digital wallet previously installed in your browser.

NguyenSonTung982000 8 Dec 2, 2022
Airbotics is an open-source robot mapping platform.

Airbotics is an open-source robot mapping platform. Table of Contents Introduction Community Project Status Contributing Security License Introduction

Airbotics 1 Oct 26, 2021
Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists, so you can meet new artists based on the previous selected one.

Raul Andrade 9 Nov 6, 2022