In this post , I will be sharing the tech stack , the process and challenges I faced during the development
Note: Here is the link to my introduction post about the application
Tech Stack :
- React Dropzone
- Tailwind css
- Eslint and Prettier
First Step was to choose the authentication provider. There was these following auth providers which played well i.,e straightforward and easy configuration with Hasura
I picked Auth0 because there free plan was providing 7000 users and configuration was easier. I made use of the
rules section of
Auth0 to insert the data to a user table whenever the user register for application.
Barrier one was complete.
Next step was integrating
Apollo Client with Next.js which was actually little bit pain. This closed issue from Next-auth0 sdk was helpful in setting up the HOC. In order to make the request from the client secure I had to proxy all my api request to
That was another level down.
Next step was setting up the Settings form , to get the API key's of the user.
For this step I made use of the Tailwind forms plugin and
useMutation to create and fetch the queries from hasura's postgres database.
Now to the big step, Creation and preview of post
Here I made use of
Monaco Editor and
React Markdown to allow the users to create markdown content and preview them.
For adding cover images , I made use of
React dropzone and cloudinary to drag and drop and upload to cloudinary to get the image url.
Finally when the user publishes the post , they will get redirected to the
Dashboard where they can view the past posts with dates.
Note: The post will be first published to
dev.to and then the published url will be used as a canonical url to repost the articles in
medium. In the next phase of the application , there will be option for users to use choose which blog can be their primary i,.e article will be posted to the blog first and then published url will be taken and used to repost across other platforms.
Thank you Hashnode and Hasura for the hackathon , learned a lot in the process.
Thank you for tuning in. Application will be under continuous development. Comments and Feedbacks are most welcome. More posts regarding the setup which I learned in the hackthon are on the way.
Web Application : Kross-post
Source Code : https://github.com/skarthikeyan96/kross-post-typescript