Gig Overview: This project involves converting the Courses Pages for a web application using Vue.js 3 Composition API and TailwindCSS, with additional functionalities such as course progress tracking and dynamic course status display (Beginner, Intermediate, Advanced). The Courses Page will feature interactive cards that categorize courses based on difficulty, while the My Courses Page will display individual student progress and remaining course topics. You are provided with a link to UI design for the Course pages.

Scope of Work:

1. Courses Listing Page:

Required Features:

-Display a grid of courses on a slider with the following information:

-Course Title

-Difficulty level (Beginner, Intermediate, Advanced) shown clearly in a tag or badge.

-Instructor name.

-Progress bar.

-Course image.

-Option for students to enroll or view course details.

-Search functionality to filter courses (by name, instructor, difficulty level).

-Filters for difficulty level (Beginner, Intermediate, Advanced).

-Ensure the toggle for light and dark is functional.

-Pagination for handling large numbers of courses.

-Responsive design to adjust to various screen sizes (mobile, tablet, desktop).

Expected Tasks:

-Vue.js 3 Composition API:

-Use Composition API to manage data, including course details, filters, and pagination.

-Display difficulty level dynamically on the course cards.

-Handle dynamic data fetching (e.g., via API) for course listing and search filters.

-TailwindCSS:

-Style the page with TailwindCSS to create a modern, clean look.

-Implement responsive grid layout for displaying courses in cards.

-Use TailwindCSS classes to add color-coded badges for difficulty levels (e.g., green for Beginner, yellow for Intermediate, red for Advanced).

-Ensure that the course cards look visually appealing and include the necessary course details.

2. My Courses Page (Progress Tracker):

Required Features:

-Display the course card a student is enrolled in.

-For each course card, show:

-Course Title.

-Current progress (progress bar).

-A button to click on to navigate to the course overview and details.

- The course view should have the number of topics completed vs. remaining topics, a progress bar and circle with percentage completed. The coach name and messages exchanged.

-A list of remaining topics (clickable) with the option to resume or continue.

-Ability for the student to click on a course to see detailed progress (including individual lesson completion).

Expected Tasks:

-Vue.js 3 Composition API:

-Use Composition API to manage and display progress data for each enrolled course.

-Handle dynamic data for progress tracking, fetching the completed topics and remaining topics.

-Implement logic for updating progress and ensuring the remaining topics are displayed dynamically.

-TailwindCSS:

-Use progress bars or circular progress indicators to represent the student's progress visually.

-Style the My Courses page using TailwindCSS, ensuring the progress bars are clearly visible and that the page layout is clean and professional.

-Design the remaining topics as clickable items, styled for easy user interaction.

3. Individual Course Detail Page :

Required Features:

-Detailed course information such as description, syllabus, instructor profile, and pricing.

-Homework, notes, materials and quiz pages.

-The course video display.

-Display a list of lessons and modules in the course.

-The material and links tab should show a list of downloadable materials and active links of materials associated with the course in the card.

-The homework tab should show the homework when it should be submitted, status badge(Not Submitted, Submitted, Completed), and a submit homework button (that when clicked pops up a modal that allows the student to hand in their homework).

-Option for students to enroll (if they are not already enrolled).

Expected Tasks:

-Vue.js 3 Composition API:

-Dynamically render course details including lessons/modules.

-Integrate any APIs required for fetching lesson data or updating enrollment status.

-Integrated video player for the courses.

-TailwindCSS:

-Style the course description and syllabus with TailwindCSS.

-Ensure that all content is visually appealing and easy to navigate.

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/e0xfwivE9FpUE2Yd0AnW6A/Courses?node-id=3-1339&p=f&t=aYRDfS4AXbaqwB7H-0

Repository Link : Clone from lms_courses branch for this project

• https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_courses