-
-
Previewer Mode of the App
-
Editor Mode of the App
-
Split Screen Mode of the App
Inspiration
Most of the markdown editors were quite cluttered, with too many features at once and lacking certain functionalities like text-to-speech and syntax highlighting for code. That's why I created "Keeper"!
What it does
"Keeper" is a markdown editor and previewer that offers features such as text-to-speech, syntax highlighting for a wide range of programming languages, and an online database (MongoDB Atlas) for storing our notes!
How we built it
We developed "Keeper" using React for the front-end and MongoDB Atlas for the backend. The design was created in Figma, drawing inspiration from Obsidian writing app. We incorporated various libraries, including react-markdown, remark-gfm, and Prism.js for syntax highlighting.
Challenges we ran into
One of the major challenges we encountered was ensuring everything synchronized seamlessly.
Accomplishments that we're proud of
- Implementation of the text-to-speech feature
- Successful integration with a new online database (MongoDB Atlas)
What we learned
Throughout the development of "Keeper," we gained knowledge in the following areas:
- SpeechSynthesis Web API (I didn't even know this existed and it was so cool working with it)
- MongoDB Atlas and its practical usage
What's next for Keeper
In the future, we plan to:
- Enhance its speed and overall performance
- Implement authentication to allow a larger user base to join in.
Log in or sign up for Devpost to join the conversation.