timesavertube

Group 27

Short description of our project

TimeSaverTube is a tool designed for busy students seeking more efficient learning. The application allows users to paste a YouTube link, leveraging an API to extract subtitles and providing raw text. Further, in combination with a text analysis API, TimeSaverTube offers features such as summarization and sentiment analysis. This transforms content into a more easily digestible format, enabling students to quickly sift through information without having to navigate through lengthy videos. The user have the option to log in to the website, which allows them to save their summarized texts and sentiment analysis to their profile page.

What We Have Done

In the development of TimeSaverTube, our team has implemented various features to enhance the user experience. Here is a breakdown of what we have accomplished so far, including details about different presenters:

• User Interface for Pasting YouTube Links: We have successfully designed and implemented a user-friendly interface that allows users to easily paste YouTube links into our application.

• Basic Framework Code: The foundational framework for our application has been established, providing a solid structure for further development.

• Data Display from API Call: We've integrated an API to extract relevant data, ensuring that information from the provided YouTube links is displayed accurately within the application.

• Text Analysis API Integration: Our application leverages a text analysis API for text summarization and sentiment analysis. This empowers users to quickly digest content without having to navigate through lengthy videos.

• Secure API Configuration: We've taken security seriously by configuring API settings in the apiConfig.js file, ensuring secure communication with external services.

• Routing Implementation: We've set up routing within our application using react-router-dom in ReactRoot.jsx. This allows users to navigate seamlessly between different views and pages.

Presentation Logic Management

To ensure a smooth user experience, we've created various presenters, including:

• startPresenter.jsx: Manages the presentation logic for the Start view, Menu view, and Login view.
• optionsPresenter.jsx: Handles presentation logic for the Options view, Text view, Menu view, and Login view
• aboutPresenter.jsx: Manages the presentation logic for the About view and Menu view.
• profilePresenter.jsx: Handles presentation logic for the Profile view, where users can view their saved texts, and Menu view.

How to setup

Prerequisities:

• Node.js and npm installed on your machine.

1. Clone this to your local maschine : git clone https://github.com/yourusername/timesavertube.git

2. Navigate the project directory: cd timesavertube

3. Install the required dependencies: npm install

4. Configure API setting by editig the "apiConfig.js" file with your API credentials.

5. Start the development server: npm run dev

Our project file structure

• src/
  • views/: Contains React components representing different views/pages.
    • startView.jsx: Component for the initial view.
    • optionsView.jsx: Component for the options view.
    • textView.jsx: Component for the text box where the generated text is displayed.
    • menuView.jsx: Component for the drop down menu that is shown on each page.
    • loginView.jsx: Component for the login function that is shown on the home page and the options page.
    • aboutView.jsx: Component for the about page where the application is explained.
    • profileView.jsx: Component for the profile page where the users saved texts will be displayed.
  • react/:
    • ReactRoot.jsx: Main component setting up routing.
    • startPresenter.jsx: Presenter component for the Start view, Menu view, and Login view.
    • optionsPresenter.jsx: Presenter component for the Options view, Text view, Menu view, and Login view.
    • aboutPresenter.jsx: Presenter component for the About view and Menu view.
    • profilePresenter.jsx: Presenter component for the Profile view and Menu view.
  • style.css: CSS file for styling the application.
  • apiConfig.js: Configuration file for API settings.
  • firebaseConfig.js: central configuration file that provides TimeSaverTube with secure access to Firebase services, enabling user authentication and other Firebase-related functionality within the application.
  • firebaseModel.js: handles Firebase integration, enabling data persistence and synchronization across devices for user-generated content in TimeSaverTube.
  • textModel.js: Manages text-related operations in TimeSaverTube, including summarization, URL handling, saving, and sentiment analysis.
  • textSource.js: Provides essential functions for text-related operations in TimeSaverTube, including summarization, subtitles fetching, and sentiment analysis, utilizing external APIs.