Weekly 6 — Chat App 💬
Weekly 6 — Chat App 💬
Hello there! 👋
This is my weekly 6 submission, the design of a chat app.
Here's how it looks like:
It's also a responsive site, meaning that it can be viewed on any kind of device, like computer, tablet, or mobile.
Links 🔗
Features ✨
Sidebar
- Hamburger icon (
☰) and cross (X) to open and close sidebar, respectively - Add friend button
- Groups and direct messages sections that can collapse
- For each group or direct message:
- Profile picture
- Name
- Status indicator (online/offline/do not disturb)
- Unread indicator
- Profile and settings
- Overlay (rest of main content has light gray overlay)
Top bar
- Profile picture of person you're messaging
- Name of person you're messaging
- Their status indicator
- Audio and video call icons
Main messages
- Messages with different colors for your and their messages
- Messages with automatic width (fit content) and that are positioned either in the left or the right
- Timestamps
Input section
- Input bar to type messages
- Button to send messages
- Icons to attach files and take pictures
- Icon to send emojis
Style 🎨
The colors of the chat app ressemble the material dark theme. The colors, like a dark theme would suggest, are mostly different shades of black and gray (#303030, #424242, #212121). The main text color is a sort of white (#fdfdfd) and the secondary text color is a light gray (#818181).
The accent color is dodgerblue (#1e09ff):
It's actually one of my favorite colors!
The main font used is 'Open Sans', sans-serif. There's also 'Alegreya Sans SC', sans-serif; a small caps font for section headers and timestamps.
The icons come from Ionicon, a really great site for beautiful icons in different formats and sizes, all for free.
Code 💻
Nothing much to say, but if you check out the code, you might become blind as it's not organized, very messy, weird class and id names, and the indentation is pretty messed up too. There's also a bunch of commented piecds of code that I just commented out instead of deleting.
This is mostly because much of the code was written in a car on a phone (a small phone) with WiFi going on and off.
Hopefully when I come back from travelling I'll be able to do a better job lol! xD
Closing 🚪
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
Have a terrific day!!!
Bye! 👋
SUCH A GOOD UI! backend would be pog ;)
@Martin025 lol thanks!
i love this design, if you can get someone to do backend (i'm too noob to) then that would be extra pog
(yes i am back from my looong repl talk hiatus)
@FlaminHotValdez please delete this comment as it contains personal information, thanks :)
@oignons Done.
@FlaminHotValdez thank you so much!
I love the design of this!
@MarcusWeinberger the man has spoken
@MarcusWeinberger Thank you! :D
you do love apple (you hacked the system and made messages from windows blue :OOOOO)
Little too late
? (I already posted it to apps and it was scored, I'm just posting on repl talk as well) @FlaminHotValdez
@Bookie0 ignore me stupid
Woah nice!
Sooo nice! the design is awesome! maybe you could get someone (or yourself) and make it actually work? that’d be pretty pro :D
@SilvermoonCat Thank you! Yeah someone's gonna try and make it work (check the comments), but I personally don't know much backend unfortunately lol
:)
@Bookie0
bookie0: I don't know much backend
one day later:
bookie0: Posts a working social media site
LOL @FrancisPan
@Bookie0
You could probably do it if you wanted to and tried hard enough
@FrancisPan Yeah well..maybe. I don't know. Anyways I'm getting more busy these days and am focusing on other projects at the moment lol.
@Bookie0 I bet there going to be good
Thanks lol @FrancisPan