Updates on Dev.to clone in Angular — August 20

Github Repo — https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase — https://dev-toclone.firebaseapp.com/

Last week we added details page but did not style the middle articles portion.

This week I added the article section CSS and added basic comments the comments section. Is on a different branch so will not deployed right now.

We have new contributors too Nivetha Mani who is building the videos detail page did a great job she has already completed it added infinite scroll and made everything responsive too she has already completed her work but there are some small changes after that her work would be merged. To have a look you can have a look at her pull request and let me give you a sneak peek.

This week I had a lot of problems with the CSS because the article body was injected and I still could not do the code highlighting properly. It was really really tiring.

I also resolved other small bugs added GitHub action for deployment on main branch. Lets talk about the small bugs earlier the reactions section was static I added the reactions store so that they are dynamic but there is no reaction api provided by the dev.to/api it so lets see if this is going to be a problem as its structure can change anytime because of no support.

I also ran into the grid overflow problem mostly grid automatically takes the free space using fr units but some elements in it does not play well. I came to know about this https://css-tricks.com/preventing-a-grid-blowout/. It was a tricky problem because I put an hour into fixing my inner code blocks but the problem was with the grid.

Adding the GitHub action was fun I have with CI/CD but only on Gitlab I didn’t think it would be this different adding actions for other repos seems a weird concept to me but maybe it grows on me. Lets have a look at the GitHub action.

Let me give you the sneak peek of the newly created comments section too this is going to be hard as the way comments are but we are going to use recursion here to render out all the comments. That is going to interesting you will see a new pattern of rendering these types of structures.

Current Status three branches :-

Main — This branch contains the Homepage, Article-detail with comments, Listing page

Comments — This branch contains the comments section of the article detail page

Nivetha Mani — This branch contains the videos section


I’ve started a new discussion weather we should move the project to Nx on main branch or keep it on angular-cli. Would love to hear everyone’s opinion.


  1. In article details page syntax highlighting does not work
  2. Do we need store for all api


This time I won’t add all the commits there are many I “ll highlight the most useful

  1. add github actions for deployent on main branch
  2. fix article details
  3. Reactions data added
  4. Fix grid layout and add article detail styles

Next time I’ll finish the comments section. if anyone wants to contribute they can connect on twitter with me my handle is @ajitsinghkaler my DM’s are open or on github.

Originally published at https://ajitblogs.com on August 20, 2021.



Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store