Jessica Lazar || jvlazar

Social Media Dashboard - Theme Switcher

Project Information

Project Title: Social Media Dashboard - Theme Switcher

Project Languages: HTML, CSS, JavaScript (React)

Additional Tools Used: React

Project Referenced From: Frontend Mentor - Social Media Dashboard - Theme Switcher

Project Description:

This project replicates the Social Media Dashboard - Theme Switcher from the design images and assets provided by Frontend Mentor.

Additionally, I added a personal goal of learning and using React to create the UI.

Project Specifics

Things I Learned:

  • Basics of React
    • General structure of components
    • Using Hooks
    • Passing variables to components as props
    • Accessing props in child components
    • Passing values up from child component to parent component
    • Utilizing modules for CSS
  • How to incorporate theme switcher (from light to dark mode, and vice versa)

Things I Enjoyed:

  • Learning React
  • Adding responsive behaviour to the website

Things I'd do Differently:

  • Restructure the core data being passed in a way that I can use the map() function to create the component

Challenges that were Faced:

  • Getting the colours of certain text to change depending on positive or negative value
    • How I solved it: I created a component that will evaluate the string, and if the string contains "▲", turn the text green, else turn it red. Adding this function as a separate component, as opposed to simply having it as a function in a component, allowed me to call it from sibling components, as well as reduce the number of times the same code was repeated.