Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,207,412 members, 7,998,924 topics. Date: Sunday, 10 November 2024 at 12:05 PM

Created And Deployed My First Web Application Built With A Frontend Framework. - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Created And Deployed My First Web Application Built With A Frontend Framework. (157 Views)

Created And Deployed My First Express Js Website. / Created And Deployed My Second Django Website. / Created And Deployed My First Django Website. (2) (3) (4)

(1) (Reply)

Created And Deployed My First Web Application Built With A Frontend Framework. by downbad(m): 6:30pm On Jul 23
This is a cross post of the one I made at the Programming subforum.

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.

Re: Created And Deployed My First Web Application Built With A Frontend Framework. by downbad(m): 6:33pm On Jul 23
More screenshots

Re: Created And Deployed My First Web Application Built With A Frontend Framework. by downbad(m): 6:34pm On Jul 23
More

(1) (Reply)

NITDA Warns Wordpress Users In Nigeria / Please Who Can Answer This Questions About Owning A Movie Website? / FB GRAPHICS | Outstanding Graphic Design Services.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 33
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.