oge-dev / google-clone-react

Week 20 @ Stutern: Demonstrate and Solidify my understanding of React components, props and state using google homepage.

Week 20 @ Stutern

Topics

• React Components
• Working with Props & State

Assignment

• This assignment is aimed at helping you demonstrate and solidify your understanding of React components, props and state.
• To solve this problem, you will need to create a new react app. You can use either create-react-app or vite.

Requirement

• Visit www.google.com.
• Do a component breakdown analysis and list out the components you discovered
• Implement the Google homepage using React components. Remember to use props for components that are reused.
• Now, you have successfully implemented the Google homepage. To demonstrate the use of states, implement a solution such that, when you enter any search keyword in the search bar, and click on the ‘Enter’ key on your keyboard, the search keyword is displayed directly under the Search bar.

How to submit:

• Push your solution to a GitHub repository and submit the link.

Solution

Component Breakdown Analysis of the Google Homepage

HEADER COMPONENTS:

• LINK COMPONENTS: Gmail link, Images link.
• ICON COMPONENTS: User Icon, Google Apps icon, Notifications icon (if any)

MAIN SECTION COMPONENTS:

• GOOGLE LOGO COMPONENT
• SEARCH BAR COMPONENTS:
• Icon components: Search icon, Microphone icon, camera icon.
• Text Input for Search Component
• SEARCH BUTTONS COMPONENTS(Buttons): Google Search button, I'm Feeling Lucky button
• LANGUAGE OPTIONS COMPONENTS(LINK): Hausa, Igbo, Èdè Yorùbá, Nigerian Pidgin

FOOTER COMPONENTS:

• COUNTRY NAME(NIGERIA)
• LINK COMPONENTS: About, Advertising, Business, How Search works, Climate action message, Privacy, Terms, Settings

Implementation using React Components

Header Component Main Section Component Footer Component