Fully Responsive, Dynamic React.js App With Hooks, Context Management & CSS Animations

https://functional-react-gitfinder.netlify.com/

Key features:

• No Bootstrap, No Premade CSS. 100% From-Scratch CSS Leveraging the Power of the Styled-Components Library for Future-Proof, Maintainable Code
• Fully Responsive Website Utilizing vw, vh @media Queries & CSS Grid System to Adapt to any Size of User Device or During Window Resize
• React Router: (Retains State During Page Change, and Does not Require Screen Refresh)
• Conditional Page Rendering: Descriptive Headers Such as "Bio," "Website," Icons, etc. Only Display if User Actually Has a Bio or Website.
• Fully Interactive: Virtually Every Element is Animated on User Interaction (In Tasteful Ways to Enhance User Experience Without Overwhelming Them)
• Cutting Edge CSS: Showcasing the Latest Technologies Offered by CSS Such as Gaussian Blur on Backgrounds Behind Elements
• Blazing Fast

Detailed Description:

This project utilizes functional OOP & ditches class-based React.js components in favor of React Hooks, Context Management & higher order functions to dynamically render user profile information from the GitHub API onto a fully responsive CSS grid that is styled with styled-components and animated with CSS keyframes and modern transitional animations.

In this repository I leverage the full power of JavaScript's multi-paradigm capabilities along with modern react hooks and context management to demonstrate how much cleaner, more readable and maintainable the code can get by adopting a modern approach to inheritance and combining the good features of classical OOP with FP!

To see what this same program looks like with class based React components and how much more bloated and hard to maintain the code becomes, take a look at this repo: https://github.com/JordanWinslow/classical-react-github-user-finder

Screenshots

Mobile-First - Phone Views

• https://i.postimg.cc/YSjqdczd/Zach-Phone-View.png
• https://i.postimg.cc/Z5bqyvBt/Jordan-Phone-View.png
• https://i.postimg.cc/Fzb9YhhH/About-Phone-View.png

Tablet Views

• https://i.postimg.cc/7hSLSgnD/About-Tablet-View.png
• https://i.postimg.cc/6pMpV6n7/Jordan-Tablet-View.png
• https://i.postimg.cc/GpN3NMMd/Zach-Tablet-View.png

Desktop Views

• https://i.postimg.cc/zX5z9Hkb/About-Desktop-View.png
• https://i.postimg.cc/nzDVtv57/Jordan-Desktop-View.png
• https://i.postimg.cc/mkWLZPfn/Zach-Desktop-View.png