Skip to content

FULLSTACK WEB APP - For Storing Valuable Snippets from Videos with I Featuers -> ✂️ Trimming, ✍🏻Notes Section, 🗃️Storing (Folder-Style) , 📝Transcript Exporting, 👾AI-Chatbot with acces to video transcript.

License

Notifications You must be signed in to change notification settings

orbant12/Clippify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

✂️ Clippify Introduction Video 🎞️

klippify.mp4

Welcome to Clippify, a comprehensive and multifaceted project that showcases my mastery of various technologies and skills relevant to the tech industry. This README is designed to provide a detailed insight into the key components and accomplishments of this project, specifically tailored for a tech job recruiter

NUMBER ONE IN GOOGLE SEARCH

Screenshot 2024-08-20 at 12 36 29


Table of Contents

  1. Technologies Used
  2. App Features
  3. Project Components
  4. Problems & Solutions
  5. Usage & Installation

Technologies Used

💻 Frontend • Dir: client

  • FFmpeg
  • React
  • JS
  • HTML
  • CSS & Tailwind
  • Vite
  • Cross Origin Isolation Middleware
  • Lexical Editor
  • Stripe
  • OpenAI

👨🏻‍💻 Backend • Dir: server

  • Node
  • Express
  • EST
  • Firebase Firestore
  • Firebase Authentication
  • Firebase Storage
  • Stripe API
  • OpenAI API

👾 Machine Learning • Dir: RNN_model

  • Tensorflow
  • Python
  • Numpy
  • Pandas
  • Firebase ML Integration

App Features

  1. Mastery of FFMPEG Syntax: Proficient in manipulating media files (mp3, mp4, blob, blob64, URL, data URL) using FFMPEG, showcasing a deep understanding of multimedia processing.

  2. Self-trained Neural Network for Video Transcript Extraction: Built a Convolutional Neural Network using TensorFlow, Numpy, Pandas for video transcript extraction, demonstrating expertise in machine learning and natural language processing.

  3. OpenAI API Implementation: Successfully integrated the OpenAI API to create a ChatBot, showcasing proficiency in leveraging external APIs for advanced functionality.

  4. Authentication and User Data Flow with Firebase: Implemented secure user authentication and managed data flow using Firebase, ensuring a robust and scalable user management system.

  5. Live Database with Firebase Changes on Snapshot: Developed a dynamic system that reflects real-time changes in the Firebase database, demonstrating skills in live data synchronization.

  6. Lexical Editor for Rich Text Editor State Management: Created a lexical editor for managing rich text editor states, showcasing expertise in front-end development and state management.

  7. Stripe API Integration: Implemented Stripe API for payment processing, including setup, proper JSON data fetching, and secure storage of payment information for features like invoices, prices, and subscription states.

  8. **Plain CSS Styling: ** Each Page has its own .css file, layout, and position made with flexbox, components styling written inside the page where the component is placed, there are two types of color themes. (#dark, #light)

  9. Own Policies and Terms of Use: Drafted and implemented custom policies and terms of use, highlighting a commitment to legal and ethical considerations in software development.


Project Components

1. FFMPEG Syntax and Media Manipulation

2. Self-trained Neural Network for Video Transcript Extraction

3. OpenAI API Implementation

4. Authentication and User Data Flow with Firebase

5. Live Database with Firebase Changes on Snapshot

6. Lexical Editor for Rich Text Editor State Management

7. Stripe API Integration

8. CSS Styling

9. Own Policies and Terms of Use


Problems and Solutions

1. ASR Network only accept mp3 / wav files

To solve this problem, I needed to convert a copy of the mp4 to mp3 and upload it to the storage as two seperate files with the same ID (ID.mp4, ID.mp3). For this solution I have made the storage architecture so every user has his own file named with his UID with these inside - userID/FolderID/FileID/ where ID.mp4, ID.mp3, ID.transcript will take place.

2. CORS Isolation for SharedArrayBuffer

After considering the limitations, I have decided to use CORS Isolation to be able to use FFmpeg for trimming, converting, timeline bar and thubnail extraction.

3. CORS Isolated Storage Access

Needed to manually edit Google Console's header's

4. Rich Text Editor State Extraction for Cross Platform Accessability

Lexical Editor has nummerous extraction methods that is why I choose this technology. Lexical allowed me to extract the content into JSON

5. Youtube URL Downloader - MUST move from serverless to REST

I used


Usage & Installation

  1. Clone the repository:

    https://github.com/orbant12/Clippify.git
    cd Clippify
  2. Install dependencies:

    npm install

Or visit from your browser at: https://clippify.net

You will need:

  • Create a Clippify Account

About

FULLSTACK WEB APP - For Storing Valuable Snippets from Videos with I Featuers -> ✂️ Trimming, ✍🏻Notes Section, 🗃️Storing (Folder-Style) , 📝Transcript Exporting, 👾AI-Chatbot with acces to video transcript.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published