V!be
"V!be is a chat app where every message is a GIF — no text allowed. It turns conversations into a creative game of wit and timing, where picking the perfect animation is the key to getting your message across. Ready to speak a whole new language? V!be is your playground."
This is the web version of the app I'm making for the Gemini YSWS.
(this is me editing partway through the project. i realize that this might take longer than expected, especially compared to similar projects. however, this is my first time using Firebase and databases in general, and the first time making a more difficult website. in addition, im specifically not using AI to code and trying my best to understand everything that's going on and how Firebase works. thanks for understanding)
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
Completely forgot to commit stuff to GitHub and make devlogs for this. I added the gif selector to the main page and styled everything to look much nicer, with a new color palette. Not sure if I'll keep it, but it definitely looks better than the old one. Next thing I'll make is the ability to add chatrooms and participants. That's the last major feature this website needs, although there's plenty more things to do afterwards.
This isn't recorded with hackatime because it's not really a part of this project, but I finally got started with React Native and Expo. It's going pretty well, theres a few things I need to learn and change, but I don't think it should be too hard. I'm kinda worried im not gonna make it before the deadline for Gemini YSWS or I won't have enough hours especially considering I'm prototyping most of my work on the website which is being tracked for SoM not Gemini.
Major progress! I found an alternative to Tenor and Giphy: Klipy. For some reason, Tenor (which was the one I was planning to use) doesnt make it very easy to get the API key. You have to do some thing with Google, idk. But Klipy makes it pretty easy. You can also show ads along with the gifs on your website/app and get paid for it which is pretty cool ig. Here's a picture of the gifs that i fetched using Klipy's api. I still need to make the grid better but its pretty good for now.
Styled the chat messages so they look much nicer. The message list goes horizontally now instead of vertically. Not sure if I like that, but I want it to be a little unique.
Now you can actually see the messages! It gets the messages from the database ordered by timestamp, gets the senderId, gets the displayName for each users senderId, and display their displayName and the gif they sent. you can also scroll through the chat window and it doesnt scroll other components.
Just a quick devlog today. I made participants' usernames display below each chatroom. I'm not even sure if I want to keep it like that. I might have the username of the other participants be automatically set as the displayName if you dont specify yourself. Discord does that and it just shows the number of members below.
I set up Firestore! I also added some security rules so that each user can only access their own user data and only chatrooms with them as a participant. I also started using Firestore in my code: so far, it can create a new user when you create a new account, track the same one when you log in again, and query and display chatrooms with you as a participant. I did some research on the Tenor/Giphy APIs, and Giphy has their own SDK that I can use that has a GIF grid (like the one in Discord). Unfortunately, although they're free, their APIs have some limits. I hope I don't run into trouble with those.
Made the login page a little nicer and added some transitions. I started on the main page, and I made this very nice-looking chat bar until my dumb ahh realized that it's GIF-only, so it's not supposed to have a chat bar. I need to make the GIF API part too, which I should probably have done first. I had also accidentally exposed my Firebase API key and config on GitHub (oops), but I fixed it.
Got started on the web version of V!be. I'm using Firebase for authentication and my database. Since this is my first time using it (or any database), it took me a bit to figure it out. I'm currently working on making the website and design look nicer, and then I'll work on the backend part.
