Webly, Find and Sell Online Webinar Tickets
Tags: atlashackathon22, webdev, javascript, react
Published: 2022-12-05 14:14:24

## 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](https://webly.fzworld.xyz/shop)

### Demo
> Some of data still come from `faker-js/faker`
{% embed https://www.youtube.com/watch?v=G2joaFeU8oU %}

### Screenshots
![Sign in page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msp7sn8at2aodxov5zgp.png)

![Cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk99u86o8v3v6tes6x6l.png)

![Search page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4btccv3vlayq6u1gh51.png)

![Autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9tlnbjmf32coixg8ul1.png)

![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/765ca61tqkjg8poswafm.png)

![Webinars detail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrydj4l57g4kj8vgne9f.png)

### 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](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](https://www.redbubble.com/)

Tech Stack:
- [Remix](https://remix.run) 
- [Tailwind CSS](https://tailwindcss.com/)
- [Prisma](https://prisma.io)
- [MongoDB Atlas](https://www.mongodb.com/docs/atlas/)

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](https://www.epicweb.dev/full-stack-components).
 
#### 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
- [Atlas Search](https://www.mongodb.com/docs/atlas/atlas-search/tutorial/)
- [MongoDB Docs](https://www.mongodb.com/docs/)