DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Webly, Find and Sell Online Webinar Tickets
Fazza Razaq Amiarso
Fazza Razaq Amiarso

Posted on

Webly, Find and Sell Online Webinar Tickets

What I built

A marketplace for webinars. Sell webinars ticket for hosts. Find and buy tickets for users.

Category Submission

Search No More

App Link

You can authenticate with an arbitrary email address as long as its format is valid.
https://webly.fzworld.xyz/shop

Demo

Some of data still come from faker-js/faker

Screenshots

Sign in page

Cart

Search page

Autocomplete

Home page

Webinars detail

Description

As a marketplace, Webly enables you to search and discover online webinars. If you are a webinar host, you can sell tickets for your webinars, whether free or paid.

Link to Source Code

https://github.com/fazzaamiarso/webly

Permissive License

MIT

Background

On the internet, information about webinars is scattered about on many different platforms. In my country, Indonesia, to buy webinar tickets we mostly go to Instagram and contact the admin directly via another messaging platform (e.g. Whatsapp, line).

Why not gather them in one place where we can sell and buy webinar tickets easily? This is where Webly comes into play.

How I built it

UI is deeply inspired by redbubble

Tech Stack:

Let's focus on how I built the search features.

Search bar with autocomplete.

Atlas search comes with autocomplete capability that will helps searching an item easier. The autocomplete recommendation comes from Atlas Search autocomplete aggregation.

Inspired by Linkedin and redbubble search UI, I merged the sellers and webinars autocomplete aggregation pipeline, enabling us to search both of them. To complete it, I add a neat delayed spinner UI coming from Kent C. Dodds blog.

Search Items with Sorting, Filtering, and Pagination.

Atlas search can do a lot of things, especially compound aggregation is powerful when searching a query with many conditions.

I also implement pagination using the skip and limit cursor methods. Although it's not the most performant way, it surely gets the job done.

Improvements

  • Choose either Prisma or MongoDB native driver (with mongoose, maybe?). Currently, Webly uses mostly Prisma for DB transactions and mongo native driver for the search feature.
  • As it's focused on building the search features, other core features, such as checkout and user profile are set aside for the time being.
  • Optimistic UI for a snappier user experience.
  • Currently, Webly isn't optimized for tablets and small-screen devices.
  • There isn't a seller dashboard yet, only a storefront with mock data.
  • Authentication is working, but not fully implemented yet for production.

Additional Resources/Info

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.