Whisper - Frontend

Welcome to our Whisper App! This project aims to provide a user-friendly, feature-rich messaging platform that enables users to connect, communicate, and customize their experience with ease. Below, you’ll find an overview of our progress and the core features we’ve implemented.

🚀 Project Overview

Our app is designed to offer a seamless communication experience, with features that include secure login options, extensive profile customization, privacy settings, and versatile messaging capabilities. We are actively developing and expanding the feature set to create a complete messaging solution.

🔒 Authentication

We’ve implemented a secure and flexible authentication system with multiple login options:

• Standard Login: Users can register and log in with traditional email/password credentials.
• OAuth Login: Login options with:
  • Google
  • Facebook
  • GitHub

These integrations allow for a streamlined login experience, making it easy for users to get started.

👤 Profile Management

Our app offers comprehensive profile management features, allowing users to personalize their accounts fully:

• Profile Settings:

  • Bio: Users can add a brief bio about themselves.
  • Profile Picture: Easy upload and update of profile pictures.
  • Name: Customizable display name.

• Privacy Settings:

  • Block/Unblock Users: Users can control their connections and manage who can contact them.
  • Visibility Settings: Adjust profile visibility according to user preferences.

• Stories:

  • Set/Remove Stories: Users can share temporary updates with their contacts.

💬 Messaging Features

We’ve begun implementing the core messaging capabilities, including:

• Text Messaging: Exchange text messages with contacts.
• Media Sharing:
  • Audio: Send and receive audio messages.
  • Video: Share videos with contacts.
  • Images: Send and view image attachments.

Our team is actively working on expanding messaging features to enhance user interaction and engagement further.

📦 Tech Stack

This project utilizes a modern stack to ensure scalability, performance, and ease of maintenance:

• Frontend: [JavaScript, React, Vite, CSS, Tailwind, Vitest]

Demo

🛠️ Getting Started

To get started with the project, follow these steps:

1. Clone the repository:

   git clone https://github.com/yourusername/yourproject.git
   cd yourproject

2. Install dependencies:

   npm install

3. Start the application:

   npm run dev

4. run the tests:

   npx vitest run

   Don't forget to run start the backend