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
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.
Top comments (0)