Github Repo - https://github.com/ajitsinghkaler/devto-clone
Deployed on Firebase - https://dev-toclone.firebaseapp.com/
Last week I created a header component. It was just HTML and it was in the following position.
.
This week I stated adding the body of the dev.to website I used a component to handle all the margins and padding on the body of the dev.to website. And created all body sub-elements as the the children of this Component in routing.
To start with body sub-components I created a home module I created a new module for homepage because people may open other pages before visit our home page so putting our homepage in a different module other than app.module made sense for lazy loading. If your has to be visited before visiting any other pages use home module in app module.
I divided home page into three parts sidebar, articles, extra-info. On careful examination of the dev.to sidebar I divided it into 4 components sidebar-primary, sidebar-social-links, sidebar-tags, sidebar-advertisement. The sidebar-primary will contain all the default options in the sidebar. sidebar-social-links contains all the social links that open in dev.to when clicked on more option in sidebar. Sidebar tags contains tags on dev.to and sidebar-advertisement contain the ad at the bottom of dev.to sidebar.
After building the Basic HTML structure of dev.to sidebar I moved onto the articles section. It is also divided into 3 component featured article, article list, header.
Here we start the use of the dev.to API. This API is divided into 2 parts one which requires a key one which are open so first I will build everything possible to build with the open API and after that we will build a login where you have to put your key and the key will be stored in localStorage and we will run API requiring API token from there. The first question that should come to your mind is shouldn't that be done first. Later on it will require a lot of refactoring. My answer is I want to do refactoring basically in most test projects lot of refactoring is done so we will intentionally make some mistakes along the way to see how we handle refactoring and updating features. I think half of the work done in software is refactoring or updating old features.
We used the articles open API(https://dev.to/api/articles) to get the list of articles. We created an articles-api service which will fetch the data and a article-store service which uses component store for managing the state of the articles. We will use Michael Hadly rx-angular push pipe as it is more performant and does not return null when used. I will go into details of async pipe and push pipe some other time.
After doing all this I reached at the following state.
Next week I will add the article section HTML, CSS and add a tag store, tags API for the tags section we created in the sidebar. If you want to know any details regarding anything comment below.
Honourable Mention and regarding contributions:
Sunny Vakil wanted to contribute to this project. Thanks Sunny for your proposal but I work on this on Thursday's only. I don't have much time to manage the project. I proposed if anyone wants to contribute add a feature request in the issues. I will comment I accept on it and then you can build the feature I won't build it but you will have to release an article on how you build that feature.
Top comments (2)
Great idea and implementation, and so thorough dev process sharing, that’s really interesting, please keep it up 💪👍
Thanks