Welcome to the Cloud Kitchens code challenge
This project is dependent on yarn and yarn workspaces so please install it globally on your machine or use the Docker commands
Install all dependencies
yarn
yarn lerna run build # compile the /packages/*
Start a local dev server with hot reloading and serve port 3000 => http://localhost:3000
yarn dev
Bundle and optimize all static assets and serve port 3000 => http://localhost:3000
yarn prod
Start a local dev server with hot reloading and serve port 3000 => http://localhost:3000
docker-compose -f docker-compose.override.yml up app
Bundle and optimize all static assets and serve on port 80 => http://localhost
docker-compose -f docker-compose.yml up app
This repository uses yarn and lerna to create a mono-repo infrastructure. This structure is primarily for future portability but it also allows us to run common commands across packages and version them independently. For example, the yarn lerna run build command uses babel or roll-up to pre-compile packages which is useful for the production build and/or for publishing to an NPM registry. The packages consist of:
| Package | Directory | Functionality |
|---|---|---|
@css/browserslist-config |
/packages/browserslist-config |
Browserslist configuration controlling JS and CSS compilation |
@css/components |
/packages/components |
Components making up the application |
@css/redux |
/packages/redux |
React hooks substitution for Redux and state logic |
@css/icons |
/packages/icons |
Pre-compiled React SVG icons |
@css/scripts |
/packages/components |
Common scripts used for build tooling |
- NextJS
- NextJS is one of the top frameworks for developing Server Side Rendered (SSR) React applications. It can be used as a static site generator but also has a production ready express server that is easily customizable. Therefore, it was a top choice for this challenge as other frameworks such as Gatsby and Create React App are not as robust for applications needing to run a production server.
- Rebass / Emotion / Styled Components
- I started off wanting to use Styled Components along with Styled System. I ended up using Rebass because I wanted a light weight component library that allowed for theming using CSS in JS. Rebass is built upon Emotion and therefore I opted out of Styled Components but ended up having to use this in one place in the app for keyframe animations. This is not ideal because both Emotion and Styled Components must be bundled. Overall, I really enjoyed the theming available in these frameworks and the declarative nature of Rebass but in the future if I had more time would most likely build a complete style guide using Styled Components and Styled System.
- SocketIO
- Due to the requirements of this challenge for use of WebSockets I used SocketIO as it seems to be the defacto choice for use in Node and client side JS. I haven't worked much with WebSockets but this library was straight forward enough although if I had more time I'd probably look into security and authentication concerns around the use of SocketIO to send data from the client to the server.
- Make the Active vs Historical nav bar sticky
- The sidebar filter is stick but I didn't put the time in to do the view nav. There is probably an open source React module for this but because I was using Rebass / Emotion I didn't want to import a module that might require some sort of Webpack CSS compilation configuration.
- Investigate SocketIO security
- Potentially for syncing data back to the server I should have setup a REST endpoint but I just used SocketIO to emit data.
- Make the app responsive for mobile use
- Again because I'm using Rebass and it's them system I didn't take the time to ramp up on this. There are specific ways to define properties such as
widthusing an array that will interact with breakpoints set in the theme and would probably be pretty trivial to implement.
- Again because I'm using Rebass and it's them system I didn't take the time to ramp up on this. There are specific ways to define properties such as
- N seconds filter for the COOKED state
- I somehow didn't notice this requirement until nearly finishing the application. Previously, I just had a checkbox for filtering by all COOKED state. My implementation of the N seconds input is a bit unpolished from a UI and code perspective. If I had more time I would refine how I was calculating the ordering and filtering of items.
- Changing item data via the UI
- The items change quite quickly on a 1 second interval and therefore can be difficult to edit. I would potentially track an items position and if it were being edited cease to update it. Also, as mentioned previously the data is being synced back to the server via WebSockets and it might be a better solution to use a REST call.
- Server tests
- These tests are extremely naive and difficult to perform because the server is a monolith and requires various mocks that involve asynchronous processes. For some reason the mock for updating JSON is not working as well. In a production application it would be good to modularize the server and test different aspects in isolation.
This app uses Jest and Enzyme to test the client side application as well as using Jest to test the server application.
Compile the packages/*/lib
yarn lerna run build
To run tests
yarn test