Galane-dev · Galane-dev · Feb 13, 2026 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026
diff --git a/README.md b/README.md
@@ -35,39 +35,19 @@ LocalChat is a modern local chat app that allows users to create accounts, chat
  * users are able to see and message groups
  * users are able to recieve and send messages in real time
 
+# Design
+
+## [UI Design](https://www.figma.com/design/97l0hfe6ogeRn0mjbfe4Gy/Untitled?node-id=0-1&m=dev&t=j02J3MH5C7mYCmF1-1)
 
 # running application
 ## FRONTEND
-npm install
+*I nstall Live Server VS Code extension
+* Run index.html with Live Server
 
 ## Development
-npm run dev
+*I nstall Live Server VS Code extension
+* Run index.html with Live Server
 
 ## Production
-* npm run build
-* npm start
-
-## Docker frontend (if you have environement setup)
-
-* npm run docker
-* npm run docker-start
-
-docker currently running in detach mode so you will need to add the following under environment variables
-
-* ENV NEXT_PUBLIC_API_BASE_URI ACTUAL_BASE_URL
-
-# BACKEND
-
-Visual Studio
-* select web.host as startup project
-* build application
-* run application under IIS Express
-
-# FRONTEND-CI
-
-* npm run ci
+* visit galane-dev.github.io/LocalChat/
 
-# Setup for husky
-In the client directory run the following command
-* npm run prepare
-
diff --git a/assets/images/icons/add.png b/assets/images/icons/add.png
diff --git a/assets/images/icons/image.png b/assets/images/icons/image.png
diff --git a/assets/images/icons/image1.png b/assets/images/icons/image1.png
diff --git a/assets/images/icons/profile.png b/assets/images/icons/profile.png
diff --git a/assets/images/icons/search.png b/assets/images/icons/search.png
diff --git a/assets/images/icons/send.png b/assets/images/icons/send.png
diff --git a/assets/images/logo.png b/assets/images/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Authenticate | LocalChat</title>
+        <link href="./styles/landing-page.css" rel="stylesheet">
+    </head>
+    <body>
+        <main>
+            <article>
+                <div  id="landing-message">
+                    <img id="logo-image" src="./assets/images/logo.png" alt="logo image">
+                    <h1 id="welcome-heading">Welcome Back...</h1>
+                    <p id="welcome-message">LocalChat is a local chat app<br>
+                        Your data is stored securely in your own <br>computer, no one but you will be able to access the data</p>
+                </div>
+            </article>
+            <!--The login form on the side-->
+            <aside>
+                <section  id="landing-form">
+                    <h3 id="text-logo">Local<span>Chat</span></h3>
+                    <form>
+                        <input id="username-input" name="username-input" type="text" placeholder="Enter username">
+                        <input id="password-input" name="password-input" type="password" placeholder="Enter password">
+                        <button id="submit-button" name="submit-button" type="button">Sign In</button>
+                    </form>
+                    <p id="toggle-question">Don't have an account?</p>
+                    <p id="toggle-action">Sign Up</p>
+                </section>
+            </aside>
+        </main>
+        <footer></footer>
+        <script type="module" src="./js/landing-page.js"></script>
+    </body>
+</html>
diff --git a/js/helpers/create-message-tile.js b/js/helpers/create-message-tile.js
@@ -0,0 +1,20 @@
+const createMessageTile = (message, isCurrentUser) => {
+    const tile=document.createElement('li');
+    tile.id='message-tile';
+
+    const messageText=document.createElement('p');
+    messageText.id='message-tile-text';
+    messageText.innerText=message.content;
+
+    const messageDate=document.createElement('p');
+    messageDate.id='message-date';
+    messageDate.textContent=new Date(message.timestamp).toDateString();
+
+    tile.style.backgroundColor=isCurrentUser?'rgb(244, 107, 107)' 
+                                :'rgb(169, 169, 169)';
+    tile.append(messageText, messageDate);
+
+    return tile;
+};
+
+export default createMessageTile;
diff --git a/js/helpers/create-user-tile.js b/js/helpers/create-user-tile.js
@@ -0,0 +1,29 @@
+import getLastText from "./get-last-text.js";
+import openChat from "../main-page.js"
+
+const createUserTile=(currentUser, user)=>{
+    const isGroup=user.participants!==undefined;
+    const tile=document.createElement('li');
+    const profilePicture=document.createElement('img');
+    const username=document.createElement('h3');
+    const lastMessage=document.createElement('p');
+    const onlineBadge=document.createElement('h4');
+
+    profilePicture.src='../assets/images/icons/image.png';
+    username.textContent=isGroup?user.name:user.username;
+    lastMessage.textContent=getLastText(isGroup,user.id);
+    onlineBadge.textContent = '•';
+    onlineBadge.style.color = 'green';
+    onlineBadge.style.display = (user.isOnline && !isGroup) ? 'inline' : 'none';
+
+    tile.addEventListener('click',()=>{
+        isGroup?openChat(user.id,null,'group')
+                :openChat(currentUser.id,user.id,'private');
+    });
+    tile.append(profilePicture, username, lastMessage, onlineBadge);
+
+    return tile;
+
+}
+
+export default createUserTile;
diff --git a/js/helpers/display-messages.js b/js/helpers/display-messages.js
@@ -0,0 +1,24 @@
+import createMessageTile from "./create-message-tile.js";
+
+const displayMessages=(chat,messagesCount,currentUser)=>{
+    const chatsList=document.getElementById('chats-list');
+    const noMessages=document.getElementById('no-messages');
+
+    if(messagesCount>0){
+        chatsList.style.display='inline';
+        noMessages.style.display='none';
+    }
+    else{
+        chatsList.style.display='none';
+        noMessages.style.display='inline';
+        return;
+    }
+
+    chat.messages.forEach(currentMessage => {
+        const message= currentMessage;
+        const messageTile = createMessageTile(message, message.senderId === currentUser);
+        chatsList.appendChild(messageTile);
+    });
+}
+
+export default displayMessages;
diff --git a/js/helpers/get-chat-data.js b/js/helpers/get-chat-data.js
@@ -0,0 +1,25 @@
+import Chat from "../models/chat.js";
+import User from "../models/user.js";
+import LocalStorageService from "../services/local-storage.js";
+
+const getChatData=(user1,user2,type)=>{
+    const chatsList=document.getElementById('chats-list');
+    chatsList.innerHTML='';
+    let chatId,currentChat,messagesCount;
+    if(type==='private'){
+        chatId=Chat.generateChatId(user1, user2);
+        const allChats=LocalStorageService.getChats();
+        currentChat=allChats.find(chat=>chat.id===chatId);
+    }
+    else{
+        const groups=LocalStorageService.getGroups();
+        currentChat=groups.find(group=>group.id===user1);
+        chatId=user1;
+    }
+
+    messagesCount=currentChat?.messages?.length||0;
+
+    return {chatId,currentChat,messagesCount};
+}
+
+export default getChatData;
diff --git a/js/helpers/get-last-text.js b/js/helpers/get-last-text.js
@@ -0,0 +1,32 @@
+import LocalStorageService from "../services/local-storage.js";
+import SessionManager from "../services/session-manager.js";
+import Chat from "../models/chat.js";
+
+const getLastText=(isGroup,userId)=>{
+    let allChats = LocalStorageService.getChats();
+    let allGroups = LocalStorageService.getGroups();
+    let currentUserId = SessionManager.getUser().id;
+    let lastMsgText='No message yet'
+
+    if (isGroup) {
+    let group = allGroups.find(g=>g.id===userId);
+
+        if (group && group.messages && group.messages.length > 0) {
+            let lastMsg = group.messages[group.messages.length - 1];
+            lastMsgText = lastMsg.content;
+
+        }
+    } 
+    else {
+        let chatId = Chat.generateChatId(currentUserId, userId);
+        let chat = allChats.find(c => c.id === chatId);
+
+        if (chat && chat.messages && chat.messages.length > 0) {
+            let lastMsg = chat.messages[chat.messages.length - 1];
+            lastMsgText = lastMsg.content;
+        }
+    }
+    return lastMsgText;
+}
+
+export default getLastText;
diff --git a/js/helpers/set-up-send-message-handler.js b/js/helpers/set-up-send-message-handler.js
@@ -0,0 +1,21 @@
+import LocalStorageService from "../services/local-storage.js";
+import openChat from "../main-page.js";
+
+const setupSendMessageHandler = (userId1, userId2, type, chatId) => {
+    const sendIcon=document.getElementById('message-send');
+    sendIcon.onclick = null;
+    sendIcon.onclick=()=>{
+        const content= document.getElementById('message-text').value.trim();
+        if (content==='') return;
+
+        if (type==='group') {
+            LocalStorageService.messageGroup(chatId, content, 'none');
+        } else {
+            LocalStorageService.sendMessage(chatId, content, 'none');
+        }
+        document.getElementById('message-text').value = '';
+        openChat(userId1, userId2, type);
+    };
+};
+
+export default setupSendMessageHandler;
diff --git a/js/helpers/switch-views.js b/js/helpers/switch-views.js
@@ -0,0 +1,27 @@
+const switchMobileView=(view)=>{
+    const nav = document.querySelector('nav');
+    const main = document.querySelector('main');
+    const aside = document.querySelector('aside');
+
+    const isMobile = window.matchMedia("(max-width:600px)").matches;
+
+    if(!isMobile){
+        return;
+    }
+
+    nav.style.display = 'none';
+    main.style.display = 'none';
+    aside.style.display = 'none';
+
+    if(view === 'nav'){
+        nav.style.display = 'block';
+    }
+    else if(view === 'chat'){
+        main.style.display = 'flex';
+    }
+    else if(view === 'profile'){
+        aside.style.display = 'block';
+    }
+}
+
+export default switchMobileView;
diff --git a/js/helpers/update-header.js b/js/helpers/update-header.js
@@ -0,0 +1,25 @@
+import LocalStorageService from "../services/local-storage.js";
+
+const updateChatHeader=(chateeId,chatData,type)=>{
+    const chateeName=document.getElementById('chatee-name');
+    const chateeSideName=document.getElementById('chatee-side-name');
+    const chateeStatus=document.getElementById('chatee-status');
+    const chateeSideStatus=document.getElementById('chatee-side-status');
+
+    if(type==='private'){
+        const chatee=LocalStorageService.getUser(chateeId);
+        chateeName.textContent=chatee.username;
+        chateeSideName.textContent=chatee.username;
+        chateeStatus.textContent=chatee.isOnline?'Online':'Offline';
+        chateeSideStatus.textContent=chateeStatus.textContent;
+    }
+    else{
+        chateeName.textContent=chatData.currentChat.name;
+        chateeSideName.textContent=chatData.currentChat.name;
+        chateeStatus.textContent='Group';
+        chateeSideStatus.textContent='Group';
+    }
+
+}
+
+export default updateChatHeader;
diff --git a/js/landing-page.js b/js/landing-page.js
@@ -0,0 +1,63 @@
+import LocalStorageService from "./services/local-storage.js";
+import SessionManager from "./services/session-manager.js";
+import User from "./models/user.js";
+
+let isSignUp=true;
+const defaultView=document.getElementById('toggle-action');
+let authButton=document.getElementById('submit-button');
+
+//Toggle view for toggling between login and signup
+const toggleView=()=>{
+    let heading=document.getElementById('welcome-heading');
+    let toggleQuestion=document.getElementById('toggle-question');
+    let toggleView=document.getElementById('toggle-action');
+    let toggleMessage=document.getElementById('welcome-message');
+    let submitButton=document.getElementById('submit-button');
+    if(isSignUp){
+        heading.textContent='Hey newbie...';
+        toggleQuestion.textContent='Already have an account?';
+        toggleMessage.innerHTML='LocalChat is a local chat app.<br>Your data is stored securely in your own <br>computer, no one but you will be able to access the data.';
+        toggleView.textContent="Sign In";
+        submitButton.textContent='Sign Up';
+    }
+    else{
+        heading.textContent='Welcome Back...';
+        toggleQuestion.textContent='Don’t have an account?';
+        toggleMessage.innerHTML='LocalChat is a local chat app.<br>Your data is stored securely in your own <br>computer, no one but you will be able to access the data.';
+        toggleView.textContent='Sign Up';
+
+    }
+    isSignUp=!isSignUp;
+}
+
+
+const authenticate=()=>{
+    let username=document.getElementById('username-input').value;
+    let password=document.getElementById('password-input').value;
+    if(!isSignUp){
+        if(User.isUserNameUnique(username)){
+            LocalStorageService.createUser(username,password);
+        }
+        else{
+            alert('Please enter a new username, make it unique');
+            return;
+        }
+    }
+    //Login
+    let user=SessionManager.login(username,password);
+    if(user){
+        window.location.replace('./pages/main.html');
+    }
+    else{
+        alert('Login failed, ensure you have entered correct credentials');
+        return;
+    }
+}
+
+
+const main=()=>{
+    defaultView.addEventListener('click',()=>toggleView());
+    authButton.addEventListener('click', ()=>authenticate());
+}
+
+main();