Share your repls and programming experiences

← Back to all posts
Weekly 6 — Chat App 💬
h
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:

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! 👋

Voters
Yoplayer1py
ruiwenge2
Whippingdot
sojs
PixiGem
zplusfour
s9a3co8anPv8eWq
tussiez
EthanChen10
SudhanshuMishra
Comments
hotnewtop
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

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

FrancisPan

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

Bookie0
FrancisPan

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

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.

FrancisPan

@Bookie0 I bet there going to be good

Bookie0

Thanks lol @FrancisPan

tussiez

Awesome!

Bookie0

Thanks! :D @tussiez

[deleted]

SUCH A GOOD UI! backend would be pog ;)

Bookie0

@Martin025 lol thanks!

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)

Bookie0

@oignons Lmao thanks! :D

oignons

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

FlaminHotValdez

@oignons Done.

oignons

@FlaminHotValdez thank you so much!

SNStudio

Nice i like it

Bookie0

@SNStudio Thanks! :)

maxina

wait so it doesn't actually work?

love the design tho

Bookie0

@maxina Yep, just the frontend design.

Thanks! :D

MarcusWeinberger

I love the design of this!

ch1ck3n

@MarcusWeinberger the man has spoken

Bookie0

@MarcusWeinberger Thank you! :D

Whippingdot

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

Bookie0
sojs

Amazing as always, @Bookie0

Bookie0

Thank you! xD @sojs

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

Bookie0

Sure, just remember to credit :D @PixiGem

cumputer

poggr

Bookie0

@cumputer Thanks! :)

FlaminHotValdez

Little too late

Bookie0

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

FlaminHotValdez

@Bookie0 ignore me stupid

Bookie0
VulcanWM

Woah nice!

Bookie0

Thanks! :) @VulcanWM

VulcanWM

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

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

VulcanWM

ah okay makes sense @Bookie0

Bookie0

@VulcanWM lol ye

VulcanWM

have u thought of making this actually work? @Bookie0

Bookie0

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

JWZ6

@Bookie0 socket io?

Bookie0

Lol I don't really do backend @JWZ6

Bookie0

Lol I don't really do backend @JWZ6

VulcanWM

lmao okay then @Bookie0

Bookie0

@VulcanWM yea lol

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

VulcanWM

ooh I might try that later thanks @Bookie0

Bookie0

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

VulcanWM

it’s okay lmao @Bookie0