Karthikeyan
Karthikeyan's Blog

Karthikeyan's Blog

Kross post - Final Showdown

Photo by Andrew Neel on Unsplash

Kross post - Final Showdown

Karthikeyan's photo
Karthikeyan
·Mar 31, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

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 :

  1. Next.js
  2. Hasura
  3. Vercel
  4. React Dropzone
  5. Tailwind css
  6. Eslint and Prettier
  7. Auth0
  8. Cloudinary

Process :

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

  1. Auth0
  2. Nextauth
  3. Magic
  4. Firebase

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 api/graphql endpoint

That was another level down.

https://media.giphy.com/media/8xomIW1DRelmo/giphy.gif

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 @apollo/client hooks useQuery and useMutation to create and fetch the queries from hasura's postgres database.

Now to the big step, Creation and preview of post

image.png

Here I made use of Monaco Editor and React Markdown to allow the users to create markdown content and preview them.

image.png

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 hashnode and 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.

Screenshot:

image

Demo:

Conclusion

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.

Links

Web Application : Kross-post
Source Code : https://github.com/skarthikeyan96/kross-post-typescript

 
Share this