Classync - Simon Frisk - Final Project #112

simfrisk · 2025-08-29T11:25:19Z

‼️‼️ Major update just made, I will update the PR description shortly ‼️‼️

Pre made users

Teacher user:
Username: technigo@teacher.com
Password: technigo

Student user
technigo@student.com
Password: technigo

Quick video recap if you don't like to read😂

👇👇👇👇👇👇👇👇👇
https://github.com/user-attachments/assets/72eaf53e-e7be-4a79-aaa3-c7936c73c4e9
👆👆👆👆👆👆👆👆👆

❓ What it is:

A video review platform that solves the problem of giving specific feedback on video content. Instead of saying "around the 3-minute mark" teachers and students can comment directly on video timestamps and have meaningful discussions.

🔗 Links

Netlify link:
https://class-review.netlify.app/

Tips:

you don't have to add a profile image to sign up
Make sure to try teacher and student users
Watch my video for a quick recap of the project.

Backend documentation:
https://project-final-simon.onrender.com/

✨ Core Features

Time-Coded Video Comments - Click anywhere on the video timeline to add comments at specific moments.
Interactive Video Player - Custom video controls with timeline markers, volume controls, and full-screen support.
Comment System - Three types: questions, public comments, and private notes with nested replies and likes.
Class & Project Management - Organize educational content by classes with teacher/student role separation.
Teacher Dashboard - Track unchecked student questions and manage content across classes with direct connection to the timeline on click.
Workspaces - Like an organization, school or such
Teams - This is like a school class, team or department with the possibility to add students and teacher to get different access to different classes to be able to access different vidoes.

🛠️ Tech Stack

Frontend: React 19 + TypeScript, Styled Components, Framer Motion, Zustand state management.
Backend: Node.js + Express, MongoDB with Mongoose, JWT authentication.
Media: Cloudinary for video/photo storage and automatic thumbnail generation.
API: RESTful endpoints with comprehensive Swagger documentation:
State Management: Separate Zustand stores for projects, comments, users, and video controls.

🔮 Future Plans

The users page is a recent addition more a taste of coming features. Planning to add advanced user management, real-time notifications, and enhanced collaboration features as bonus enhancements.
I would also want to add Web Socket for real time comment fetching but to scared to add it before the demos.

🤔 Things to know

I know now that naming the courses as class or classes in the code as a bad idé but so much to refactor for now.
My goal with TypeScript was just to use it so I used a bit more AI on it then I would have liked but it learned a lot!
The touch areas on the timeline markers does have a bigger touch area then Lighthouse says but it does work so the score is not correctly reflected.

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: transparent;
    cursor: pointer;

https://github.com/user-attachments/assets/08be8dcd-28d8-453b-b741-0e6a55dbc8e3


  }

Hope you enjoy the site! 😊

/Simon

- Added routes for deleting and deactivating invitations, enhancing control over invitation links. - Updated workspace invitation controller to handle deletion and deactivation logic, ensuring only authorized users can perform these actions. - Enhanced API documentation for new invitation management endpoints, clarifying usage and permissions. - Refactored front-end components to integrate new invitation management functionalities, improving user experience for teachers managing invitations.

- Updated Team model to include assignedStudents field, allowing for better tracking of team members. - Modified postTeamMember and deleteTeamMember controllers to manage assignedStudents when adding or removing users from teams. - Enhanced getTeams controller to populate assignedStudents, improving data retrieval for team details. - Refactored front-end components to display assignedStudents in TeamsSection and TeamDetailPage, ensuring comprehensive visibility of team members.

- Updated Team model to include role and profileImage properties for assignedStudents, improving data structure for team members. - Modified getTeamById and getTeams controllers to populate role and profileImage for assignedTeachers and assignedStudents, enhancing data retrieval. - Adjusted postUser logic to dynamically assign users to teams based on their role, streamlining team member management during sign-up.

…raction - Introduced a new state for managing copied invitation IDs, enhancing user feedback when copying links. - Refactored invitation display components to improve layout and responsiveness, utilizing flexbox for better alignment. - Updated styles for invitation cards and buttons to enhance visual clarity and user experience. - Streamlined the invitation actions section, consolidating functionality and improving accessibility on smaller screens.

…etrieval - Modified the query in getWorkspaceUsers to select the profileImage field along with name, email, and role, enhancing the user data returned for workspaces.

…and UI updates - Updated createInvitationLink controller to accept an allowedRole parameter, validating it against predefined roles (student, teacher). - Modified SignUpForm to display the invitation role dynamically based on the invitation token validation response. - Enhanced handleSignUpSubmit to set the user role based on the invitation role, defaulting to teacher if not specified. - Introduced a modal in TeachersSection for generating and copying teacher invitation links, improving user experience for managing invitations.

… update - Added a new script for database migration in package.json to streamline workspace management. - Updated API documentation for the validateInvitationToken function to correct formatting and improve clarity on role mismatch responses.

- Updated the migrateToWorkspaces function to correctly assign the created placeholder user from the UserModel.create call, ensuring the placeholder user is properly initialized during migration.

- Moved session.endSession() to a finally block in the migrateToWorkspaces function to guarantee that the session is properly closed after both successful and failed migrations, enhancing reliability of the migration process.

…nality - Removed unused CreateUserSection import from UserPage, simplifying the component structure. - Eliminated the handleDeactivateInvitation function from TeamDetailPage, reducing complexity and improving maintainability. - Updated calendar picker styles in TeamDetailPage to utilize theme-based filtering for better visual consistency.

…rkspace management - Added useEffect in Navigation to fetch user workspaces on mount for logged-in users, improving workspace initialization. - Introduced loading state in UserPage to display a loading spinner while fetching workspace users, enhancing user experience during data retrieval. - Refactored UserPage to conditionally render user sections based on loading state, improving responsiveness and clarity.

JennieDalgren

Great job with this project!
You've done a lot of things and it is approved with VG

Some things you nailed:
• Your backend code is structured well with clear separation of concerns through different controllers.
• The use of async/await along with proper error handling is great.
• Your use of Swagger for API documentation is spot-on. it’s easy to follow and understand.
• Nice looking UI and polished product!
• Great documentation of your work, how to use the project, demo users etc.

Remember to clean up unused code and files.
Also, why not add a favicon to the site! :)

JennieDalgren · 2025-10-09T13:13:17Z

frontend/.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://project-final-simon.onrender.com


add the env files to git ignore?

JennieDalgren · 2025-10-09T13:14:39Z

frontend/public/ bg10.png

You have quite a lot of images and videos, maybe that's okay for now but be aware that the performance can suffer from this.

JennieDalgren · 2025-10-09T13:16:12Z

backend/dist/controllers/OLD-postProject.js

@@ -0,0 +1,31 @@
+"use strict";


is this a file that's not in use?
If so, remove it?

…t max-width based on position, preventing text clipping near edges

…to toggle subtitles and display relevant comments based on video playback time.

…ed text for non-teacher roles

- Introduced a new health check endpoint in the backend to monitor API status. - Added BackendStatusIndicator component to display backend connection status in the frontend. - Integrated health check functionality into user login and sign-up processes to handle cold start scenarios. - Updated existing components to include the BackendStatusIndicator for improved user experience during backend initialization.

…improved performance.

simfrisk added 30 commits August 6, 2025 20:58

Fixed clicking on one comment!

e7d2f07

added backend like endpoint

dbc62fc

forgot to build

c1f8802

made a default for the model likes

c37b87e

Got like frontend to work

f9d18dc

Added likes in the backend to reply

3f42320

Added some styling

4591be5

Added enpoint route

36a347c

Small fix

f446c83

Fixed the dependencies

c792c22

Bug fix

9c87865

Got the patch to work!

179f9d6

added some backend populate

552753c

testing a fix

d494a05

Adde populate endpoint patcgh

8d0547b

Added .en files with base url

e6c67f0

Added more baseurl

940c8d7

Added all api basepath

bf56a15

Added some styling

30f0a45

Added more styling

6bfe4af

Did some more styling for darkmode

c5b4c39

Small theme

dae39b4

Added REgions to the stores

bd66292

Added card Header

384b382

Added the main

19a734b

Added the footer

4376245

Added more cleanup in reply card

e655439

Added toggle

aa25dfe

Added Checks to checkboxes

b4b6cfb

Fixed the css for the teachers cards

fd401f3

simfrisk added 11 commits October 4, 2025 20:34

Update getWorkspaceUsers controller to include profileImage in user r…

cb25334

…etrieval - Modified the query in getWorkspaceUsers to select the profileImage field along with name, email, and role, enhancing the user data returned for workspaces.

Fix placeholder user creation in migration script

ceb6990

- Updated the migrateToWorkspaces function to correctly assign the created placeholder user from the UserModel.create call, ensuring the placeholder user is properly initialized during migration.

JennieDalgren approved these changes Oct 9, 2025

View reviewed changes

JennieDalgren self-assigned this Oct 9, 2025

simfrisk added 12 commits October 22, 2025 18:45

Update README.md

51249ea

Update README to clarify backend section heading

2a40bd3

Test GPG signature

af14692

test

26a51de

test

a8e549c

message

4a9426c

test

5090c43

Update routes, workspace controllers, and review page components

4c6e93a

Add timeline zoom functionality to VideoSection component

41d52b3

refactor MarkerMessage component in VideoSection to dynamically adjus…

2653822

…t max-width based on position, preventing text clipping near edges

Add subtitle functionality to VideoSection component, allowing users …

e528e66

…to toggle subtitles and display relevant comments based on video playback time.

Update invitation messages in SignUpForm component to include localiz…

ad6f230

…ed text for non-teacher roles

simfrisk force-pushed the main branch 2 times, most recently from 635e807 to ad6f230 Compare January 7, 2026 02:47

simfrisk added 3 commits January 7, 2026 03:50

invitation message in SignUpForm component for student role

bae966a

Remove unused index on token field in WorkspaceInvitation schema for …

5dcd872

…improved performance.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Classync - Simon Frisk - Final Project #112

Classync - Simon Frisk - Final Project #112

Uh oh!

simfrisk commented Aug 29, 2025 •

edited

Loading

Uh oh!

JennieDalgren left a comment

Uh oh!

JennieDalgren Oct 9, 2025

Uh oh!

JennieDalgren Oct 9, 2025

Uh oh!

JennieDalgren Oct 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1 @@
		VITE_API_BASE_URL=https://project-final-simon.onrender.com No newline at end of file

Classync - Simon Frisk - Final Project #112

Are you sure you want to change the base?

Classync - Simon Frisk - Final Project #112

Uh oh!

Conversation

simfrisk commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

JennieDalgren Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

JennieDalgren Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

JennieDalgren Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

simfrisk commented Aug 29, 2025 •

edited

Loading