CodeMode is a Google Chrome extension that turns any Youtube coding tutorial into an interactive learning platform. Activate CodeMode by installing the extension on the Chrome Web Store.
Youtube has invaluable educational videos and active communities of content creators and students. Unfortunately, for those students to practice what they're learning, they have to find the video's sample code somewhere else on the web (if the content creator has made it available), open a separate tab or program to work, and constantly switch between these windows in order to follow along.
CodeMode simplifies this process and makes practice easier.
How does it work?
CodeMode dramatically simplifies the process of coding along to Youtube videos by adding a drawer to the bottom of the video's page. Users can toggle this drawer open and code inside of its code editor. CodeMode keeps track of questions assigned to individual videos so viewers can practice the skills they are learning without having to leave the page. Finally, content creators can contribute to the videos and questions in the CodeMode database.
You can view the CodeMode product demo on Youtube to learn more about how we created CodeMode.
How to run CodeMode locally
- Open your terminal window, navigate to your desired directory, and type the following:
> git clone email@example.com:World-of-Code/code-mode.git > cd code-mode > yarn > yarn run start-dev
- Open up Chrome and go to
- Make sure the 'Developer Mode' checkbox is on
- Click 'Load unpacked extension...'
- Navigate to the folder with CodeMode's
manifest.jsonfile and click 'Select'
- Now you should be able to navigate to any Youtube video and see the CodeMode drawer at the bottom of the page!
- When multiple Youtube videos are open in separate tabs, CodeMode forces each page to reload continuously.
- Pay attention to the linter
- Do not use semicolons
module.exportsin .js files
exportin .jsx files
importstatements at top
- Put the
default exportat bottom
- Consider splitting up any file larger than 100 lines
- Name files using lowercase-and-dashes instead of camelCase or PascalCase, except for when the default export is a class
- Define React components as pure functions (instead of classes) whenever possible
React Redux PostgreSQL Express Node Mocha/Chai
Made with ❤ by
Special thanks to the team at Fullstack Academy for making this team and project possible.