Project Overview: This project involves converting the Discussion Forum Page into a fully responsive, interactive, and visually appealing UI using Vue.js 3 Composition API and TailwindCSS. The page consists of two main cards: the left card for Threads, including Channels and Direct Messages, and the right card for displaying channel-specific content (messages, files, and videos). Above the right card, user profile pictures and a kebab menu enhance interactivity. Additionally, tabs for Messages and Files make content navigation seamless. You are provided with a link to UI design for the conversion of the Discussion Forum  Page.

Scope of Work:

1. Layout Structure:

Features:

-A two-card layout with a left-side card for threads and a right-side card for viewing specific channel details.

-Responsive design for desktop, tablet, and mobile screens.

Tasks:

-Create a responsive two-card using TailwindCSS.

-Implement easy navigation functionality for the left-side card.

2. Left-Side Card (Threads):

Features:

-Threads List:

-Categories for Channels and Direct Messages.

-Icons or indicators for unread messages.

-Channels and Direct Messages:

-Lists for individual channels and direct messages.

Tasks:

-Build a thread navigation menu with Vue.js components.

-Add hover effects and active state styling for selected threads.

3. Right-Side Card (Channel/Message View):

Features:

-Message/Channel Display:

-Shows the content of the selected channel or direct message.

-Includes support for embedding videos, images, and text messages.

-Profile Pictures and Kebab Menu:

-Displays a row of user profile pictures for participants in the channel.

-A kebab menu for additional options like Add Member, Mute Notifications, etc.

-Active Tabs:

-Tabs for switching between Messages and Files.

-Messages tab displays chat content.

-Files tab lists all shared files within the channel.

Tasks:

-Develop the message and file display with Vue.js dynamic rendering.

-Implement a responsive tab navigation component.

-An add post funtionality.

-Add user profile picture display with TailwindCSS styling.

-Create a functional kebab menu with dropdown options.

4. Video Integration:

Features:

-Embed videos within message content.

-Video controls for play, pause, volume, and fullscreen.

Tasks:

-Integrate a video player (using Vue-YouTube Embed or Plyr.js).

-Ensure proper scaling and responsiveness for video content.

Required Skills:

-Strong proficiency in Vue.js 3 with experience in using the Composition API.

-Expertise in TailwindCSS for creating responsive and modern UI layouts.

-Ability to work with Vue.js state management (Vuex or Composition API’s reactive states) for dynamic data rendering.

-Experience with form validation and handling user input securely in frontend applications.

-Knowledge of responsive design principles and mobile-first development.

-Familiarity with Git for version control.

Design & Aesthetic Requirements:

Color Scheme:

Primary color: #D50036 

Secondary color: #C4C4C4

Primary-green: #00B454

Primary-yellow:#F39D1C

Primary-gray:#4B5054

Primary-black:#0F151F

Primary-red:#E50303

Background color: #F5F5F5 

Text color: #000000, #D50036, #FFFFFF 

Button color: #D50036

Border color: #E5E5E5

These color codes are the company’s brand colors and design guide

Fonts:Use a clean, modern font like Source-san.

Spacing: Generous padding and margin for a spacious design that enhances readability.

Responsiveness: Ensure that all pages are responsive across all device sizes, from desktop to mobile.

Layout: Use TailwindCSS grid and flex utilities for consistent alignment. Ensure buttons, progress bars, and question layouts are accessible and easy to interact with on all devices.

Expectations: 

   As a Techo chosen to participate in this gig, we have some expectations.

-Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.

-Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.

-Work-Ethic Alignment: Make a concerted effort to comply with our standards.

Figma Link: https://www.figma.com/design/IOkjgQZgQBTH9G9s370qq9/Discussion-Forum?node-id=0-1&p=f&t=nKQWZVPz5u9GHOwX-0

Repository: Clone from lms_admin_discussion branch for this project. https://github.com/suburban-fiber-company/Suburban_LMS_Admin/tree/lms_admin_discussion