Giter Site home page Giter Site logo

apurbostarry / home-media-server-frontend- Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 610 KB

The frontend of a web-based LAN Media server whose contents can be accessed by any device in the same network.

License: MIT License

HTML 8.92% CSS 6.62% JavaScript 84.46%

home-media-server-frontend-'s Introduction

IMPORTANT: The repository of the backend of this project is here

Table of Contents

What it does?

This is LAN media server whose contents can be accessed by any device on the LAN.

For example, you have a device(e.g. PC, Laptop) that has movies, photos etc which you want to access from your other devices(e.g. TV, Phone). There are several way of doing so. You can copy the files, cast to the desired device and many more. But these are not practical and convenient solutions always.

Let's imagine, you have a 4K movie stored in your PC or Laptop whose size is around 6 GB. If you want to access this movie from another device, you have to copy the movie file to that device which will take around 5 minutes. Or you can cast from the device where the movie file is located to the device from where the movie will be accessed. But this is also not convenient for several reasons.

That's when this Home Media Server comes into the picture. You can access any movie, any photo from any device on the LAN which are stored in your PC or Laptop with least latency. This app streams videos so efficiently that you won't feel any difference.

How to run it?

  1. Follow the steps described in the backend repository of this project.
  2. You must have node.js installed on your system.
  3. You must have create-react-app installed on your system. If not simply run int the terminal: sudo npm i -g create-react-app
  4. Download all the files from this repository
  5. In the terminal run: npm init
  6. Edit the file named ipAddress.json inside src folder. Edit the IP address of the server.
  7. In the terminal run: npm start
  8. The above command will start the app if no error occurs and will print the ip address app to access in your network.
  9. That's it. Use the IP address to access your media files. Enjoy!

How it works?

  1. This is a client app that uses React. It has several components to render on the client side.
  2. Among all the components, the video component uses HTML5 to render video on the client side.

home-media-server-frontend-'s People

Contributors

apurbostarry avatar

Stargazers

Ashley D avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.