stranger-Connect

Stranger Connect is a frontend web application created as a Bachelor project for safe and interactive online communication. The project focuses on delivering a polished user interface for exploring the platform, creating an account, signing in, and accessing a chat experience.

Project overview

Stranger Connect is designed to provide a simple and modern chatting experience with a friendly interface. The current version focuses on frontend development and includes multiple pages for user navigation and interaction.

Pages

• client/page/landing/landing.html — landing page introducing the app and providing access to login or signup.
• client/page/login/login.html — login page for existing users.
• client/page/signup/signup.html — signup page for new users.
• client/page/chat/chat.html — chat interface for messaging.
• client/page/aboutUs/aboutUs.html — about us page describing the project and team.

Features

• Responsive and visually appealing web pages
• Signup form with client-side validation
• Date of birth and age verification for eligibility
• Email and password validation
• Password confirmation check
• Local storage-based credential saving for demo purposes
• Navigation between pages using simple frontend flow

Technologies used

• HTML5 for page structure
• CSS3 for styling and layout
• JavaScript for interactivity and form validation
• Local Storage for storing user credentials in the browser

Frontend structure

The client folder contains:

• client/page/landing/ for the landing page UI
• client/page/login/ for login page styling and logic
• client/page/signup/ for registration forms and scripts
• client/page/chat/ for the chat interface and behavior
• client/page/aboutUs/ for project information and styling

Each page folder includes its own CSS and JavaScript files where needed.

Current status

• Frontend development is in progress.
• Core pages are designed and available in the client/page directory.
• Signup validation and chat page UI are implemented.

How to use

Open the desired HTML file from client/page/ in a browser to preview the project.

Next steps

• Connect the frontend to a backend server
• Implement real authentication and database storage
• Add real-time chat functionality
• Improve responsive design and user experience