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 :
- Next.js
- Hasura
- Vercel
- React Dropzone
- Tailwind css
- Eslint and Prettier
- Auth0
- 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
- Auth0
- Nextauth
- Magic
- 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.
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
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 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:
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