Inspiration

We saw Markdown as a practical and simple way of quickly marking up text. Despite showing up almost everywhere (for example, on Github and Devpost, there are only a few technologies dedicated to editing Markdown in an easy manner.

What it does

Major Markdown is a space-themed online text editor that has everything you would want a Markdown text editor to have. The most noticeable feature is the live preview, in which the user input is immediately translated into HTML and displayed on the screen, which helps users see exactly how their marked up text looks. Additional features include previewing saved .md files, saving and viewing raw .md files, and saving the Markdown as .pdf files.

How we built it

We used React framework for this app because of it's capability to quickly update the DOM. We also had the help of some Node.js libraries to help us with the app's additional features. The styling was done with pure CSS.

Challenges I ran into

The biggest challenge we ran into was searching for Node modules to help us implement our features, as well as learning how to properly use those modules. Another challenge we ran into was coming up with a good-looking design for the web page, along with getting CSS to do exactly what we wanted it to.

Accomplishments that we're proud of

We are proud that we finished this React project in the short 12 hours, despite the group's limited experience with web development in general. After a crash course on HTML, CSS, Javascript, React, and Git, Emily and Shiying helped design the page and implement that design in terms of React components and CSS. Despite it also being Brian's first time using React, he was the main contributor to all the additional features of our app. Alvin helped all three get up to speed with these web technologies and made contributions to both the styling and the logic of our app.

What's next for Major Markdown

We plan on implementing additional features to Major Markdown in the future. We want to add a selection element that allows users to choose the font size of the editor and preview. We also want to add a toolbar for the editor in order to help new users get up to speed with Markdown.

Share this project:

Updates