UdaciCards

React Nanodegree Project

This project is scaffolded from create-react-native-app and built to the specs provided by the Udacity project guide. The project has been tested on iOs 11.1.1 and Android simulator using GenyMotion targeting Google Nexis 5 API Level 21.

Directory Structure

The project makes the decision to group Views and their supporting components into their own directory and to follow the container pattern for complex components. The root component for each view is contained in the index.js file for each directory to allow for cleaner importing patterns as demonstrated below

import DeckView from '../DeckView';
import AddCardView from '../AddCardView';
import QuizView from '../QuizView';
import QuizResultsView from '../QuizResultsView';

Technology Used

• create-react-native-app
• redux
• redux-thunk
• react-redux
• react-navigation
• glamorous-native
• expo

Getting Started

There are known issues with regard to using create-react-native-app and npm hence it is strongly suggested to use yarn.

• clone the repo
• setup projects and dependencies

yarn install

• start the backend and development server

yarn start

Design Decisions

Overall the layout and design of the app is typical for react, redux apps. The major difference that may be noted is the concise effort to maintain reducers that are more deterministic and easily testable by removing switch and if statements and relying specifically on language features to maximize testability and determinism.

I am unsure if this deterministic reducer style is worth maintaining but felt it was interesting to try out for this project. An example is found below:

const load = (state, {decks})=>Object.keys(decks).map(key=>decks[key]);

const add = (state, {deck})=>([
  ...state,
  deck
]);

const addCard = (state, {card})=>{
  const changedDeck = state.find(item=>item.id === card.deckId);
  return [
    ...state.filter(item=>item.id !== card.deckId),
    {
      ...changedDeck,
      count: changedDeck.count + 1
    }
  ];

};

const remove = (state, {deck})=>state.filter(item=>item.id !== deck.id);

const reducer = {
  [LOAD_DECKS]:load,
  [ADD_DECK]: add,
  [REMOVE_DECK]: remove,
  [ADD_CARD]: addCard
};

export default (state=[], {type, ...action})=>
  reducer[type] ? reducer[type](state, action) : state;

Contributing

This repository is used for a nanodegree program that I am participating in so I will not be accepting pull requests.