Hi Buddy,
This repo is made to showcase my React.JS skills. I have used all advanced technolgies and concepts to achieve the desired output. Check the list below
The entire project is build using functionals components AKA Hooks. Inbuild hooks such as useState, useEffect & useRef are being widely used over this entire project.
To fetch data, i have used custom hook. This helps to achieve modularity in our code and it also helps to segregate logic from UI/view.
Infinite scrolling has been added to fetch articles on the go. It fetches 8 articles per scroll. It fetches new article once the user reaches to the last of currently fetched articles. I have used IntersectionObserver provided by JS to keep observing this last article on the page.
I heard somewhere that there are extra point for uploading the project on github? I will do one better. I have uploaded this project to a live server. Feel free to test. Link - https://scoop-whoop-dhoop.netlify.app/
I have deliberately used node-sass to demonstrate my knowledge and understanding of using CSS precompilers.
This has been added to have slider for trending section. As per my breif overview, a similar 3rd party slider is being used on PROD site as well.
I have used Material-UI to showcase my level of comfort with it. It is mostly used to impart responsivness to the website using dynamic GRID layout. Projects navbar is also been created using material ui AppBar
Material UI arrow icons or also used in multiple places
Single responsibilty principle. I have made sure to segregate UI/Views and logic so that SRP principle is followed through out. Keeping JSX and logic apart help to understand the code easily and makes it easier to debug
Do no repeat yourself principle. I have tried to make code as much modular as possible, by creating smaller components. This allows to use the code more efficiently without adding any duplicate code
- Take pull of this github repo
- Make sure to run 'npm install' command to install all the dependencies
- run npm start