All solutions

This project was my first attempt at theme switching. Organization is key when making an app that changes between lite and dark themes as well as font changes. Thank you for taking a look at my solution and feel free to comment with any feedback.

This challenge required me to learn about SVG importing and dynamically displaying SVG’s that are various sizes. While it is rather straight forward to import individual assets in a React project, this is a more difficult task when you have many assets. This is further compounded when you want to dynamically use said assets. I ended up with a couple of very useful hooks and a reusable SVG component that provided a more elegant solution. The result was much more reusable and easier to implement.

Also, in this project I modified the data.json file to add planet colors and SVG base sizes to aid in dynamically changing theme colors and correctly sizing planet graphics.

function importAll(r) {
  let images = {}
  r.keys().map((item) => {
    images[item.replace('./', '')] = r(item)
  })
  return images
}

export const images = importAll(
  require.context('../assets', true, /\.(png|jpe?g|svg)$/)
)

import { useRef } from 'react'

export default function useDynamicSVGImport(name) {
  const ImportedIconRef = useRef()
  ImportedIconRef.current = name

  return { SvgIcon: ImportedIconRef.current }
}

export default function Svg({ name, onCompleted, onError, ...rest }) {
  const { SvgIcon } = useDynamicSVGImport(name)

  if (SvgIcon) {
    return <SvgIcon {...rest} />
  }
  return null
}

This is a challenge that will put your full stack skills to the test. I made a couple small changes to the design to more completely accommodate an auth flow. The avatar needed user feedback to show that someone is logged in. I setup the bookmarks so that they are only available when a user is present and they are persistent with the user that is logged in. I've made a similar project outside of this challenge using a third party API for images and text. This was a learning experience as this challenge simply has a JSON file and local assets. I had to change my method for importing a large number of images dynamically.

One thing I could use help with is the favicon. I have not found a method for importing it when using Node and webpack. Any advice would be appreciated.