diff --git a/build.gradle.kts b/build.gradle.kts
index 384f5d5..1b68790 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,5 +1,5 @@
 plugins {
-    id("org.jetbrains.kotlin.js") version "1.3.70-eap-184"
+    id("org.jetbrains.kotlin.js") version "1.4.0"
 }
 
 group = "org.example"
@@ -12,28 +12,33 @@ repositories {
     jcenter()
 }
 
+kotlin {
+    js {
+        browser {}
+        binaries.executable()
+    }
+}
+
 dependencies {
     implementation(kotlin("stdlib-js"))
 
     //React, React DOM + Wrappers (chapter 3)
-    implementation("org.jetbrains:kotlin-react:16.9.0-pre.89-kotlin-1.3.60")
-    implementation("org.jetbrains:kotlin-react-dom:16.9.0-pre.89-kotlin-1.3.60")
-    implementation(npm("react", "16.12.0"))
-    implementation(npm("react-dom", "16.12.0"))
+    implementation("org.jetbrains:kotlin-react:16.13.1-pre.110-kotlin-1.4.0")
+    implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.110-kotlin-1.4.0")
+    implementation(npm("react", "16.13.1"))
+    implementation(npm("react-dom", "16.13.1"))
 
     //Kotlin Styled (chapter 3)
-    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.90-kotlin-1.3.61")
-    implementation(npm("styled-components"))
-    implementation(npm("inline-style-prefixer"))
+    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.110-kotlin-1.4.0")
+    implementation(npm("styled-components", "~5.1.1"))
+    implementation(npm("inline-style-prefixer", "~6.0.0"))
 
     //Video Player (chapter 7)
-    implementation(npm("react-player"))
+    implementation(npm("react-player", "~2.6.0"))
 
     //Share Buttons (chapter 7)
-    implementation(npm("react-share"))
+    implementation(npm("react-share", "~4.2.1"))
 
     //Coroutines (chapter 8)
-    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-common:1.3.3")
-}
-
-kotlin.target.browser { }
\ No newline at end of file
+    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9")
+}
\ No newline at end of file
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index ba94df8..6c9a224 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
new file mode 100644
index 0000000..ea4a30e
--- /dev/null
+++ b/src/main/kotlin/App.kt
@@ -0,0 +1,96 @@
+import kotlinx.coroutines.async
+import kotlinx.css.*
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+import kotlinx.browser.window
+import kotlinx.coroutines.*
+
+suspend fun fetchVideo(id: Int): Video =
+    window.fetch("https://my-json-server.typicode.com/kotlin-hands-on/kotlinconf-json/videos/$id")
+        .await()
+        .json()
+        .await()
+        .unsafeCast<Video>()
+
+suspend fun fetchVideos(): List<Video> = coroutineScope {
+    (1..25).map { id ->
+        async {
+            fetchVideo(id)
+        }
+    }.awaitAll()
+}
+
+external interface AppState : RState {
+    var currentVideo: Video?
+    var unwatchedVideos: List<Video>
+    var watchedVideos: List<Video>
+}
+
+class App : RComponent<RProps, AppState>() {
+    override fun AppState.init() {
+        unwatchedVideos = listOf()
+        watchedVideos = listOf()
+
+        val mainScope = MainScope()
+        mainScope.launch {
+            val videos = fetchVideos()
+            setState {
+                unwatchedVideos = videos
+            }
+        }
+    }
+
+    override fun RBuilder.render() {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            videoList {
+                videos = state.unwatchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            videoList {
+                videos = state.watchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
+            }
+        }
+        state.currentVideo?.let { currentVideo ->
+            videoPlayer {
+                video = currentVideo
+                unwatchedVideo = currentVideo in state.unwatchedVideos
+                onWatchedButtonPressed = {
+                    if (video in state.unwatchedVideos) {
+                        setState {
+                            unwatchedVideos -= video
+                            watchedVideos += video
+                        }
+                    } else {
+                        setState {
+                            watchedVideos -= video
+                            unwatchedVideos += video
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index efa3a07..f6342e2 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -1,5 +1,12 @@
-import kotlin.browser.document
+import react.dom.*
+import kotlinx.browser.document
+import kotlinx.css.*
+import styled.*
+
+data class Video(val id: Int, val title: String, val speaker: String, val videoUrl: String)
 
 fun main() {
-    document.bgColor = "blue"
+    render(document.getElementById("root")) {
+        child(App::class) {}
+    }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/ReactPlayer.kt b/src/main/kotlin/ReactPlayer.kt
new file mode 100644
index 0000000..715b267
--- /dev/null
+++ b/src/main/kotlin/ReactPlayer.kt
@@ -0,0 +1,11 @@
+@file:JsModule("react-player")
+@file:JsNonModule
+
+import react.*
+
+@JsName("default")
+external val reactPlayer: RClass<ReactPlayerProps>
+
+external interface ReactPlayerProps : RProps {
+    var url: String
+}
\ No newline at end of file
diff --git a/src/main/kotlin/ReactShare.kt b/src/main/kotlin/ReactShare.kt
new file mode 100644
index 0000000..10b0ccd
--- /dev/null
+++ b/src/main/kotlin/ReactShare.kt
@@ -0,0 +1,26 @@
+@file:JsModule("react-share")
+@file:JsNonModule
+
+import react.RClass
+import react.RProps
+
+@JsName("EmailIcon")
+external val emailIcon: RClass<IconProps>
+
+@JsName("EmailShareButton")
+external val emailShareButton: RClass<ShareButtonProps>
+
+@JsName("TelegramIcon")
+external val telegramIcon: RClass<IconProps>
+
+@JsName("TelegramShareButton")
+external val telegramShareButton: RClass<ShareButtonProps>
+
+external interface ShareButtonProps : RProps {
+    var url: String
+}
+
+external interface IconProps : RProps {
+    var size: Int
+    var round: Boolean
+}
\ No newline at end of file
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
new file mode 100644
index 0000000..2dec04f
--- /dev/null
+++ b/src/main/kotlin/VideoList.kt
@@ -0,0 +1,36 @@
+import kotlinx.html.js.onClickFunction
+import kotlinx.browser.window
+import react.*
+import react.dom.*
+
+
+external interface VideoListProps: RProps {
+    var videos: List<Video>
+    var selectedVideo: Video?
+    var onSelectVideo: (Video) -> Unit
+}
+
+class VideoList: RComponent<VideoListProps, RState>() {
+    override fun RBuilder.render() {
+        for (video in props.videos) {
+            p {
+                key = video.id.toString()
+                attrs {
+                    onClickFunction = {
+                        props.onSelectVideo(video)
+                    }
+                }
+                if(video == props.selectedVideo) {
+                    +"▶ "
+                }
+                +"${video.speaker}: ${video.title}"
+            }
+        }
+    }
+}
+
+fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
+    return child(VideoList::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
new file mode 100644
index 0000000..aa843e2
--- /dev/null
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -0,0 +1,72 @@
+import kotlinx.css.*
+import kotlinx.html.js.onClickFunction
+import react.*
+import react.dom.*
+import styled.*
+
+external interface VideoPlayerProps : RProps {
+    var video: Video
+    var onWatchedButtonPressed: (Video) -> Unit
+    var unwatchedVideo: Boolean
+}
+
+class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState>(props) {
+    override fun RBuilder.render() {
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"${props.video.speaker}: ${props.video.title}"
+            }
+            styledButton {
+                css {
+                    display = Display.block
+                    backgroundColor = if (props.unwatchedVideo) Color.lightGreen else Color.red
+                }
+                attrs {
+                    onClickFunction = {
+                        props.onWatchedButtonPressed(props.video)
+                    }
+                }
+                if (props.unwatchedVideo) {
+                    +"Mark as watched"
+                } else {
+                    +"Mark as unwatched"
+                }
+            }
+            styledDiv {
+                css {
+                    display = Display.flex
+                    marginBottom = 10.px
+                }
+                emailShareButton {
+                    attrs.url = props.video.videoUrl
+                    emailIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
+                }
+
+                telegramShareButton {
+                    attrs.url = props.video.videoUrl
+                    telegramIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
+                }
+            }
+            reactPlayer {
+                attrs.url = props.video.videoUrl
+            }
+        }
+    }
+}
+
+fun RBuilder.videoPlayer(handler: VideoPlayerProps.() -> Unit): ReactElement {
+    return child(VideoPlayer::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file