ReactConf.TV
is a place where passionate React developers are able to search & watch organized and up-to-date react conference videos. Check it out!
The data for ReactConf.TV
mainly comes from two YouTube Data API
:
playlists
API to fetch all playlists aYouTube channel
contains- a
channel
normally represent the organization for a particular conference. For example,React Europe
. - a
playlist
is a particular conference event, for example,React Europe 2020
.
- a
playlistitems
API to fetch all videos aplaylist
contains- a
video
in aplaylist
represents a talk in one conference, for example,vjeux's talk about Excalidraw in React Europe 2020
- a
The high-level data sourcing logic looks like this:
- Maintain a manual file
data/ytChannels.json
, to collect the YouTube Channels contain React Conference playlist. The ultimate source comes from ReactJS's community conference - For every
channel
inytChannels
, fetch theirplaylists
and save todata/playlist/<channel-name>.json
- For every
playlist
in one particularchannel
, fetch the video list save tostatic/playlistitems/<playlist-id>.json
- During build-time, the
data/playlist
will be used, so ReactConf.TV knows all conference events. - During runtime, when user navigate to a particular conference event, we can then fire a request to
/static/playlistitems/<playlist-id>.json
using its id, since we deploy those data as static content.
npm install
npm start
open http://localhost:8000/ for running locally reactconf-tv
Welcome to contribute! If you have any idea or suggestion, feel free to open an issue or create a PR.
- Can see the file
data.json
indata
folder , and then you would see below data structure
"ytChannels": [
{
"name": "react-conf",
"display": "React Conf",
"channelId": "UCz5vTaEhvh7dOHEyd1efcaQ",
"conferences": [
{
"name": "react-conf",
"display": "React Conf",
"filters": ["React Conf"]
}
]
}
]
-
ytChannels
name
Channel Namedisplay
Unused for nowchannelId
Channel id which use to fetch youtube api- conferences
name
The name of the playlistdisplay
The playlist name will display on the reactconf-tv playlistfilters
The keyword to get the playlist
- conferences
-
How to get the channel id ?
-
Select the channel which you want to append to reactconf-tv,
you would see the channel id on the url.https://www.youtube.com/channel/${channel_id}
-
-
Where the keyword which I would place in the filters array ?
-
See the below picture , you will see the two playlists,
what they have in common is the keywordReact Conf
,
so if you want to append these palylists,
please concat theReact Conf
in the filters of the channel.- p.s. Because system limitations, please choose the playlist that postfix has particular year.
-
-
Why I concat the structure of channel, but I didn’t see the list in reactconf-tv ?
-
because reactconf-tv is static site, we will output static files we need first.
so maybe you can run below script, you will fetch the data you want, then submit pull request.node scripts/fetch-data.js
-
-
Where does the data come from?
- after running scripts:
node scripts/fetch-data.js
According todata/data.json
data/playlist/
andstatic/playlistitems/
will be generated by the api provided from Youtube data/playlist
repr a list of playlist andstatic/playlistitems/
repr the detail of every video in a playlist- To avoid large bundle size at the first request, we will fetch only
data/playlist/
at build time and considerstatic/playlistitems
as assets
- after running scripts:
- Open a new issue with description.
- Fork and clone the repo. https://github.com/revtel/reactconf-tv.git.
- Create a new branch based off the develop branch.
npm install && npm start
to run the development enviroment.- Make changes.
- Make commit message with conventional commits specification.
- Submit a pull request, referencing any issues it addresses.
- We will review your Pull Request as soon as possible. Thank you for your contribution ✨
The following is the hign level folder structure of reactconf-tv
reactconf-tv
├── CHANGELOG.md
├── LICENSE
├── README.md
├── data
│ ├── data.json
│ └── playlist
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
├── scripts
│ └── fetch-data.js
├── src
│ ├── AppContext.js
│ ├── PageContainer.js
│ ├── components
│ ├── hooks
│ ├── images
│ ├── index.css
│ ├── pages
│ ├── templates
│ └── utils
└── static
├── fonts
├── images
└── playlistitems
Rick Ho
|
Richie Hsieh
|
Sam Huang
|
|
Mylio Chang
|
Chien Hsiao
|
Ula Chao
|
Guy Chien
|