Advanced Collaboration Learning Platform -- 2
Budget: $30 – $250 USD
Front-End Development Project Scope
1. Main Menu Screen Layout & Functionality
Objective: Design and implement the core elements of the main menu interface with enhanced invite functionality.
1.1 Visual Design and Structure:
Profile Section:
Profile picture at the top-left corner.
Name displayed below the profile picture.
Profile section should be static and always visible on the screen.
Main Menu Buttons:
Continue Course: A button that resumes the last active course.
Start New Course: A button that opens a list of available courses to choose from.
Settings: A button that opens the settings menu (outlined in section 2).
Background:
Default background (static or gradient, to be defined).
Invite Panel (CS
Style):
The panel should slide in from the right when hovered over.
Contains a list of friends or inviteable users.
The invite panel should show a small envelope icon to send invites.
1.2 Profile and Invitation Behavior:
When a friend accepts the invite, display their profile picture and name next to the user’s profile in the main menu.
Smooth visual transitions and animations for inviting friends and updating the profile display.
2. Settings Menu
Objective: Implement a settings menu that can be accessed from the main menu.
2.1 Settings Menu Structure:
When the Settings button is clicked, a new panel or modal should appear.
2.2 Settings Categories:
Profile Settings
Allows users to update their profile picture and display name.
Includes form elements for uploading profile pictures and text input for changing the name.
Privacy Settings
Toggle options for privacy (e.g., making the profile visible to everyone, friends only, or private).
Notification Settings
Toggle to enable or disable email and app notifications.
Account Settings
Allows users to change their email, password, and other account details.
Log Out
Button to log out of the account.
Each button should be linked to the appropriate functionality. If necessary, create a confirmation dialog for sensitive actions like logging out or changing account settings.
3. Course Management System
Objective: Allow users to browse, start courses, view details, and track progress.
3.1 Start New Course Button Behavior:
Clicking on "Start New Course" opens a list of available courses.
Each course entry should display:
Course Image
Course title
A "View" button to show more information about the course.
Clicking the "View" button opens a modal or new panel with the following details:
Detailed description of the course.
A "Start" button that becomes enabled once the user has reviewed the information.
3.2 Course Screen (Material Interaction):
Once the user clicks "Start," they are taken to the course material.
Reading Progress: The material should highlight the text as the user reads, tracking progress by the movement of the cursor. When the cursor is moved under the line being read, the words get crossed out (using a strikethrough effect).
Progress Bar: Update a progress bar based on how much material has been read. The progress bar should reflect the amount of text crossed out.
Completion State: When the user reaches the end of the course, update the progress bar to 100%, and show a "Course Complete" screen with an option to return to the main menu or start another course.
4. Collaborative Course Experience (Real-Time Interaction)
Objective: Allow users to collaborate in real-time on a course, with the ability to see each other’s progress, cursors, and profile information.
4.1 Shared Session/Lobby:
When a user invites a friend to join the course, both users enter a shared session (similar to a "lobby").
Split-Screen View:
Both users will work on the same course material in a split-screen layout.
The screen should be divided into two sections, each displaying the course material for one user.
4.2 Real-Time Cursor Sharing:
Each user's cursor is displayed in real-time on the other user's screen.
Cursor Position: The cursor of the other user should be represented as a distinct pointer on the screen.
Profile Picture: The profile picture of each user will appear at the top-right corner of the screen next to their cursor to avoid confusion.
Ensure that the cursor appears with smooth real-time updates to maintain synchronization between users.
4.3 Progress Bar Visibility:
Shared Progress Bar: Both users will see the same progress bars on their respective screens, indicating how far along both are in the course. One progress bar for the user and one for the partner.
Real-Time Sync: As one user progresses, the progress bar should update simultaneously for both users.
This ensures that both users are aware of each other’s progress in the course, creating a more collaborative experience.
5. Invite System
Objective: Enable users to send invites to friends and show their status when they join the course.
5.1 Invite Panel:
The panel should be hidden by default and slide out from the right side when hovered over.
Friend List: Display friends or inviteable users (could be a mock list for now).
Each friend in the list should show their profile picture and name.
5.2 Invitation Process:
Send Invite: Clicking the envelope icon next to a friend sends an invite to that user.
Receiving Invites: When the friend accepts, their name and profile picture should appear next to the main user's profile.
5.3 Invite Acceptance:
The user can see the profile picture and name of the friend next to their own.
Use animations for a smooth transition when a friend joins.
5.4 Collaborative Course Entry:
When both users are in the same session, they should be able to start the course together, seeing each other’s progress in real time.
6. Interactive and Usability Features
Objective: Ensure the UI is intuitive and interactive with smooth transitions and animations.
6.1 Animations and Transitions:
Use CSS or JavaScript animations to achieve smooth transitions:
Invite Panel Slide-in Effect: When the panel is hovered, it slides in smoothly from the right.
Profile Section: Ensure profile picture and name appear clearly, with a smooth fade-in effect when the user logs in or the page loads.
6.2 Cursor Interaction:
Reading and Progress Tracking: The interaction of moving the cursor under the text being read should be fluid. Add a subtle animation for the strikethrough effect.
Dynamic Updates: As the user progresses, the course material should update in real time, including the strikethroughs and the progress bar.
6.3 Real-Time Collaboration:
Ensure that both users’ cursors, progress bars, and profile pictures sync perfectly in real time.
Use websockets (or similar technology) for real-time communication between users to ensure minimal delay in updates.
7. Technical Requirements and Considerations
7.1 Front-End Framework/Technology:
HTML/CSS/JavaScript for basic structure and interactivity.
CSS Animations/Transitions for smooth visual effects.
React or Vue.js (optional, for better state management and reactivity).
WebSockets for real-time updates of cursor position, progress, and profile sync.
7.2 Data Management:
Mock data can be used for the friend list, course list, and user profile.
Ensure proper structure for future integration with a backend system for handling real data (e.g., API for user profiles, courses, and invitations).
7.3 User Interaction:
Ensure the interface is responsive, with a focus on mobile and desktop devices.
Provide feedback to users through tooltips, loading spinners, and success/failure messages as necessary.
8. Deliverables:
Main Menu Screen with Profile Section, Main Menu Buttons, and Invite Panel.
Settings Menu with all necessary options.
Course Management System: Course selection, course detail viewing, and course material screen with interactive progress tracking.
Collaborative Course Experience: Split-screen view with real-time cursor sharing, progress tracking, and profile visibility.
Invite System: Fully functional friend invite system with profile updates.
Animations and Transitions: Smooth interactions across all UI elements.
Documentation: Provide a README or similar documentation explaining the code structure and usage instructions.
1. Main Menu Screen Layout & Functionality
Objective: Design and implement the core elements of the main menu interface with enhanced invite functionality.
1.1 Visual Design and Structure:
Profile Section:
Profile picture at the top-left corner.
Name displayed below the profile picture.
Profile section should be static and always visible on the screen.
Main Menu Buttons:
Continue Course: A button that resumes the last active course.
Start New Course: A button that opens a list of available courses to choose from.
Settings: A button that opens the settings menu (outlined in section 2).
Background:
Default background (static or gradient, to be defined).
Invite Panel (CS
Style):
The panel should slide in from the right when hovered over.
Contains a list of friends or inviteable users.
The invite panel should show a small envelope icon to send invites.
1.2 Profile and Invitation Behavior:
When a friend accepts the invite, display their profile picture and name next to the user’s profile in the main menu.
Smooth visual transitions and animations for inviting friends and updating the profile display.
2. Settings Menu
Objective: Implement a settings menu that can be accessed from the main menu.
2.1 Settings Menu Structure:
When the Settings button is clicked, a new panel or modal should appear.
2.2 Settings Categories:
Profile Settings
Allows users to update their profile picture and display name.
Includes form elements for uploading profile pictures and text input for changing the name.
Privacy Settings
Toggle options for privacy (e.g., making the profile visible to everyone, friends only, or private).
Notification Settings
Toggle to enable or disable email and app notifications.
Account Settings
Allows users to change their email, password, and other account details.
Log Out
Button to log out of the account.
Each button should be linked to the appropriate functionality. If necessary, create a confirmation dialog for sensitive actions like logging out or changing account settings.
3. Course Management System
Objective: Allow users to browse, start courses, view details, and track progress.
3.1 Start New Course Button Behavior:
Clicking on "Start New Course" opens a list of available courses.
Each course entry should display:
Course Image
Course title
A "View" button to show more information about the course.
Clicking the "View" button opens a modal or new panel with the following details:
Detailed description of the course.
A "Start" button that becomes enabled once the user has reviewed the information.
3.2 Course Screen (Material Interaction):
Once the user clicks "Start," they are taken to the course material.
Reading Progress: The material should highlight the text as the user reads, tracking progress by the movement of the cursor. When the cursor is moved under the line being read, the words get crossed out (using a strikethrough effect).
Progress Bar: Update a progress bar based on how much material has been read. The progress bar should reflect the amount of text crossed out.
Completion State: When the user reaches the end of the course, update the progress bar to 100%, and show a "Course Complete" screen with an option to return to the main menu or start another course.
4. Collaborative Course Experience (Real-Time Interaction)
Objective: Allow users to collaborate in real-time on a course, with the ability to see each other’s progress, cursors, and profile information.
4.1 Shared Session/Lobby:
When a user invites a friend to join the course, both users enter a shared session (similar to a "lobby").
Split-Screen View:
Both users will work on the same course material in a split-screen layout.
The screen should be divided into two sections, each displaying the course material for one user.
4.2 Real-Time Cursor Sharing:
Each user's cursor is displayed in real-time on the other user's screen.
Cursor Position: The cursor of the other user should be represented as a distinct pointer on the screen.
Profile Picture: The profile picture of each user will appear at the top-right corner of the screen next to their cursor to avoid confusion.
Ensure that the cursor appears with smooth real-time updates to maintain synchronization between users.
4.3 Progress Bar Visibility:
Shared Progress Bar: Both users will see the same progress bars on their respective screens, indicating how far along both are in the course. One progress bar for the user and one for the partner.
Real-Time Sync: As one user progresses, the progress bar should update simultaneously for both users.
This ensures that both users are aware of each other’s progress in the course, creating a more collaborative experience.
5. Invite System
Objective: Enable users to send invites to friends and show their status when they join the course.
5.1 Invite Panel:
The panel should be hidden by default and slide out from the right side when hovered over.
Friend List: Display friends or inviteable users (could be a mock list for now).
Each friend in the list should show their profile picture and name.
5.2 Invitation Process:
Send Invite: Clicking the envelope icon next to a friend sends an invite to that user.
Receiving Invites: When the friend accepts, their name and profile picture should appear next to the main user's profile.
5.3 Invite Acceptance:
The user can see the profile picture and name of the friend next to their own.
Use animations for a smooth transition when a friend joins.
5.4 Collaborative Course Entry:
When both users are in the same session, they should be able to start the course together, seeing each other’s progress in real time.
6. Interactive and Usability Features
Objective: Ensure the UI is intuitive and interactive with smooth transitions and animations.
6.1 Animations and Transitions:
Use CSS or JavaScript animations to achieve smooth transitions:
Invite Panel Slide-in Effect: When the panel is hovered, it slides in smoothly from the right.
Profile Section: Ensure profile picture and name appear clearly, with a smooth fade-in effect when the user logs in or the page loads.
6.2 Cursor Interaction:
Reading and Progress Tracking: The interaction of moving the cursor under the text being read should be fluid. Add a subtle animation for the strikethrough effect.
Dynamic Updates: As the user progresses, the course material should update in real time, including the strikethroughs and the progress bar.
6.3 Real-Time Collaboration:
Ensure that both users’ cursors, progress bars, and profile pictures sync perfectly in real time.
Use websockets (or similar technology) for real-time communication between users to ensure minimal delay in updates.
7. Technical Requirements and Considerations
7.1 Front-End Framework/Technology:
HTML/CSS/JavaScript for basic structure and interactivity.
CSS Animations/Transitions for smooth visual effects.
React or Vue.js (optional, for better state management and reactivity).
WebSockets for real-time updates of cursor position, progress, and profile sync.
7.2 Data Management:
Mock data can be used for the friend list, course list, and user profile.
Ensure proper structure for future integration with a backend system for handling real data (e.g., API for user profiles, courses, and invitations).
7.3 User Interaction:
Ensure the interface is responsive, with a focus on mobile and desktop devices.
Provide feedback to users through tooltips, loading spinners, and success/failure messages as necessary.
8. Deliverables:
Main Menu Screen with Profile Section, Main Menu Buttons, and Invite Panel.
Settings Menu with all necessary options.
Course Management System: Course selection, course detail viewing, and course material screen with interactive progress tracking.
Collaborative Course Experience: Split-screen view with real-time cursor sharing, progress tracking, and profile visibility.
Invite System: Fully functional friend invite system with profile updates.
Animations and Transitions: Smooth interactions across all UI elements.
Documentation: Provide a README or similar documentation explaining the code structure and usage instructions.