Skip to content

Latest commit

 

History

History
75 lines (47 loc) · 3.15 KB

README.md

File metadata and controls

75 lines (47 loc) · 3.15 KB
Raw

Recipe Challenge App

  • Stage 1: master branch
  • Stage 2: redux-search-favourite branch

install

  • npm i - install dependencies. Do this when in the root of recipe-challenge-server and recipe-challenge-client

recipe-challenge-server

compile

  • npm run compile - compiles app from es6 to es5

Run in dev

  • npm run start:dev - compiles and then runs in watch mode: watches server & app scripts

run in prod

  • npm run start - compiles and then runs app in production mode

Test

  • npm test - runs tests with coverage (ensure you have compiled first)

recipe-challenge-client

compile

  • npm run build - compiles app from es6 to es5

run app

  • npm run start - compiles and then runs app in production mode

Test

  • npm test - runs tests with coverage (ensure you have compiled first)

Approach

Reviewing Features:

Given the time frame, I first looked over the features and decided on what would be the MVP. I decided to focus on recipe_list and recipe. I then prioritised the scenarios.

UPDATE- Stage 2: Given that I had already implemented the basic features and scenarios of recipe_list and recipe, I decided to focus on the other two features, filter and star. I then prioritised the scenarios.

TDD

Jest, enzyme and supertest. Server side coverage is high, however, client side I need to increase coverage. The lines that I have not tested within components would not be relevant when using redux. See 'Given more time I would...'

Server Side

Using express and node I created my server. I wanted to use ES6 so used babel. I first thought about how the response Json's should look for the different api calls. I decided to first mock these jsons, with the premise that when I introduce calls to a database, it would be an easy switch over. My mocks are in the folder dataMocks

Client Side

Used create-react-app to generate basic template. Note: only the public folder I did not change and/or create. I decided to use react-router-dom for routing and semantic-ui-react to create basic styling. For my api requests I chose axios as I like that it returns promises as well as removing the need to parse the Json. I extracted my api requests as services so that they would be reusable and helpful when creating action creators.

UPDATE - Stage 2: I restructured my components hierarchy prior to implementing the new features. I used redux to store recipes and favourites (as I did not implement user login or an api for their favourites, favourites will not persist between sessions). I have not yet implemented actions/reducers when handling errors e.g. FETCH_RECIPES_ERROR/fetchRecipesError etc. For recipe search I implemented searching by recipe name.

Given more time I would...

  • Switch to postgresql, pg-promise, and do a data dump
  • Handle server side errors and expand actions and reducers
  • Server side rendering and make request for recipes at this stage
  • Potentially use Graphql, dependent on how many tables and api requests
  • Expand test coverage for client side
  • Define propTypes for each of the components
  • Styling

I focused on...

  • TDD
  • Reusable components
  • JSON structure