Introducing WriteOnce - A Markdown Editor For Devs Who Blog

Introducing WriteOnce - A Markdown Editor For Devs Who Blog

My Submission to the awesome HACK-R-PLAY hackathon by ReactPlay

ยท

4 min read

Hi, there developers! It's Ammaar here. In this article, I'd like to introduce to you all, the latest project that I've worked on as part of the HACK-R-PLAY hackathon conducted by ReactPlay. So without any further ado let's dive in!

Project Introduction ๐Ÿš€

WriteOnce - A Markdown Editor For Devs Who Blog.

Now, I know what you're thinking from the above line. "Another markdown editor ๐Ÿ™„" Yes, I agree that it is in fact another markdown editor, but this one's a bit different, trust me.

As a developer, it is always encouraged to start blogging. You can start by building out your own one, cuz why not. Or you could opt-in to use a blogging platform like Hashnode, Dev.to, Medium, etc.

Either choice you make, there's going to come a day when you decide to tag along on and publish on multiple platforms. Even now there are tons of developers who do that. Now if you take me for instance, I started out blogging through hashnode and now I'm wanting to try out Dev.to and publish my articles there as well.

The sort of inconvenience I faced after making the decision was choosing a markdown editor. I could either write the article in the Hashnode editor and then paste the content in the Dev.to editor and publish or vice versa.

So this is where WriteOnce comes into play. It's essentially a place where you can write articles, save them, delete them, etc and offers certain features/automation to improve the blogging experience of a developer. One of which, I'm starting out within this MVP is the automation of publishing to different platforms through the application itself.

Features Of WriteOnce

I'm publishing this as an MVP and I'm planning on adding more and more features to it down the line. So here are some features it currently offers:

  • Authentication using Google & GitHub
  • Automatic saves to the Posgresql DB offered by Nhost
  • Editor/Previewer scroll sync
  • Upload cover images
  • Easily publish to Hashnode from the editor (Current MVP only supports publishing to Hashnode. Future updates will include publishing support to Dev.to among many other cool features that'd make a dev blogger's workflow way easier!)
  • ๐ŸŒ“ Website Light/Dark Mode

Tech Stack โš™

  1. Next.js - Frontend/Automation functionalities
  2. Nhost - Backend (Postgresql, Hasura, Storage, API(GraphQL), Authentication)
  3. Tailwind CSS - CSS framework for styling
  4. NextAuth.js - For user authentication
  5. Hashnode API - For Publishing to Hashnode
  6. Vercel - Hosting the project
  7. And many other awesome packages created by the community!

Struggles when building the application ๐Ÿ˜ต

The only barrier that I initially thought I would have when building the application was Nhost. I had this thought because I hadn't used it before. But when actually working with Nhost, I found it to be really easy to adopt in my workflow. It offers tons of features like authentication, storage, DB, GraphQL API just to name a few.

The documentation of Nhost is what I mostly relied on when working with Nhost and it didn't let me down, so kudos to the ones behind the documentation ๐Ÿ˜˜

What I Learned While Building WriteOnce

The main thing that I'd say that I have learned from building this project is using Nhost and Hasura. I previously had zero knowledge in both and now I can say that I'm catching onto it. Apart from these I also brushed up on advanced concepts of GraphQL and using the Apollo Client.

Future Plans For WriteOnce ๐Ÿ”ฎ

As I mentioned earlier, I haven't built out everything perfectly as I intended. instead, I've built the essential building blocks of WriteOnce. So here are some plans/future updates I have in mind for WriteOnce:

  • Allow users to publish to multiple platforms like Dev.to, Medium (Currently supports publishing only to Hashnode.)
  • Allow users to export the written article as a .md file to be used externally.
  • Allow users to preview the written article in the respective platforms in the form of Preview Drafts before the user publishes the article.
  • Improving styling throughout the application.
  • Add more settings/functionalities to the editor.
  • Allow users to add more meta content like tags, subtitles, og-image, etc.
  • Allow users to schedule articles to be published.
  • Allow users to share drafts
  • Add feature for social media automation (i.e. Twitter, LinkedIn, etc)

Feel free to drop you thoughts as well in the comments down below.

Final Words ๐Ÿ

Well, we've come to the end of the article. Thank you very much for taking the time for reading this. If you enjoyed reading and find this article useful, consider liking and sharing it with others. And I'd like to take this opportunity once again to thank ReactPlay and Nhost for conducting this hackathon. And I'm glad that I was able to share WriteOnce with you all as part of it.

Looking forward to more Hackathons by ReactPlay and Nhost ๐Ÿคฉ

Did you find this article valuable?

Support ReactPlay Blog by becoming a sponsor. Any amount is appreciated!