Skip to content

jiehaolim/ga-sei-project-2-legosearch

Repository files navigation

Project #2: React Front End Application

Technical Requirements

  • Build a web application
  • Use React framework to build your application with at least
    • 3 components
    • 4 props
    • 2 state properties
    • 2 setState
    • 2 routes
  • Use 3rd party API
    • Make API call and display the data for the user.
  • Craft a README.md file that explains your app
  • Create wireframes for your app and include it in your repo/readme.
  • Use a CSS framework like TailwindCSS, Bootstrap, a React component library like Ant Design oe Material UI.

Idea

This web application allows users to search for LEGO sets and minifigures, view LEGO sets and minifigures information and collate their collection into an Excel file.

Live Version

View LEGO Search.

API

View Rebrickable API.

Copyrights

  • All rights belong directly to their rightful owners. No copyright infringement intended.

Wireframe

Code

Technologies and Tools used

  • HTML
  • CSS
  • Javascript
  • ReactJS
  • Tailwind CSS
  • Tailwind UI
  • Heroicons
  • Headless UI
  • Tool Cool Range Slider
  • SheetJS
  • Git and GitHub

React Hook used

  • useEffect
  • useRef
  • useState
  • useLocation
  • useNavigate
  • useOutletContext
  • useParams
  • useSearchParams

Search Results Page Flowchart

View flowchart at Miro.

Learning Points

  1. Learned to use try, throw and catch statements.

  1. Learned the importance of data structures. It allows the program to store and process data effectively.

  1. Learned to use and build customized components from the existing TailwindCSS component library framework.
  2. Learned how to use Tool Cool Range Slider and SheetJS.
  3. Learned to make multiple API call with async and await functions.
  4. Learned and practised data manipulation and also used javascript functions like map, filter and reduce.

References and Inspirations