https://github.com/ebharathi/gyangrove-frontend-task

https://github.com/ebharathi/gyangrove-frontend-task

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ebharathi/gyangrove-frontend-task
• Owner: ebharathi
• Created: 2024-06-27T14:04:22.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-27T18:31:03.000Z (almost 2 years ago)
• Last Synced: 2024-06-28T17:39:28.801Z (almost 2 years ago)
• Language: JavaScript
• Homepage: https://gyangrove-frontend-task.vercel.app
• Size: 12.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![image](https://github.com/ebharathi/gyangrove-frontend-task/assets/76675783/3e25c35c-f1b3-47e9-b443-dda5d789e44b)
FRONTEND TASK FOR GYANGROVE 


SETUP AND RUNNING THE PROJECT 




npm i




npm start




![image](https://github.com/ebharathi/gyangrove-frontend-task/assets/76675783/ff363bac-f5e3-4145-b5cb-55acf5d1ae88)




STRUCTURE OF MY PROJECTS




There are 3 components basically which contains JSX and utils that connect with API . Also helper functions to format drive url and and date.




Navbar




Recommend




Events










LAZY LOAD IMPLEMENTATION




I have added a scroll event listener  "window.addEventListener('scroll', handleScroll)" . Whenever i scroll the page , i check whether the bottom of the page is reached using handleScroll() function, if so i increment page number which triggers an useEffect that call api and new data s appended.










RESPONSIVENESS




I have used tailwind css for the designs and layouts. I used the lg condition to breakdown to mobile screen size.

Transition effects

I have added little transition effects on the cards by removing padding when hovered with ease transition