EducatorsTech

Inspiration

I am passionate about education and really want to do something to improve the quality of lectures around me. One thing I saw is that often, the content of the lectures is very bland and boring, and not using active recall to help students. Therefore, with a love for Markdown and programming, I want to create an easy-to-use solution for educators to create engaging content.

What it does

It is a custom markdown parser, using client-side rendering to render my custom syntax. Right now, there are two syntax for creating code block quizzes, and crosswords puzzles. It also connects to a database to have userbase and user authentication

How we built it

The markdown parser is from React Markdown and I use a variety of remark and rehype plugins to intercept that Markdown building process to add my own logic and consequently, syntax. I also wrote my own small plugins since my needs and the syntax I want is very unique. Frontend is built with Next.js and backend is in NestJS. Frontend connect with Backend through Restful API and HTTP requests.

Challenges we ran into

The biggest challenge was understanding how I can intercept the Markdown building process. There are a ton of Markdown parser libraries there, and I needed to do research to understand what fits me best. Eventually, I chose React Markdown for its ability for client-side rendering and extensibility. I took a long time to understand how Markdown is rendered into MAST (with remark) then HAST (with remark-rehype) then HTML(with rehype). After getting of that process, I viewed multiple Github code of already written remark and rehype plugins in order to write my own transformers.

Another challenge is making my site look good. I tried but was not able to do that.

Accomplishments that we're proud of

I am really proud that being able to successful customize the Markdown parsing process after so many hours trying tons of different approach. I am also proud that I was also able to connect to a backend with actual authentication/authorization, so it is actually a real SaaS that people can use (if things get styled up more)

What we learned

• Working with remark and rehype
• Understanding the Markdown render process
• Get more familiar with Next.js and Nest.js, and some quirks of the React 18 version

What's next for EducatorsTech

• More beautiful styles
• Persmission-based note viewing (right now all notes are public)
• More custom Markdown syntax and more React components for more interactive content
• Could expand into a class-room solution

Built With

• nest.js
• next.js
• postgresql
• react.js
• rehype
• remark
• typeorm