Lola Market Frontend Code Test

This frontend code test is made with:

• React to render the html elements
• Redux to control the application state
• Redux-sagas to manage the side effects
• JSS to render the CSS styles
• Immutable to avoid unexpected changes of the model
• Reselect to create memoized selectors of the state

Installation

// with npm
npm i

// with yarn
yarn

Deploy development server

// with npm
npm run dev

Deploy development server

You can change the environmental variables in the env file:

API_URL=https://api.comprea.com
PORT=3000
MODE=development

Folder Structure

api

Each folder represents a call to the API. It is used the API_URL environment variable. All the methods returns a transformed response with the reducers model.

app

Here lives the React App created by containers and components. It is modeled with a tree structure. It represents the View. Note: a container is component connected to the redux store by the connect HOC.

components

User interface components, these should be highly reusables.

store

The store has the all state tree of the application. It has to be independent to the view. The Redux store state represents the Model and the dispatch, the Controller. It is also use Sagas generators to control the side effects and avoid the callback hell.

style

The CSS theme and the global styles.

To do

• Create a Production webpack configuration file.
• Server side render with NextJS.
• Create better UI components and to use Storybook to view them.
• Complete Reacts components with default props and proptypes.
• TEST, TEST, TEST
• Pass all the pixel units to rem or em.
• Create a complete css theme and use all the variables.
• Create NOT_FOUND page component.
• Define Error flow in the pages.
• Add Lint