Theme picker(02:15:36 - 02:26:51) - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Theme picker(02:15:36 - 02:26:51)
How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.youtube.com/watch?v=-qBavwqc_mY
▶ Source code
https://github.com/craftzdog/inkdrop-ui-mockup-react-native
▶ Koshoji website
https://www.uji-koushouji.jp/eng/index.html
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ My equipment
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4 - https://amzn.to/3MVuPBV
* Tripod: PeakDesign TT-CB-5-150-CF-1 - https://amzn.to/3NCqN2c
* Mic: Zoom H1n - https://amzn.to/38VAwkx
* Keyboard: NuPhy Air60 https://nuphy.com/collections/shop/products/air60
* Keyboard: Keychron Q1 with Gateron Zealios V2 67g
* Browser: Min - https://minbrowser.org/

Follow me online here:
▶ Twitter
▶ Blog https://blog.inkdrop.app/
▶ Instagram https://instagram.com/craftzdog
▶ Subscribe to my Newsletter https://www.devas.life/

00:00 Intro
01:20 Heading to Koshoji
06:56 Create a new react native project
07:15 Install dependencies
10:15 Configure the project
17:45 Integrate React Navigation
19:48 Add main screen and sidebar
25:34 Add types to navigator
26:51 Add basic atoms and light theme
34:19 Style the sidebar with the theme
35:57 Make fixtures
39:38 Container component
41:40 Note list
47:15 Header bar
53:24 Add vector icons
58:26 Touchable (Button)
01:07:55 Add press handler to sidebar
01:09:39 Prepare making header sticky
01:12:02 Sticky header
01:19:22 Implement snapping
01:21:14 Status bar
01:24:20 Swipeable View
01:33:34 Note list swipe action
01:42:06 Bottom sheet
01:54:28 Notebook list
02:01:37 Add Inkdrop logo
02:05:39 Add notebook list to the bottom sheet
02:07:17 Detail screen
02:10:29 Dark theme
02:14:47 Time-up! Let's go home
02:15:15 Fix a TS error in theme
02:15:36 Theme picker
02:26:51 More themes
02:29:24 Thanks for watching

▶ Ingredients
- TypeScript - https://www.typescriptlang.org/
- React Native - https://reactnative.dev/
- React Navigation(v6) - https://reactnavigation.org/
- Restyle - https://github.com/Shopify/restyle
- React Native Reanimated - https://docs.swmansion.com/react-native-reanimated/
- React Native SVG - https://github.com/react-native-svg/react-native-svg
- React Native Vector Icons - https://github.com/oblador/react-native-vector-icons
- React Native Bottom Sheet - https://github.com/gorhom/react-native-bottom-sheet
- jotai - https://jotai.org/

#ReactNative #CodeWithMe #ASMR

#Productivity #Solo dev #Programming #Indie dev #Japan #Temple #Zen #禅
Intro - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Intro

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:00:00 - 00:01:20
Heading to Koshoji - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Heading to Koshoji

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:01:20 - 00:06:56
What are those legs/feets on your macbook? I think that writting is more comfortable with them. - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

What are those legs/feets on your macbook? I think that writting is more comfortable with them.

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:06:35 - 02:29:34
Hi mate, big fan of your works. can you provide details of the MacBook Pro stand.provide purchase link. Appreciate your help. keep rocking. - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Hi mate, big fan of your works. can you provide details of the MacBook Pro stand.provide purchase link. Appreciate your help. keep rocking.

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:06:36 - 02:29:34
Create a new react native project - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Create a new react native project

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:06:56 - 00:07:15
Install dependencies - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Install dependencies

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:07:15 - 00:10:15
We, the of Windows Platform:  - Error: Scanning for pods... BUM! - CocoaPods is only supported on darwin machines 😄😄🤣🤣 - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

We, the of Windows Platform: - Error: Scanning for pods... BUM! - CocoaPods is only supported on darwin machines 😄😄🤣🤣

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:09:30 - 02:29:34
Configure the project - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Configure the project

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:10:15 - 00:17:45
Integrate React Navigation - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Integrate React Navigation

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:17:45 - 00:19:48
Add main screen and sidebar - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add main screen and sidebar

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:19:48 - 00:25:34
Add types to navigator - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add types to navigator

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:25:34 - 00:26:51
Add basic atoms and light theme - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add basic atoms and light theme

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:26:51 - 00:34:19
Style the sidebar with the theme - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Style the sidebar with the theme

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:34:19 - 00:35:57
Make fixtures - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Make fixtures

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:35:57 - 00:39:38
Container component - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Container component

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:39:38 - 00:41:40
Note list - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Note list

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:41:40 - 00:47:15
Header bar - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Header bar

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:47:15 - 00:53:24
Add vector icons - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add vector icons

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:53:24 - 00:58:26
Touchable (Button) - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Touchable (Button)

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
00:58:26 - 01:07:55
Add press handler to sidebar - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add press handler to sidebar

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:07:55 - 01:09:39
Prepare making header sticky - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Prepare making header sticky

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:09:39 - 01:12:02
Sticky header - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Sticky header

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:12:02 - 01:19:22
Implement snapping - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Implement snapping

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:19:22 - 01:21:14
Status bar - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Status bar

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:21:14 - 01:24:20
Swipeable View - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Swipeable View

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:24:20 - 01:33:34
Note list swipe action - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Note list swipe action

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:33:34 - 01:42:06
Bottom sheet - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Bottom sheet

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:42:06 - 01:54:28
Notebook list - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Notebook list

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
01:54:28 - 02:01:37
Add Inkdrop logo - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add Inkdrop logo

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:01:37 - 02:05:39
Add notebook list to the bottom sheet - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Add notebook list to the bottom sheet

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:05:39 - 02:07:17
Detail screen - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Detail screen

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:07:17 - 02:10:29
Dark theme - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Dark theme

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:10:29 - 02:14:47
Time-up! Let's go home - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Time-up! Let's go home

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:14:47 - 02:15:15
Fix a TS error in theme - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Fix a TS error in theme

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:15:15 - 02:15:36
Theme picker - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Theme picker

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:15:36 - 02:26:51
More themes - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

More themes

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:26:51 - 02:29:24
Thanks for watching - How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Thanks for watching

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
2022年06月08日 
02:29:24 - 02:29:34

devaslife

※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。

Timetable

動画タイムテーブル

動画数:65件

Coming up - My strategy to survive the generative AI era as an indie developer

Coming up

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:00:00 - 00:00:42
About the price change - My strategy to survive the generative AI era as an indie developer

About the price change

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:00:42 - 00:01:52
An indie developer brand? Are you serious? - My strategy to survive the generative AI era as an indie developer

An indie developer brand? Are you serious?

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:01:52 - 00:03:13
Emotions are more important towards surviving the Al era - My strategy to survive the generative AI era as an indie developer

Emotions are more important towards surviving the Al era

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:03:13 - 00:05:34
Learning from high-end fashion brands - My strategy to survive the generative AI era as an indie developer

Learning from high-end fashion brands

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:05:34 - 00:07:00
Incorporating my productive vibes into my app - My strategy to survive the generative AI era as an indie developer

Incorporating my productive vibes into my app

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:07:00 - 00:09:47
Edutainment: Education + Entertainment - My strategy to survive the generative AI era as an indie developer

Edutainment: Education + Entertainment

My strategy to survive the generative AI era as an indie developer
2024年02月02日 
00:09:47 - 00:11:20
Intro - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Intro

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:00:00 - 00:01:01
Hello! - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Hello!

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:01:01 - 00:01:51
Introducing Solarized Osaka - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Introducing Solarized Osaka

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:01:51 - 00:02:41
Ditch hex for HSL - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Ditch hex for HSL

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:02:41 - 00:03:12
What is HSL? - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

What is HSL?

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:03:12 - 00:05:05
Color example - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Color example

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:05:05 - 00:07:15
Solarized Osaka's color palet - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Solarized Osaka's color palet

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:07:15 - 00:08:21
Highlight HSL colors in Neovi - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Highlight HSL colors in Neovi

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:08:21 - 00:10:33
Thank you! - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Thank you!

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:10:33 - 00:10:57
Camera died - How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

Camera died

How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023
2023年12月14日 
00:10:57 - 00:11:14
Coming up - Effective Neovim setup for web development towards 2024

Coming up

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:00:00 - 00:00:53
Introduction - Effective Neovim setup for web development towards 2024

Introduction

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:00:53 - 00:03:47
what is this laptop stand? Share link please - Effective Neovim setup for web development towards 2024

what is this laptop stand? Share link please

Effective Neovim setup for web development towards 2024
2023年11月14日  Abi Din 様 
00:03:34 - 01:00:28
Install LazyVim - Effective Neovim setup for web development towards 2024

Install LazyVim

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:03:47 - 00:06:30
Why I chose LazyVim - Effective Neovim setup for web development towards 2024

Why I chose LazyVim

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:06:30 - 00:08:24
Change the theme to Solarized Osaka - Effective Neovim setup for web development towards 2024

Change the theme to Solarized Osaka

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:08:24 - 00:09:39
Basic keymaps - Effective Neovim setup for web development towards 2024

Basic keymaps

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:09:39 - 00:15:16
Customize some keymaps - Effective Neovim setup for web development towards 2024

Customize some keymaps

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:15:16 - 00:16:09
Clone an example project - Effective Neovim setup for web development towards 2024

Clone an example project

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:16:09 - 00:16:52
Change conceallevel - Effective Neovim setup for web development towards 2024

Change conceallevel

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:16:52 - 00:18:17
Enable undercurl - Effective Neovim setup for web development towards 2024

Enable undercurl

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:18:17 - 00:19:08
Install extras - Effective Neovim setup for web development towards 2024

Install extras

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:19:08 - 00:21:48
Configure cowboy - Effective Neovim setup for web development towards 2024

Configure cowboy

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:21:48 - 00:26:23
Configure Telescope - Effective Neovim setup for web development towards 2024

Configure Telescope

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:26:23 - 00:37:31
Noice - Effective Neovim setup for web development towards 2024

Noice

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:37:31 - 00:39:54
Change the notification timeout - Effective Neovim setup for web development towards 2024

Change the notification timeout

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:39:54 - 00:40:50
Incline - Effective Neovim setup for web development towards 2024

Incline

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:40:50 - 00:45:18
bufferline - Effective Neovim setup for web development towards 2024

bufferline

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:45:18 - 00:47:03
lualine - Effective Neovim setup for web development towards 2024

lualine

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:47:03 - 00:47:56
inc-rename - Effective Neovim setup for web development towards 2024

inc-rename

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:47:56 - 00:49:08
mason - Effective Neovim setup for web development towards 2024

mason

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:49:08 - 00:50:37
Tree-sitter - Effective Neovim setup for web development towards 2024

Tree-sitter

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:50:37 - 00:52:46
Disable flash and enable cursor animatior - Effective Neovim setup for web development towards 2024

Disable flash and enable cursor animatior

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:52:46 - 00:54:19
Customize startup logo - Effective Neovim setup for web development towards 2024

Customize startup logo

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:54:19 - 00:55:41
Just discovered this channel and I love it so much. That proud smile at  is everything - Effective Neovim setup for web development towards 2024

Just discovered this channel and I love it so much. That proud smile at is everything

Effective Neovim setup for web development towards 2024
2023年11月14日  Konstantin 様 
00:55:35 - 01:00:28
I love how proud you were lol. I really enjoy watching your videos. They are so calm and informative it's pretty cool - Effective Neovim setup for web development towards 2024

I love how proud you were lol. I really enjoy watching your videos. They are so calm and informative it's pretty cool

Effective Neovim setup for web development towards 2024
2023年11月14日  な 様 
00:55:36 - 01:00:28
Demo: Update my homepage - Effective Neovim setup for web development towards 2024

Demo: Update my homepage

Effective Neovim setup for web development towards 2024
2023年11月14日 
00:55:41 - 01:00:00
Thanks for watching - Effective Neovim setup for web development towards 2024

Thanks for watching

Effective Neovim setup for web development towards 2024
2023年11月14日 
01:00:00 - 01:00:05
One more thing.. - Effective Neovim setup for web development towards 2024

One more thing..

Effective Neovim setup for web development towards 2024
2023年11月14日 
01:00:05 - 01:00:28
Intro - How I take tech notes as a note app author

Intro

How I take tech notes as a note app author
2023年05月30日 
00:00:00 - 00:01:23
The right tool for the right task - How I take tech notes as a note app author

The right tool for the right task

How I take tech notes as a note app author
2023年05月30日 
00:01:23 - 00:03:18
Embrace your imperfection - How I take tech notes as a note app author

Embrace your imperfection

How I take tech notes as a note app author
2023年05月30日 
00:03:18 - 00:04:25
4 steps for taking tech notes - How I take tech notes as a note app author

4 steps for taking tech notes

How I take tech notes as a note app author
2023年05月30日 
00:04:25 - 00:05:38
1. Identify the problem - How I take tech notes as a note app author

1. Identify the problem

How I take tech notes as a note app author
2023年05月30日 
00:05:38 - 00:08:31
2. Research the possible solutions - How I take tech notes as a note app author

2. Research the possible solutions

How I take tech notes as a note app author
2023年05月30日 
00:08:31 - 00:10:59
3. Validate the solutions - How I take tech notes as a note app author

3. Validate the solutions

How I take tech notes as a note app author
2023年05月30日 
00:10:59 - 00:11:37
What worked well - How I take tech notes as a note app author

What worked well

How I take tech notes as a note app author
2023年05月30日 
00:11:37 - 00:13:03
What didn't work - How I take tech notes as a note app author

What didn't work

How I take tech notes as a note app author
2023年05月30日 
00:13:03 - 00:14:48
4. Reuse the knowledge - How I take tech notes as a note app author

4. Reuse the knowledge

How I take tech notes as a note app author
2023年05月30日 
00:14:48 - 00:15:02
Refer to code snippets - How I take tech notes as a note app author

Refer to code snippets

How I take tech notes as a note app author
2023年05月30日 
00:15:02 - 00:15:35
Learn from previous solutions to common errors - How I take tech notes as a note app author

Learn from previous solutions to common errors

How I take tech notes as a note app author
2023年05月30日 
00:15:35 - 00:16:07
Share what you learned - How I take tech notes as a note app author

Share what you learned

How I take tech notes as a note app author
2023年05月30日 
00:16:07 - 00:16:49
Wrap up - How I take tech notes as a note app author

Wrap up

How I take tech notes as a note app author
2023年05月30日 
00:16:49 - 00:17:28
Intro - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Intro

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:00:00 - 00:01:02
Project description - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Project description

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:01:02 - 00:04:18
thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Yuki Okabe 様 
00:01:03 - 01:12:31
Create a new Next.js project with Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a new Next.js project with Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:04:18 - 00:07:23
Prepare using OpenAl - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare using OpenAl

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:07:23 - 00:08:38
Learn how to write Python with ChatGPT - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Learn how to write Python with ChatGPT

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:08:38 - 00:11:49
Transcribe the audio with the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Transcribe the audio with the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:11:49 - 00:14:46
you mean prompt right? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

you mean prompt right?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Aung Zan Baw 様 
00:13:24 - 01:12:31
Try invoking the completion API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Try invoking the completion API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:14:46 - 00:17:35
Get input data from stdin - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Get input data from stdin

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:17:35 - 00:19:26
Load and parse SRT data - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Load and parse SRT data

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:19:26 - 00:21:36
Translate each subtitle - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Translate each subtitle

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:21:36 - 00:24:00
Check out Radix UI and Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Check out Radix UI and Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:24:00 - 00:25:26
Prepare building the UI - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare building the UI

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:25:26 - 00:26:29
Create a form to specify a video URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a form to specify a video URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:26:29 - 00:31:22
Implement event handling - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement event handling

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:31:22 - 00:33:13
Create a component to render the command outputs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a component to render the command outputs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:33:13 - 00:36:40
Add tabs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add tabs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:36:40 - 00:42:02
Add an API routing - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add an API routing

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:42:02 - 00:42:47
Implement an audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement an audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:42:47 - 00:48:09
Implement a transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:48:09 - 00:50:17
Excellent video! In  (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;) - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;)

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Ice Livin 様 
00:50:06 - 01:12:31
Implement a translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:50:17 - 00:53:22
Connect the components with states - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Connect the components with states

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:53:22 - 00:55:42
Extract a video ID from the YouTube URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Extract a video ID from the YouTube URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:55:42 - 00:57:39
Progressively update the output by a callback function - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Progressively update the output by a callback function

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:57:39 - 01:00:12
Fix scroll overflow issue - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix scroll overflow issue

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:00:12 - 01:00:55
Invoke the audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:00:55 - 01:04:50
Invoke the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:04:50 - 01:07:28
Fix the transcription prompt not working - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix the transcription prompt not working

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:07:28 - 01:07:51
Invoke the translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:07:51 - 01:10:42
Finish it up - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Finish it up

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:10:42 - 01:10:56
Demo - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Demo

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:10:56 - 01:12:31
Furna - Lotus - [playlist] Melodies for coding | Focus & Chill

Furna - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:00:00 - 00:04:02
Drawing - LUCHS - [playlist] Melodies for coding | Focus & Chill

Drawing - LUCHS

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:04:02 - 00:06:22
And Lucie Dreams - Lotus - [playlist] Melodies for coding | Focus & Chill

And Lucie Dreams - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:06:22 - 00:09:57
Mint Conditions - Dusty Decks - [playlist] Melodies for coding | Focus & Chill

Mint Conditions - Dusty Decks

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:09:57 - 00:12:08
Cousin Stratus - Lotus - [playlist] Melodies for coding | Focus & Chill

Cousin Stratus - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:12:08 - 00:15:13
Tiny Room Bop - [ocean jams] - [playlist] Melodies for coding | Focus & Chill

Tiny Room Bop - [ocean jams]

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:15:13 - 00:17:33
Parallax - Luwaks - [playlist] Melodies for coding | Focus & Chill

Parallax - Luwaks

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:17:33 - 00:20:39
Lisbon - Shiruky - [playlist] Melodies for coding | Focus & Chill

Lisbon - Shiruky

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:20:39 - 00:23:39
I'll Follow - Mochas - [playlist] Melodies for coding | Focus & Chill

I'll Follow - Mochas

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:23:39 - 00:26:12
Lupi - Sayuri Hayashi Egnell - [playlist] Melodies for coding | Focus & Chill

Lupi - Sayuri Hayashi Egnell

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:26:12 - 00:28:17
Tau - Osoku - [playlist] Melodies for coding | Focus & Chill

Tau - Osoku

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:28:17 - 00:31:12
Have a productive day - [playlist] Melodies for coding | Focus & Chill

Have a productive day

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:31:12 - 00:31:23