Skip to content
← Back to Community
Weekly 6 β€” Chat App πŸ’¬
Profile icon
Bookie0

Weekly 6 β€” Chat App πŸ’¬

Hello there! πŸ‘‹

This is my weekly 6 submission, the design of a chat app.

Here's how it looks like:

howItLooksLike

It's also a responsive site, meaning that it can be viewed on any kind of device, like computer, tablet, or mobile.

responsive



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)

sideBar

Top bar

  • Profile picture of person you're messaging
  • Name of person you're messaging
  • Their status indicator
  • Audio and video call icons

topBar

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

mainMessages

Input section

  • Input bar to type messages
  • Button to send messages
  • Icons to attach files and take pictures
  • Icon to send emojis

input


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):

dodgerblue

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! πŸ‘‹

Voters
Profile icon
HACKERXYZ
Profile icon
PaulVogel2
Profile icon
Yoplayer1py
Profile icon
ruiwenge2
Profile icon
Whippingdot
Profile icon
sojs
Profile icon
PixiGem
Profile icon
zplusfour
Profile icon
s9a3co8anPv8eWq
Profile icon
tussiez
Comments
hotnewtop
Profile icon
SilvermoonCat

Sooo nice! the design is awesome! maybe you could get someone (or yourself) and make it actually work? that’d be pretty pro :D

Profile icon
Bookie0

@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
:)

Profile icon
FrancisPan

@Bookie0
bookie0: I don't know much backend
one day later:
bookie0: Posts a working social media site

Profile icon
Bookie0
Profile icon
FrancisPan

@Bookie0
You could probably do it if you wanted to and tried hard enough

Profile icon
Bookie0

@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.

Profile icon
FrancisPan

@Bookie0 I bet there going to be good

Profile icon
Bookie0

Thanks lol @FrancisPan

Profile icon
tussiez

Awesome!

Profile icon
Bookie0

Thanks! :D @tussiez

Profile icon
[deleted]

SUCH A GOOD UI! backend would be pog ;)

Profile icon
Bookie0

@Martin025 lol thanks!

Profile icon
oignons

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)

Profile icon
Bookie0

@oignons Lmao thanks! :D

Profile icon
oignons

@FlaminHotValdez please delete this comment as it contains personal information, thanks :)

Profile icon
FlaminHotValdez

@oignons Done.

Profile icon
oignons

@FlaminHotValdez thank you so much!

Profile icon
SNStudio

Nice i like it

Profile icon
Bookie0

@SNStudio Thanks! :)

Profile icon
maxina

wait so it doesn't actually work?

love the design tho

Profile icon
Bookie0

@maxina Yep, just the frontend design.

Thanks! :D

Profile icon
MarcusWeinberger

I love the design of this!

Profile icon
ch1ck3n

@MarcusWeinberger the man has spoken

Profile icon
Bookie0

@MarcusWeinberger Thank you! :D

Profile icon
Whippingdot

you do love apple (you hacked the system and made messages from windows blue :OOOOO)

Profile icon
Bookie0
Profile icon
sojs

Amazing as always, @Bookie0

Profile icon
Bookie0

Thank you! xD @sojs

Profile icon
PixiGem

just asking, if you don't mind...
I want to use the code for the social media I'm creating because I'm bad at the front end.
can I :)
I will give you credits for some css and js :)

Profile icon
Bookie0

Sure, just remember to credit :D @PixiGem

Profile icon
cumputer

poggr

Profile icon
Bookie0

@cumputer Thanks! :)

Profile icon
FlaminHotValdez

Little too late

Profile icon
Bookie0

? (I already posted it to apps and it was scored, I'm just posting on repl talk as well) @FlaminHotValdez

Profile icon
FlaminHotValdez

@Bookie0 ignore me stupid

Profile icon
Bookie0
Profile icon
VulcanWM

Woah nice!

Profile icon
Bookie0

Thanks! :) @VulcanWM

Profile icon
VulcanWM

np! :)
it’s unbelievable how you did this all on phone @Bookie0

Profile icon
Bookie0

@VulcanWM lmao yeah most of it was on phone (hence the very messy code), but just a bit on computer so I could see how it looked like

Profile icon
VulcanWM

ah okay makes sense @Bookie0

Profile icon
Bookie0

@VulcanWM lol ye

Profile icon
VulcanWM

have u thought of making this actually work? @Bookie0

Profile icon
Bookie0

@VulcanWM I wouldn't know how to make it work lmao

Profile icon
JWZ6

@Bookie0 socket io?

Profile icon
Bookie0

Lol I don't really do backend @JWZ6

Profile icon
Bookie0

Lol I don't really do backend @JWZ6

Profile icon
VulcanWM

lmao okay then @Bookie0

Profile icon
Bookie0

@VulcanWM yea lol

you're welcome to fork and make it work if you'd like

Profile icon
VulcanWM

ooh I might try that later thanks @Bookie0

Profile icon
Bookie0

@VulcanWM Np, have fun (and sorry for the messy code lmao!) :)

Profile icon
VulcanWM

it’s okay lmao @Bookie0