How to Code a Vim Tutor with React and CodeMirror
In this video, we go over how to build a Vim tutor with React and CodeMirror in under 60 lines of code. We start off by setting up the React and Tailwind CSS frontend with CodeMirror to allow the user to run Vim commands on an editor. Then we create a challenge to teach the user about Vim keybindings. Finally, we add a React hook counter to display the number of times the programmer completed the Vim challenge.
📖 Code - https://github.com/SuboptimalEng/codi...
🐦 Twitter - / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com
== [ Resources ] ==
Project Inspiration: https://www.vim.so
GitHub Code: https://github.com/SuboptimalEng/codi...
Tailwind CSS: https://tailwindcss.com/docs/guides/c...
CodeMirror: https://www.npmjs.com/package/@uiw/re...
== [ Timestamps ] ==
00:00 What is Vim?
01:06 Vim Tutor Demo
01:58 Set up React with Tailwind
04:03 Set up React with CodeMirror
07:38 Build Simple Vim Editor
11:43 Create Realistic Vim Game
15:12 Update Vim Test Automatically
17:00 Create Vim Tutor Rules
== [ Tags ] ==
#suboptimal #reactjs #vim
