This is gonna be my first hackathon, I made a full fledged chat app for this hackathon.

Its called.. Oneline

❔ About

Oneline is a desktop chat app. You can text, meet and share Shorts with it. Oneline's a PWA so you can install it right from your browser.

💡 Inspiration

Well, I was making my own UI library in Vue, called Bounce UI, I wanted to test out the library, soo I made a chat app.

⚙ Under the hood

This is made with Firebase Realtime DB, Vue 3 and Bounce UI Vue.

✨ Features

Oneline's packed with features, including a full featured chat, a meeting feature and you can add Shorts. I'll be explaining each below

Chat

As said before, Oneline has everything you would want in a chat app.

What can you send?

You can send texts, audio messages, images and files. Also you can search and send GIFs.

React

Just double click, and your preset reaction emoji will be added to the message (You can change it in Settings > Chat > Double click reaction). You can also click on the add reaction button to react with any emoji you want.

Meeting

With Oneline, you can start a meeting with whoever you want!, even if they don't have an account in Oneline.

Shorts

Shorts are like Instagram's Stories feature, you can send images, videos and even make polls for people to view and react, but you can only view it once.

▶ Great, how to use it?

Create an account

Enough talking, let's get to the real app, to use Oneline, just go to https://oneline-web.netlify.app/, then click the signup tab and make an account. (You don't have to add a real email address for now, you can add a random email, just be sure to remember it)

Create a chat

Click on any of the new chat buttons, and then, enter my email (abaanashanid@gmail.com) if you wanna create a chat with me, or else I've made a bot account (bot@test.com) incase you wanna test out Oneline.

Start a meeting

To start a meeting, click on the button with the camera icon

After that, the person you started the meeting with will get a notification, and if you've enabled meeting notifications (go to Settings > Notifications > Enable notifications > Enable Meeting Notifications), you'll be notified if the user has declined you invite.

Create a Short

Click on the plus icon there, then select what type of short you wanna upload. (for now, don't use Polls, it's in Beta and is highly bugged). For photos mode, it also has filters, check them out!

Access Settings

Oneline has a ton of settings, neatly segregated for you. To access settings, click on the button with the gear icon. Checkout the appearace section, over there you can change the messages UI.

Customize profile

Wanna upload a profile picture? easy, just go to Settings > Account and click on the change button below your avatar.

That's pretty much it, hope you liked the app, any doubts just comment down here.

🔗 Useful links

Oneline's webiste: https://oneline-web.netlify.app
Github repository: https://github.com/tomatopickle/Oneline

Abaan Shanid's Blog