├── .gitignore
├── public
    ├── js
    │   ├── following.js
    │   ├── script.js
    │   └── first.js
    └── css
    │   └── style.css
├── views
    ├── first.ejs
    ├── following.ejs
    └── layout.ejs
├── README.md
├── package.json
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/public/js/following.js:
--------------------------------------------------------------------------------
1 | const getDataFromAPI = (name) =>
2 |   (window.location.href = `https://www.twitchdatabase.com/following/${name}`);
3 | 


--------------------------------------------------------------------------------
/views/first.ejs:
--------------------------------------------------------------------------------
1 | <h1>Enter a name to see their first followers...</h1>
2 | <input class="form-control text-center" placeholder="Example: Ravenbtw" autofocus>
3 | <div class="row result-div justify-content-center"></div>


--------------------------------------------------------------------------------
/views/following.ejs:
--------------------------------------------------------------------------------
1 | <h1>Enter a name to see who they're following...</h1>
2 | <input class="form-control text-center" placeholder="Example: Ravenbtw" autofocus>
3 | <div class="row result-div justify-content-center"></div>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Twitch Following
2 | Simple web app that shows you who Twitch users are following.
3 | 
4 | # Running
5 | - Run `npm i` to install dependencies. 
6 | - Run `npm start` to start the web server. 
7 | - Open https://localhost:8081 to visit the web app. 
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "twitch-following",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node ."
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "ejs": "^3.1.5",
14 |     "express": "^4.17.1",
15 |     "express-ejs-layouts": "^2.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
 1 | const input =  document.querySelector('input');
 2 | const resultDiv =  document.querySelector('.result-div');
 3 | 
 4 | const clientID = 'cclk5hafv1i7lksfauerry4w7ythu2';
 5 | 
 6 | let currentlySearching = false;
 7 | 
 8 | let starterName = location.search.substring(1);
 9 | 
10 | if (starterName) {
11 |     input.value = starterName.toLowerCase();
12 |     history.pushState(null, null, `?${input.value.toLowerCase()}`);
13 |     getDataFromAPI(starterName);
14 | }
15 | 
16 | input.onkeydown = event => {
17 |     if (event.which === 13) {
18 |         input.value = input.value.toLowerCase();
19 |         history.pushState(null, null, `?${input.value.toLowerCase()}`);
20 |         getDataFromAPI(input.value);
21 |     }
22 | }


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     min-height: 100%;
 3 | }
 4 | 
 5 | body {
 6 |     position: absolute;
 7 |     width: 100%;
 8 |     padding-bottom: 286px;
 9 | }
10 | 
11 | body, input {
12 |     font-family: 'Open Sans', sans-serif !important;
13 | }
14 | 
15 | a {
16 |     text-decoration: none !important;
17 | }
18 | 
19 | .bg-black {
20 |     background-color: #000;
21 | }
22 | 
23 | .bg-purple {
24 |     background-color: #9146FF;
25 | }
26 | 
27 | .bg-grey {
28 |     background-color: #0E0E10;
29 | }
30 | 
31 | .text-purple, .text-purple:hover {
32 |     color: #9146FF;
33 | }
34 | 
35 | .ad {
36 |     position: absolute;
37 |     bottom: 50px;
38 |     width: 100%;
39 |     height: 286px;
40 | }
41 | 
42 | .footer {
43 |     position: absolute;
44 |     bottom: 0;
45 |     width: 100%;
46 |     height: 50px;
47 |     line-height: 50px;
48 | }
49 | 
50 | .following-card {
51 |     transition: opacity 1s, transform 0.2s;
52 | }
53 | 
54 | .following-card:hover {
55 |     transform: scale(1.05);
56 | }
57 | 
58 | .first-card p {
59 |     margin: 0;
60 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const expressLayouts = require('express-ejs-layouts');
 3 | 
 4 | const app = express();
 5 | 
 6 | app.set('view engine', 'ejs');
 7 | 
 8 | app.use(expressLayouts);
 9 | 
10 | app.use(express.static('public'));
11 | 
12 | const featuredChannels = ['streamcanvas'];
13 | 
14 | app.use((req, res, next) => {
15 |   res.locals.showFirstFollowersButton = new Date() < new Date('02/20/2022');
16 |   next();
17 | });
18 | 
19 | app.get('/', (req, res) => {
20 |   res.render('following', {
21 |     tool: 'following',
22 |     featuredChannel:
23 |       featuredChannels[Math.floor(Math.random() * featuredChannels.length)],
24 |   });
25 | });
26 | 
27 | app.use((req, res, next) => {
28 |   if (new Date() > new Date('02/20/2022')) {
29 |     res.redirect('https://www.twitchdatabase.com');
30 |   } else {
31 |     next();
32 |   }
33 | });
34 | 
35 | app.get('/first', (req, res) => {
36 |   res.render('first', {
37 |     tool: 'first',
38 |     featuredChannel:
39 |       featuredChannels[Math.floor(Math.random() * featuredChannels.length)],
40 |   });
41 | });
42 | 
43 | app.listen(8083);
44 | 


--------------------------------------------------------------------------------
/public/js/first.js:
--------------------------------------------------------------------------------
 1 | const getDataFromAPI = name => {
 2 |     resultDiv.innerHTML = `<div class="col-12 my-3"><h1>Looking for ${name}'s Twitch ID...</h1></div>`;
 3 |     fetch(`https://api.twitch.tv/kraken/users?login=${name}`, {
 4 |         headers: {
 5 |             'Accept': 'application/vnd.twitchtv.v5+json',
 6 |             'Client-ID': clientID
 7 |         }
 8 |     })
 9 |     .then(res => res.json())
10 |     .then(usersData => {
11 |         if (usersData && usersData.users && usersData.users[0]) {
12 |             const user = usersData.users[0];
13 |             resultDiv.innerHTML = `<div class="col-12 my-3"><h1>Looking for ${user.display_name}'s first followers...`;
14 |             fetch(`https://api.twitch.tv/kraken/channels/${user._id}/follows?limit=100&direction=asc`, {
15 |                 headers: {
16 |                     'Accept': 'application/vnd.twitchtv.v5+json',
17 |                     'Client-ID': clientID
18 |                 }
19 |             })
20 |             .then(res => res.json())
21 |             .then(firstFollowers => {
22 |                 resultDiv.innerHTML = `<div class="col-12 my-3"><h1>${user.display_name}'s first ${firstFollowers.follows.length} followers:</h1></div>`;
23 |                 resultDiv.insertAdjacentHTML('beforeend', `
24 |                 <div class="col-12 mb-3">
25 |                     <div class="card bg-grey first-card">
26 |                         <div class="card-body">
27 |                             <div class="row">
28 |                                 <div class="col-2">
29 |                                     <p>#</p>
30 |                                 </div>
31 |                                 <div class="col-5">
32 |                                     <p>Name</p>
33 |                                 </div>
34 |                                 <div class="col-5">
35 |                                     <p>Date</p>
36 |                                 </div>
37 |                             </div>
38 |                         </div>
39 |                     </div>
40 |                 </div>`);
41 |                 firstFollowers.follows.forEach((follower, index) => {
42 |                     resultDiv.insertAdjacentHTML('beforeend', `
43 |                     <div class="col-12 mb-3">
44 |                         <div class="card bg-grey first-card">
45 |                             <div class="card-body">
46 |                                 <div class="row">
47 |                                     <div class="col-2">
48 |                                         <p>${index + 1}</p>
49 |                                     </div>
50 |                                     <div class="col-5">
51 |                                         <a class="text-purple" href="https://twitch.tv/${follower.user.name}">${follower.user.display_name}</a>
52 |                                     </div>
53 |                                     <div class="col-5">
54 |                                         <p>${follower.created_at.replace('T', ' ').replace('Z', '')}</p>
55 |                                     </div>
56 |                                 </div>
57 |                             </div>
58 |                         </div>
59 |                     </div>`);
60 |                 });
61 |             });
62 |         } else {
63 |             resultDiv.innerHTML = `<div class="col-12 my-3"><h1>Couldn't find that user. Did you type it right?</h1></div>`;
64 |         }
65 |     });
66 | };


--------------------------------------------------------------------------------
/views/layout.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Twitch Following</title>
 7 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-148995639-2"></script>
 8 |     <script>
 9 |         window.dataLayer = window.dataLayer || [];
10 |         function gtag(){dataLayer.push(arguments);}
11 |         gtag('js', new Date());
12 |         gtag('config', 'UA-148995639-2');
13 |     </script>
14 |     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
15 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
16 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
17 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>    
18 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
19 |     <link rel="stylesheet" href="css/style.css">
20 |     <script src="js/script.js" defer></script>
21 | </head>
22 | <body class="bg-black text-white text-center">
23 |     <div class="bg-purple p-3">
24 |         <a href="https://www.twitchdatabase.com/following" class="text-light">Because I wanna add more to this project than just Following List data, I have decided to re-name it to TwitchDatabase.com. Click here to go there instead!</a>
25 |     </div>
26 |     <div class="navbar navbar-expand-lg navbar-dark bg-purple">
27 |         <div class="container">
28 |             <a class="navbar-brand" href="/">Twitch Following</a>
29 |             <button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
30 |                 <span class="navbar-toggler-icon"></span>
31 |             </button>
32 |             <div class="collapse navbar-collapse" id="collapsibleNavbar">
33 |                 <ul class="navbar-nav ml-auto">
34 |                     <li class="nav-item">
35 |                         <a class="nav-link<%= tool === 'following' ? ' active':'' %>" href="/">Following List</a>
36 |                     </li>
37 |                     <% if (showFirstFollowersButton) { %>
38 |                         <li class="nav-item">
39 |                             <a class="nav-link<%= tool === 'first' ? ' active':'' %>" href="/first">First Followers</a>
40 |                         </li>
41 |                     <% } %>
42 |                     <li class="nav-item">
43 |                         <a class="nav-link" href="https://www.twitchdatabase.com/roles" target="_blank">Mod/VIP Lookup</a>
44 |                     </li>
45 |                 </ul>
46 |             </div>
47 |         </div>
48 |     </div>
49 |     <div class="container my-5">
50 |         <%- body %>
51 |         <script src="js/<%= tool %>.js"></script>
52 |     </div>
53 |     <div class="ad">
54 |         <iframe src="https://player.twitch.tv/?channel=<%= featuredChannel %>&parent=www.twitchfollowing.com&muted=true" muted frameborder="0" width="480" height="270"></iframe>
55 |     </div>
56 |     <div class="footer bg-grey">
57 |         <p class="m-0">Made by <a class="text-purple" href="https://ravenbtw.com">Ravenbtw</a></p>
58 |     </div>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------