Skip to content

devmuzaky/Mini-Motion

Repository files navigation

MiniMotion - A Video Streaming Application

Live Demo | Video Demo | Technologies used | Key Features | Installation | License | Contact


MiniMotion is a fantastic app for video streaming that lets you upload, watch, clip, and share your favorite gaming moments, anime shorts, or any other cool videos with your friends and the world. It's built using some amazing technologies like Angular, Firebase, Ffmpeg, and Video.js, which provide a range of advanced features and tools to showcase your gaming skills in a fun and exciting way. With MiniMotion, sharing your videos has never been easier!


Welcome to MiniMotion!

Are you a passionate gamer who loves to share your most epic moments with the world? Look no further than MiniMotion! We've got all the tools you need to easily upload, edit, and showcase your gaming skills like never before.

Join our community of fellow gaming enthusiasts and share your videos with friends and family. With MiniMotion, you can be confident that your videos will be seen by thousands of viewers, giving you the recognition you deserve!

Don't worry if you're new to the game, MiniMotion has got you covered. We've got everything you need to take your gaming content to the next level. So what are you waiting for? Sign up today and start sharing your gaming adventures with the world!


Video Demo

Screencast.from.2023-05-09.21-15-53.online-video-cutter.com.mp4

Technologies Used

  1. Angular 15
  2. Rust: Programming language that's perfect for building high-performance web applications.
  3. WebAssembly using FFMpeg: I've used WebAssembly to harness the power of FFmpeg to generate thumbnails from uploaded clips and manipulate video content in real-time.
  4. Firebase: The cloud-based platform that provides me with robust authentication, storage, and Firestore services to develop and deploy web applications.
  5. Advanced RxJs operators: I've leveraged advanced RxJs operators such as combineLatest, forkJoin, and switchMap to handle complex data flows and improve the overall application performance.
  6. Advanced Routing Techniques: I've implemented advanced routing techniques such as resolvers, interceptors, guards, and lazy loading to enable seamless navigation and enhance the user experience.
  7. Reactive Forms Validation: I've used reactive forms validation, including async validators and input masking, to ensure that user input is always valid and secure.
  8. SharedArrayBuffer: I've used SharedArrayBuffer to enable shared storage between the main thread and web worker, improving the application's overall efficiency.I've used SharedArrayBuffer to enable shared storage between the main thread and web worker, improving the application's overall efficiency.
  9. Infinite Scroll: I've implemented infinite scroll manually to enable users to browse through large amounts of content without having to load everything at once.
  10. VideoJs: The popular HTML5 video player that provides a range of features and tools for displaying and manipulating video content.
  11. Tailwind CSS:

Key Features

  1. User Registration: Users can easily create an account to access all of the app's functionalities and start uploading their videos.
  2. User Login: Registered users can log in to their account and access their videos and profile.
  3. Drag & Drop Video Upload: Users can easily upload their video clips by simply dragging and dropping them onto the upload page. Alternatively, users can also use the regular upload button to select the desired video from their local system.
  4. Automatic Thumbnail Generation: MiniMotion automatically generates a thumbnail for each video uploaded by the user, saving time and effort.
  5. Video Management: Users can easily manage their uploaded videos by deleting them, editing their titles, and sorting them as desired.
  6. Infinite Scroll: The app supports infinite scroll, allowing users to navigate through the videos with ease and without the need for manual pagination.
  7. Firebase Authentication: The app uses Firebase for authentication, ensuring secure access to user data and providing a robust authentication system.
  8. Home Page: The home page showcases the latest uploaded clips from users and features an authentication modal to enable users to log in or register.
  9. Clip Details Page: Users can view detailed information about each clip, including the title and the uploader's name.
  10. Contact Me Page: The app provides a contact page where users can easily get in touch with the developer or support team.
  11. Manage Page: After getting authenticated, users can visit the manage page to control their uploaded clips by editing, deleting, and sorting them as desired.
  12. Upload Page: After getting authenticated, users can visit the upload page to upload their clips and select a thumbnail and video title.
  13. 404 Page: The app features a custom 404 page in case users try to access an unregistered route or encounter a broken link.

  14. Installation

    • 1. Clone the repository to your local machine using the following command:
    git clone
    • 2. Navigate to the project's root directory and install the required dependencies:
    npm install
    • 3. Run the app in development mode:
    npm run start
    • 4. Open http://localhost:4200 to view the app in the browser.

    Features to be added

    • User Profile: Users will be able to view their profile page, which will display their uploaded videos and other information.
    • User Settings: Users will be able to change their account settings, including their email address and password.
    • Video Player: The app will feature a video player that will enable users to play the uploaded clips.
    • Video Search: Users will be able to search for videos by title or uploader name.
    • Video Sorting: Users will be able to sort the videos by title or upload date.
    • Video Editing: Users will be able to edit their uploaded videos by trimming them or adding effects.
    • Video Sharing: Users will be able to share their uploaded videos on social media platforms.
    • Video Downloading: Users will be able to download their uploaded videos to their local system.
    • Video Embedding: Users will be able to embed their uploaded videos on other websites.
    • Video Commenting: Users will be able to comment on the uploaded videos.

    Contributing

    • 1. Fork the repository.
    • 2. Create your feature branch: git checkout -b my-new-feature.
    • 3. Commit your changes: git commit -am 'Add some feature'.
    • 4. Push to the branch: git push origin my-new-feature.
    • 5. Submit a pull request.

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details.


    Contact Me