Adparlor Front-End Engineering Assignment

This repo contains the code for Adparlor's FEE Assignment

I was going to host this on Netlify BUT ky doesn't support node 8.15 that Netlify runs 😢

ky@0.7.0: The engine "node" is incompatible with this module. Expected version ">=10".

❗ Note(s) ❗

• Commits Chore: Clean up Cards and Fix: trouble with images scaling properly have ONLY been pushed to this branch!

Docs

• Info
• Codebase
  • Technologies
  • Folder Structure
  • Code Style
• First time setup
• Running the app locally

Info

This specific branch was made using Mobx-State-Tree for managing app state.

Other state managment implementations are branched.. Including:

• Redux & Sagas
• Vanilla State
• React Hooks

Note that all 'active' states, seen on Blueprint and Library text are hard coded using a fakeActive prop- as React-Router @ 4.3.x NavLink component is bugged. It should be fixed when 4.4.x drops... but I'm not confident 😒

⚠️ You may see some linting errors here and there if you have eslint configured on your favourite text editor.. Let me explain why I don't disable these (or fix them)

• no-confusing-arrow: This works as a nice reminder to me as what is going on when composing styles using emotion.
• prefer-default-export: I always make sure there is a default export, but on the file that it's present on I added my reasoning in the top comment.

If you want to look at a more advanced/fleshed out rendition of creating a design library feel free to take a look at my work over at Scribe (styled directory)

• /system/ Contains awesome reusable primivites for the entire app
• The rest of the App is what myself & my amazing team created to rank as a finalist in our Capstone Competition. You should definitely check it out 😉

Codebase

Technologies

List of other tech that is used

• ky: Super small fetch wrapper
• React: Frontend
• emotionJS: CSS-in-JS
• mobx-state-tree: State Managment

Folder Structure

adparlor-assignment/
├── assets        # Static assets 
├── components    # Reusable Components
├── pages         # A View (/[something]) built from components 
├── stores        # MST Stories+Models
├── styled        # CSS-in-JS (emotion) files  
└──────────────────────────────────────────────────────

First Time Setup

1. Clone/download the project to your pc
2. run yarn to download all necessary packages
3. you should be good to continue to Running the App locally

Running the App locally

Development

1. yarn start after you completed First Time Setup

Production

1. yarn build after you completed First Time Setup.

There isn't really a reason to build for production unless you wanna gawk at the awesome bundle size 🎉