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
This specific branch was made using Mobx-State-Tree for managing app state.
Other state managment implementations are branched.. Including:
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 😒
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
- Clone/download the project to your pc
- run
yarn
to download all necessary packages - you should be good to continue to Running the App locally
Running the App locally
Development
yarn start
after you completed First Time Setup
Production
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 🎉