Giter VIP home page Giter VIP logo

shorten-club-frontend's Introduction

URL shortener to voice for Clubhouse - shorten.club

Yes, yes, yes, and yes, I know it doesn't convert links into the voice.

shorten.club converts links or note buckets into a readable 6-digit number, but why?

Background - What is Clubhouse?

In short: Clubhouse is an audio-based social media app. The company describes itself as "a new type of social product based on a voice that allows people everywhere to talk, tell stories, develop ideas, deepen friendships, and meet interesting new people around the world." Basically, you can jump in and out of different chats, on different subjects, in something akin to a live, free-flowing podcast. You can simply listen or choose to throw in your thoughts. Imagine a cocktail party or, clubhouse.

Description is taken from Mashable

What can't we do in Clubhouse?

Now, you all know what you can do with Clubhouse, it's time to focus on what can't you do in Clubhouse. Clubhouse is a great platform to discuss ideas, contact your friends, organize brainstorming sessions or ask questions to known-people, yet it is very limited on other things such as resource sharing such as links, notes, buckets of ideas, movies, songs, etc.

Why can't I use other URL shorteners?

Whether you are on desktop or mobile, URL shorteners works pretty well, but when it comes to sharing the shortened URL by voice/by spelling it, it can easily become a nightmare. Since Clubhouse is a voice-driven platform, you would want your shortened URL to be pronounced easily which is not possible with a mix of uppercase/lowercase letters and digits. On top of it, Clubhouse is an international platform, there are people from everywhere which means different languages and accents, etc. Even if people speak the same language, it is hard to spell a shortened URL one by one.

How did you solve it?

As you may know every bank on the planet sends 6-8 digit numbers as SMS when it needs your authentication or 2FA works the same way, or quiz platform Kahoot.it gives 8-digit numbers to join a session. These all inspired us to make a URL shortener that converts buckets/lists into 6-digit numbers. In that way, you can easily gather the PIN and access the resources with it.

Currently, you can create buckets of links or notes. You can add, update, and delete those resources even after you share them with your audience.

Examples

Installation

Installation is as simple as it gets.

  1. Clone the project to your computer:
git clone https://github.com/omergulen/shorten-club-frontend.git
  1. Install dependencies:
yarn

or

npm install
  1. Run the project on localhost:
yarn develop

or

npm run develop

That's it!

  • Installation note for Apple Silicon M1 users

    One of the project's current dependencies that get installed is sharp. Currently, sharp Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8. See here.
    The work around proposed is to first install it with brew:

    brew install vips
    

    Then you can proceed to finish the installation of all dependencies using the 2nd step.

Contribution

General open source contribution rules apply. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/x)
  3. Commit your Changes (git commit -m 'Add some feature')
  4. Push to the Branch (git push origin feature/x)
  5. Open a Pull Request

shorten-club-frontend's People

Contributors

cemalkilic avatar iremlaya avatar omergulen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

burakdemirrr

shorten-club-frontend's Issues

Refactor/Generalize Notes and Links

Notes and Links page have very similar structures, almost duplicate components, even the git diff of those two components are less than 10%. That's why we should refactor/generalize that structure.

Cache invalidation issue

In the render of buckets, we make a request for the bucket content to API/BUCKET_PIN, after the first load it uses the cached value of this request.

The required action to invalidate the cache of this content request so that we can load updated data on every refresh of the page.

Necessary key events and focus

In the process of using the product, it would be nice to have some key events and focus improvements for better UX.

Homepage:
Autofocus to PIN input on load, and execute primary action on pressing Enter.

Links:
Autofocus to Title input on load, focus to link input on pressing Enter while the Title input is focused, and execute add action on pressing Enter if the link input is focused.

Notes:
Autofocus to Title input on load, focus to note input on pressing Enter while the Title input is focused, and execute add action on pressing Enter if the note input is focused. And the note input should insert a new line on Shift + Enter.

Click events of scrollable elements in pinned values (in edit mode)

When a user creates a bucket, it has the write permission on it, which also means the bucket is rendered in edit mode.

In the edit mode, we enable the drag-and-drop scroll ability on pinned values, yet it causes the pinned values to lose basic functionalities, such as;

  • Delete
  • Click to link
  • Edit content on notes
  • Edit title on notes

These abilities should be able to done, without losing the sort/re-order functionality.

Authentication

We need proper authentication such as Google One-tap login or etc.

In that way we can also support;

  • Multi-browser and more stable ownership of buckets
  • Public buckets with a moderation
  • Async collaboration & edit permissions to another user

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.