<div style="display: flex; justify-content: space-between;">
<div>
<h3>Submitted By:</h3>
<ol>
Gokul Raj

Siddharth Verma
</ol>
</div>
<div>
<h3> Roll No. </h3>
<ul>
2017IMT-035

2017IMT-106
</ul>
</div>
</div>

<p><br></p>

<h1>
<center>
Report
</center>
</h1>

<h3>
<center>

<p><br></p>

A webservice for downloading and streaming Youtube videos based on RESTful APIs.

<p><br></p>

***

</center>
</h3>

<h3>
1. Introduction:
</h3>

This section must provide a brief introduction about the title
and fundamental related to this topic chosen. This section can
have 8-10 paragraphs

<h3>
2. Used Algorithm &amp; Methodology:
</h3>

This section should brief about techniques and algorithm used
to implementation. This section can have 8-12 paragraphs
related to the title/topic.

<h3>
3. Implementation Language &amp; Source Code:
</h3>
<p>
<br>
</p>

>Frontend Source Code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

<p>
<br>
</p>

import React, {useState} from 'react';
import 'tachyons';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './App.css';
import LandPage from './Components/Home/LandPage.js';
import Downloader from'./Components/Downloader/Downloader.js';

function App() {
  const [URL, setURL] = useState('');

  const onChange = (event) => {
    setURL(event.target.value);
  }  

  const onClick = (event) =>{
   console.log(URL);
   fetch(`http://localhost:3000/download?URL=${URL}`)
   .then((encoded_url) => encoded_url.json()) 
   .then((url) => {
      window.open(url, '_blank');
    });
  }

  return(
        <Router>
          <div className= 'App'>
            <Switch>
              <Route exact path='/'>
                <LandPage />
              </Route>
              <Route path='/Downloader'>
                <Downloader onClick={onClick} onChange={onChange}/>
              </Route>
            </Switch>
          </div>
        </Router>
  )
}

<p>
<br>
</p>

export default App;
import React from 'react';
import { Link } from "react-router-dom";
import CardList from './CardList.js'
import './Downloader.css';


const Downloader = ({onClick, onChange}) => {
	return(
    <div className='div flex flex-column center'>
        <h1 className='f2 fw5 ft1 white bg-red center tc br4 title mt6 shadow-3'> Youtube Downloader </h1>
        <div className='flex flex-row center items-center justify-around mt4'>
            <input className='pl3 center input ' type='url' placeholder='Enter video URL' onChange={onChange} />
            <input className='input btn shadow-5 br2' type='button' value='Download' onClick={onClick} />
        </div>
        <CardList />
	</div>
)};

export default Downloader;

<p>
<br>
</p>

import React from 'react';
import { Link } from "react-router-dom";
import './LandPage.css';

const LandPage = () => {
  return (
   <header className='sans-serif'>
      <div className='cover vh-100 bg-left bg-center-l bimage'>
        <div className='vh-100 bg-black-80 pb5 pb6-m pb7-l'>
          <nav className='dt w-100' /> 
          <div className='tc-l mt4 mt5-m mt6-l ph3'>
            <h1 className='f2 f1-l fw2 white-90 lh-title mb4'>Before You Proceed!!!</h1>
            <h2 className='fw1 f3 white-80 lh-copy w-70 center mt3 mb5'>Downloading videos from Youtube is against their terms of service. The API hosted here is for educational purpose only. We DO NOT support downloading Youtube videos in any manner!!.</h2>
            <a className='f6 no-underline grow dib v-mid white ba b--blue ph3 pv2 mb3' href='https://www.youtube.com/t/terms'>Read More</a>
            <span className='dib v-mid ph3 white-70 mb3'>or</span>
            <Link to='/Downloader'>
              <input className='f6 no-underline grow dib v-mid bg-blue white ba b--white ph3 pv2 mb3' type='button' value='Proceed to Downloader' />
            </Link>
          </div>
        </div>
      </div> 
    </header>
  )
};

export default LandPage;

<p>
<br>
</p>

<p>
<br>
</p>

>Backend Server Source Code

const express = require('express');
const cors = require('cors');
const youtubedl = require('youtube-dl');
const app=express();

app.use(cors());

app.get('/download', (req,res) => {
    var URL = req.query.URL;
    youtubedl.getInfo(URL, [], (err, info) => {
    if (err) res.json(err);
    res.json(info.url);
  }); 
});

app.listen(3000,() => {});

<p>
<br>
</p>

>Server Dependencies and scripts

{
  "name": "ytdwnld-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "nodemon": "^2.0.3",
    "youtube-dl": "^3.0.2"
  }
}

<h3>
4. Discussion:
</h3>

This section must brief about the adoption of specified
methodology and algorithm for implementation for Web Services.
This section can have 6-8 paragraphs along with ONE
comparative chart of techniques and methodologies in Tabular
Form.

<h3>
5. Conclusion:
</h3>

This section must have overall conclusion of this report with
maximum TWO paragraphs.

MTIS-9101: Secure Software Systems

<h3>
6. References:
</h3>

&lt;..DO NOT JUST COPY URL FROM GOOOGLE OR ANY WEB SOURCES FROM
INTERNET..&gt;
This section must have atleast 7-10 count of reference into
APA Citation Style. Learn how to write reference into APA
Format at [https://www.igi-global.com/publish/contributor-resources/apa-citation-
guidelines/]