Coding a Vim Tutor with React.js and CodeMirror

== [ Description ] == 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 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.

== [ Projects ] == Orbital Video File Browser 👉 https://www.orbital.so

== [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng YouTube ▶ https://youtube.com/SuboptimalEng Website ▶ https://suboptimaleng.com

== [ Resources] == Project Inspiration: https://www.vim.so GitHub Code: https://github.com/SuboptimalEng/VimTutor Tailwind CSS: https://tailwindcss.com/docs/guides/create-react-app CodeMirror: https://www.npmjs.com/package/@uiw/react-codemirror

== [ 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