₦airaland Forum

I have been documenting my progress as a web developer on this space and my post history would show this, starting with my very first project all the way to this point.

In all my previous projects, I never used a frontend Javascript framework because vanilla Javascript served me fine.

I often see people who run to use a frontend framework when they start coding without actually trying to get their hands dirty without the framework.

Anyway, I started building this project with no intentions to use a frontend framework, but at some point my life became miserable really fast having to manage the different states manually. I was writing lots of repetitve code with .innerHTML littered everywhere that it got to a point where... You know what, enough of this irrrelevant story.

This application is a real-time chat application and is hosted here - https://svelte-of1p.onrender.com

Please forgive any ititial loading delays as the project is hosted on a free plan.

Also, apologies in advance as it is not optimized for mobile phones and I know that's what the majority of people would access it with.

It was built with Express Js, MongoDB, and SvelteKit.

It's my second project built with Express and MongoDB. You can check my post history to see the first one.

Functionalities include


The client-side -


1. Handles formatting and categorizing messages based on the sender.

2. Uses WebSockets to establish a connection for real-time communication and fetches messages and user information from the backend using JWT-based authentication. It also dynamically updates the chat content based on the currently selected user, ensuring that messages are saved and displayed correctly.

3. Uses a modal for user selection by fetching and displaying users based on input, while dynamically updating the UI and handling events for focusing and blurring the input field.

4. Toggles the display of settings and the message modal, manages the background color based on modal visibility, updates the current chat user, and fetches selected users and user details from an API when the relevant component mounts.

5. Manages a username selection form, including validation and availability checks. When the page for username selection mounts, it verifies if the user already exists and redirects them to the messages page if they do; otherwise, it enables the form for new users. It also handles frontend username validation (a server-side validation also occurs), checks availability through an API, and submits the form, storing a new JWT token if successful.

*The server-side -*

1. Handles Google authentication with Passport, redirecting users to either a messages or username selection page based on their existence in the system, and includes a token in the redirect Url which is then retrieved by the client and stored after an intermediate page mounts on the client.

2. Provides endpoints for checking username availability and selecting a username for a temporary user, with validation and error handling. It ensures that usernames are unique, meet certain criteria, and assigns a new JWT token upon successful username selection and user creation.

3. Provides endpoints for sending and retrieving messages. The endpoints save a new message, broadcast it to connected WebSocket clients associated with the sender or recipient, and retrieves and returns all messages between the authenticated user and a specified recipient. The logic in place prevents messages from leaking to unintended recipients.

4. Retrieves and returns the authenticated user's selected contacts along with the most recent message for each contact, sorting the results by the timestamp of the last message.

5. Retrieves users that match a given username query, excluding the current user and already selected users, and returns a list of these users, handling errors appropriately.

6. Employs middleware that verifies JWT received from either headers or cookies, differentiates between fully registered and temporary users, and either attaches the user to the request or returns an unauthorized response based on token validity or non-existence.

Once again, this was not optimized for mobile phones, so I apologize.

If you want to try out the real time chat feature, register and search for me, my username is @downbad

This was my first project built with a frontend framework so I expect to get better as I continue to use it in the future.

Why did I use Svelte (SvelteKit) instead of React?

I am aware that React is the most popular frontend JS framework (Library) and is the most sought after in the tech job market, but I chose Svelte because after doing some research and comparing it with the Big Three (React, Angular, Vue), it just seemed simpler.. More intuitive. And that just appealed to me more. I'm sorry.

If you go through my post history you'd see my previous projects and notice I normally say what I intend to tackle next.

I maintain the tradition here.

More screenshots

More

Nice one bro

Good one , check out lithtml u will notice that 80% popular js frontend framework are useless

Shomek:
Nice one bro

Thanks

silento:
Good one , check out lithtml u will notice that 80% popular js frontend framework are useless

It was one of the things I researched on before deciding on Svelte. Thanks for the compliment.

downbad:
I have been documenting my progress as a web developer on this space and my post history would show this, starting with my very first project all the way to this point.

In all my previous projects, I never used a frontend Javascript framework because vanilla Javascript served me fine.

I often see people who run to use a frontend framework when they start coding without actually trying to get their hands dirty without the framework.

Anyway, I started building this project with no intentions to use a frontend framework, but at some point my life became miserable really fast having to manage the different states manually. I was writing lots of repetitve code with .innerHTML littered everywhere that it got to a point where... You know what, enough of this irrrelevant story.

This application is a real-time chat application and is hosted here - https://svelte-of1p.onrender.com

Please forgive any ititial loading delays as the project is hosted on a free plan.

Also, apologies in advance as it is not optimized for mobile phones and I know that's what the majority of people would access it with.

It was built with Express Js, MongoDB, and SvelteKit.

It's my second project built with Express and MongoDB. You can check my post history to see the first one.

Functionalities include


The client-side -


1. Handles formatting and categorizing messages based on the sender.

2. Uses WebSockets to establish a connection for real-time communication and fetches messages and user information from the backend using JWT-based authentication. It also dynamically updates the chat content based on the currently selected user, ensuring that messages are saved and displayed correctly.

3. Uses a modal for user selection by fetching and displaying users based on input, while dynamically updating the UI and handling events for focusing and blurring the input field.

4. Toggles the display of settings and the message modal, manages the background color based on modal visibility, updates the current chat user, and fetches selected users and user details from an API when the relevant component mounts.

5. Manages a username selection form, including validation and availability checks. When the page for username selection mounts, it verifies if the user already exists and redirects them to the messages page if they do; otherwise, it enables the form for new users. It also handles frontend username validation (a server-side validation also occurs), checks availability through an API, and submits the form, storing a new JWT token if successful.

*The server-side -*

1. Handles Google authentication with Passport, redirecting users to either a messages or username selection page based on their existence in the system, and includes a token in the redirect Url which is then retrieved by the client and stored after an intermediate page mounts on the client.

2. Provides endpoints for checking username availability and selecting a username for a temporary user, with validation and error handling. It ensures that usernames are unique, meet certain criteria, and assigns a new JWT token upon successful username selection and user creation.

3. Provides endpoints for sending and retrieving messages. The endpoints save a new message, broadcast it to connected WebSocket clients associated with the sender or recipient, and retrieves and returns all messages between the authenticated user and a specified recipient. The logic in place prevents messages from leaking to unintended recipients.

4. Retrieves and returns the authenticated user's selected contacts along with the most recent message for each contact, sorting the results by the timestamp of the last message.

5. Retrieves users that match a given username query, excluding the current user and already selected users, and returns a list of these users, handling errors appropriately.

6. Employs middleware that verifies JWT received from either headers or cookies, differentiates between fully registered and temporary users, and either attaches the user to the request or returns an unauthorized response based on token validity or non-existence.

Once again, this was not optimized for mobile phones, so I apologize.

If you want to try out the real time chat feature, register and search for me, my username is @downbad

This was my first project built with a frontend framework so I expect to get better as I continue to use it in the future.

Why did I use Svelte (SvelteKit) instead of React?

I am aware that React is the most popular frontend JS framework (Library) and is the most sought after in the tech job market, but I chose Svelte because after doing some research and comparing it with the Big Three (React, Angular, Vue), it just seemed simpler.. More intuitive. And that just appealed to me more. I'm sorry.

If you go through my post history you'd see my previous projects and notice I normally say what I intend to tackle next.

I maintain the tradition here.

Since you're using a framework I believe it's very easy to make this mobile optimized.

Try using Tailwind to make your life easier making your project mobile responsive

Revealpanda:
Since you're using a framework I believe it's very easy to make this mobile optimized.

Try using Tailwind to make your life easier making your project mobile responsive

My previous projects were all responsive. I'm familiar with media queries and I use Bootstrap grids.

But this particular chat application posed a unique challenge for me in terms of responsiveness, and I wasn't particularly motivated to solve it because my initial goal was to implement websockets for real time chat - which I did successfully.

On mobile phones, I had to hide the chat panel (the place where the chats are displayed), while displaying only the sidebar, and then when you choose someone to chat with, I had to hide the side bar to render only the chat panel.

So the responsiveness here would have involved hiding and unhiding different components, and also enabling the visible component to occupy the space of the now hidden component.

I don't know if my explanation is clear, but if you've used Whatsapp or Twitter messenger on mobile and Desktop you'd see the difference in layout. That's what I was aiming for.

This is different from collapsing and expanding a navbar.

I know it can be done, but I didn't try hard enough.

Anyway, thanks for leaving a comment.

downbad:
My previous projects were all responsive. I'm familiar with media queries and I use Bootstrap grids.

But this particular chat application posed a unique challenge for me in terms of responsiveness, and I wasn't particularly motivated to solve it because my initial goal was to implement websockets for real time chat - which I did successfully.

On mobile phones, I had to hide the chat panel (the place where the chats are displayed), while displaying only the sidebar, and then when you choose someone to chat with, I had to hide the side bar to render only the chat panel.

So the responsiveness here would have involved hiding and unhiding different components, and also enabling the visible component to occupy the space of the now hidden component.

I don't know if my explanation is clear, but if you've used Whatsapp or Twitter messenger on mobile and Desktop you'd see the difference in layout. That's what I was aiming for.

This is different from collapsing and expanding a navbar.

I know it can be done, but I didn't try hard enough.

Anyway, thanks for leaving a comment.

I understand.

But you still have to make it responsive even if it's a personal project

Most apps/websites are mobile focused now

Revealpanda:
I understand.

But you still have to make it responsive even if it's a personal project

Most apps/websites are mobile focused now

Yes, I know. Will do that on the next project.

I don't even know when to start building my next project. Programming can be fun and exhausting at the same time.