Sign in
Log inSign up

SideHustle Frontend Project (Team HypeMan)

Capstone Project 1.0

Johnson Degbor's photo
Johnson Degbor
·Nov 7, 2021·

2 min read

sidehustle_logo.jpg

*

This is a team article written under the name Team Hypeman. A frontend React Team at Sidehustle *

What is SideHustle?

A remote Side Hustle internship for free to learn high-demand skills that will give you a competitive advantage in the global workforce. Side Hustle engages interns in a lot of fun networking, taking on tasks and as a reward for good work done, they earn stipends. Ultimately, a selected few become part of a startup where they put their skills to use.

Capstone Project Frontend Team

These are biweekly projects carried out by each team at the Frontend React Group

Capstone Project for the week requirement

  1. Use React Js
  2. Provide a useable experience across all modern web browsers and users who require assistive technologies.
  3. Recreate the Google homepage ( Google )
  4. Replace the Google Logo with the SideHustle logo
  5. When a user types in the search input field, update the SideHustle logo to the value in the input field.
  6. When the input field is empty, display the logo again
  7. Document your code and publish a write-up on hashcode or medium as a team on your experience so far learning React JS and in Side Hustle Internship so far.
  8. Host your project on Vercel or Netlify
  9. Submit Article Link, Github link and live Link
  10. Project Deadline is Sunday

Development process

Stage 1

  1. The project was initialize using the node package manager for react

    npx create-react-app hypeman

    Other packages include:

    • reactstrap
    • bootstrap

  2. The default directory structure was set and more directories were created to suit the project. Below is our Directory Tree

    SideHustle_Search_Engine_Directories_Tree.png

  3. The necessary libraries were imported Body:

    import_body.png

    Footer:

    import_foot.png

    Header

    import_header.png

    App.jsx

    import_App.png

  4. All components were in arrow functions (ES6) this is excluding the App.jsx file

    Body:

    function_Body.png

    Footer:

function_Footer.png

Header

function_header.png

App.jsx

function_app.png

  1. Then they were exported respectively for production

    Body:

export_Body.png

Footer:

export_footer.png

Header

export_header.png

App.jsx

export_app.png

Starting wasn't easy as most of us had little to no react experience, but we were able to pull through, all thanks to the available Frontend community and team collaboration. Below are the materials and codebase of the coding process :

Github : https://github.com/jo-dev123/SideHustle__HYPERMAN

Live site: https://focused-khorana-7cc5c4.netlify.app/

Every one of the TEAM HYPEMAN is truly grateful for this opportunity given to us by the SideHustle team.