Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsyntes/merntube
Best quality Full Stack Video and Audio downloader app from YouTube which builds React, Node.js, Express, MongoDB and WebSocket. It provides both a user-friendly interface and a powerful Back-End API with WebSocket.
https://github.com/hsyntes/merntube
express mongodb nextjs nodejs react react-router redux tailwindcss webscoket youtube youtube-api
Last synced: 14 days ago
JSON representation
Best quality Full Stack Video and Audio downloader app from YouTube which builds React, Node.js, Express, MongoDB and WebSocket. It provides both a user-friendly interface and a powerful Back-End API with WebSocket.
- Host: GitHub
- URL: https://github.com/hsyntes/merntube
- Owner: hsyntes
- Created: 2023-09-01T05:15:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-13T13:28:29.000Z (over 1 year ago)
- Last Synced: 2024-10-28T06:54:31.521Z (about 2 months ago)
- Topics: express, mongodb, nextjs, nodejs, react, react-router, redux, tailwindcss, webscoket, youtube, youtube-api
- Language: JavaScript
- Homepage: https://merntube.vercel.app
- Size: 211 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERNTube Frontend
[](https://merntube.vercel.app/)
Welcome to the Frontend documentation of MERNTube, a Full Stack Video & Audio downloader in the best quality from YouTube powered by YouTube Data API and WebSocket technology. This documentation provides an overview of the frontend architecture, components, and key functionalities of the application.
### Backend API
The MERNTube Backend API serves as the core of the MERNTube platform, data management, database schema design, websocket and more. Explore the API documentation for detailed information on endpoints, usage, and integration.
Please visit here to see the backend code: [MERNTube - Backend](https://github.com/hsyntes/merntube-api)
## Technologies Used
WebSocket: A bidirectional communication protocol that can send the data from the client to the server or from the server to the client by reusing the established connection channel. The connection is kept alive until terminated by either the client or the server.
React: A JavaScript library for building user interfaces, providing a component-based architecture and efficient rendering.
React-Query: A data-fetching library for React applications, enabling seamless data management and caching.
Redux: A state management library, enabling centralized data storage and easy state updates.
React-Router: A routing library for React applications, enabling navigation and URL handling.
Tailwind CSS: A utility-first CSS framework, providing a set of pre-defined classes for styling components.
[](https://merntube.vercel.app)
## React-Query Integration
React-Query is used to fetch and manage data in the frontend. The library provides hooks for fetching data from the backend API, caching responses, and handling loading and error states.
## Redux Integration
Redux is used for global state management in the frontend. It stores user authentication information, such as the JWT token, and manages user-related actions like logging in and logging out.
## React-Router Integration
React-Router is used for client-side routing, allowing smooth navigation between different pages and managing URLs for specific content.
## TailwindCSS Styling
[](https://merntube.vercel.app) [](https://merntube.vercel.app)
## Powerful YouTube Data API
The YouTube Data API lets you incorporate functions normally executed on the YouTube website into your own website or application. The lists below identify the different types of resources that you can retrieve using the API. The API also supports methods to insert, update, or delete many of these resources.
## 🔗 Contact me
[](https://www.linkedin.com/in/hsyntes)