VideoNoting



Visit VideoNoting Website

VideoNoting is a user-friendly web application designed to enhance note-taking during lectures, tutorials, and other video content. With a focus on simplicity, VideoNoting allows users to create an account, search for videos, and take notes all on a single page, eliminating the need for multiple applications. Additionally, VideoNoting caters to those who prefer to watch educational content on YouTube without being distracted by unrelated videos. The platform ensures that users see only the videos they search for, maintaining their focus and productivity. While VideoNoting is accessible on all devices, using a PC is recommended for the best user experience.

Technologies Used

Programming Languages

  • JavaScript
  • HTML
  • CSS

Frameworks and Libraries

Front-end:
  • React
  • Router
  • Formik
  • Axios
  • React Router-Dom
  • REact-PDF
  • EmailJS
  • Yup

Back-end
  • Axios
  • Express
  • Cors
  • Cloudinary
  • Bcrypt
  • JSON Web Token
  • Streamifier
  • Multer

Key Features

Video Search:

Users can search for videos using the navigation bar, which will provide a selection of videos related to their search.

Note Taking:

Users can take notes while watching a video without needing to open another application, keeping everything on the same page.

Saving Notes:

Users can save their completed notes to folders, which they can revisit at any time.

Editing Notes:

Users can edit any saved notes, allowing them to add or remove content as needed.

Downloading Notes:

Users can download their saved notes as PDFs, making it easy to share notes and keep a local copy on their devices.

Deletion:

Users can delete their saved notes and folders when they are no longer needed.

Video Search:

Users can search for videos using the navigation bar, which will provide a selection of videos related to their search.

Profile Picture:

Users can upload and delete a profile picture to customize their profile's appearance.

Updating Username and Password:

Users have the option to update their username and password at any time.

Account Deletion:

Users can delete their account, which will erase all saved data.

Authentication Flow

Registration

  1. User Input: During registration, the user is prompted to enter their preferred username, password, and a search query to set the type of videos they would like to see upon login.
  2. Username Check: Once the user clicks on register, the server checks to ensure the username does not already exist.
  3. User Registration: If the username is unique, the server registers the user and saves their information into the database.
  4. Password Hashing: The password is hashed using Bcrypt before being stored in the database for enhanced security.

Login

  1. Username Verification: When the user logs in, the server searches the database to verify if the username exists.
  2. Password Verification: If the username exists, the provided password is compared to the hashed password stored in the database using Bcrypt.
  3. Token Generation: If the password matches, the server generates a token and provides it to the client.

Token Handling

  1. Token Storage: The client side stores the token in local storage.
  2. Authentication Requests: Whenever the user wants to make changes that require server interaction (e.g., updating the password, searching for videos, saving notes), the token is included in the request.
  3. Middleware Verification: The middleware verifies the token to ensure it is valid and that the user is authenticated before allowing any actions to proceed.

Logout

  1. Token Deletion: When the user logs out, their token is deleted from local storage.
  2. State Data Clearance: All other state data, such as searched videos, is also cleared to ensure privacy and security.

Additional Information

Security Measures:
  1. Bcrypt: Used for hashing passwords to enhance security and protect user data.
  2. Token-Based Authentication: Ensures that only authenticated users can perform certain actions, protecting the application from unauthorized access.

This flow ensures a secure and efficient authentication process, providing a seamless user experience while maintaining high security standards.