https://github.com/martyna411/yt-channels-list

YouTube technical channels list
https://github.com/martyna411/yt-channels-list

vanilla-js web-components

Last synced: 2 months ago
JSON representation

YouTube technical channels list

• Host: GitHub
• URL: https://github.com/martyna411/yt-channels-list
• Owner: martyna411
• Created: 2020-06-05T10:38:25.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T08:14:14.000Z (almost 2 years ago)
• Last Synced: 2024-07-30T21:02:47.460Z (5 months ago)
• Topics: vanilla-js, web-components
• Language: JavaScript
• Homepage: https://yt-channels-list.netlify.app
• Size: 3.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### About app (WIP: implement shadow DOM)

---

##### Web Components

For the purposes of this project I have decided to use Web Components. In is a modern and lightweight technology giving the user a lot of flexibility. On the daily basis I develop using Angular framework therefore implemeting reusable components is not a new topic for me. I seperated the app logic into the following:

###### components

-   channel-list

-   channel-tile

-   filter

-   heading

-   sorter

###### services

-   filter-service

-   sorter-service

In order to start the application please use the following commands: `npm install` and `npm run start`. Application will be available on localhost:3000.

---

##### Babel

Transcompiles javascript ECMAScript 2015+ code to enable support for older browsers.

---

##### Webpack

Bundles javascript files into one minified file. My configuration was set up to remove comments and white-spaces characters. Project files are saved into `/dist` folder after successfull build. This package can be deployed to the production server.

###### Development mode using webpack

For development purposes I am using `webpack-dev-server`. It watches for file changes and reloads the browser automatically.

---

##### Channels.json

Localhost server provides a `.json` file with channels data. Due to that fact there is an easy way to modify existing/add new data without re-building and re-deploying the app.

---

##### Unit tests

I used Jest framework. Tests can be found under `src/test` folder. To run tests I use `npm run test` command.

---

### Basic commands

---

-   npm run build - creates dist folder with bundled project files

-   npm run start - runs build command and starts node server

-   npm run server - starts webpack-dev-server (development mode)

-   npm run test - runs tests