/challenge

Primary LanguageJavaScript

instructions

  • build/start server first since client will fetch data from server (ie: image_url, text for overlapping images)
  • build/start client server (fetches info from server)

run server first (port 3000, urls -> 3000/ssr)

  • npm install
  • npm run build
  • npm start

then run client (port 8080, urls -> /)

  • npm install
  • npm run build
  • npm start

Webpack Config

  • Has a single javascript file as entry point
  • Handles Javascript/ES6/React code with both .js and .jsx and outputs single .js bundle (ie: Carousel.jsx, App.js, public)
  • Handles Scss code with .scss extension, output .css with unique hash added to fielname
  • Handles IMG with .jpeg.jpg.png.gif, return reference to file with link(tested jpg - pokeball)
  • Handle SVG with .svg extension, return base64 (pikachu, did not test svg files with 1 mb <)

PhotoGallery

  • PhotoGallery takes in an array of images(used array of text but can switch out easily, fetches url from server)
  • Each image will have a url and caption (fetches url and caption from server)
  • Captions should be displayed over the image
  • Click or swipe through images(has next and prev buttons)
  • Has animations (bonus)
  • edge cases: handles array edges, but not responsive and did not add webkits,etc, can do postcss in those cases and media queries

Isomorphic app

  • Application fetches data from 3rd party api
  • Use renderToString to render React Component with data from 3rd party api
  • Send response to client (http://localhost:3000/ssr)
  • Client app hydrates js bundle
  • Application has div(used button) that alerts when clicked