This repository contains the source code for a Next.js app you can use to publish an interactive course with React.
This template was created to be used on my course on React hooks at useEffect.dev.
- Write lessons using MDX.
- Create sublessons to organize your course content.
- Embed source code in several languages.
- Embed interactive and editable React examples.
- Use the template as a base, customize it for your needs!
- Next.js, using static site generation by default.
- next-mdx-remote and remark to parse Markdown.
- Prism to highlight the source code examples, with the Dracula theme.
- React Live to embed interactive and editable examples.
- TailwindCSS for styling.
- Clone or fork this repository
- Install dependencies:
yarn - Run the app:
yarn dev - Open http://localhost:3000 and enjoy 😉
The lessons are located in lessons directory.
Because of the current implementation (that you are free to improve), here are the rules the lessons must follow:
- The files must named with
.mdxextension. - The header (between
---) must include atitleand a type (foreword,lesson,sublesson, orappendix). - For sublessons, the
parentattribute in the header must refer to a valid lesson, and please don’t create loops 😉 - The lessons filenames should be all lowercase.
- The lessons filenames give the order the lessons will be displayed, so I recommend prefixing them with an index number or letter.
Please submit an issue (or better, a pull request) if you want to report a problem or suggest an improvement.
But also know that this template is offered free of charge, and I can’t guarantee to fix all problems 🙂.