Web App Design & Development Project By Andy Kelly @askkell Catherine Hopkins @catherinehpkns Liam Defty @liamdefty Jo Hardy @johardydesign 

Questions Problem Solving The Project The Team Development Web App Demo Introduction 

Meet The Team 

Andy Kelly Catherine Hopkins Liam Defty Jo Hardy We are 2nd Year FdA Digital Design Students, working together on our final assignment 

Project Planning Research Preparing the Project Proposal The Roles Everyone in the Team played a role in; 

Andy Kelly Catherine Hopkins The Designers UX & UI @askkell @catherinehpkns 

The Developers Javascript & Sass Liam Defty @liamdefty Javascript & Sass Jo Hardy @johardydesign Sass 

The Project The Design and Development of a Web Application would allow us to perform the roles identified and meet our personal objectives 

The Problem UK children are becoming obese at a younger age There is a need to reduce obesity in children by way of education so that they can make their own informed life choices. Published on the 20th May 2015 by Michelle Roberts http://www.bbc.co.uk/news/health-32797769 

The Solution A Web App for Children A product aimed at children to educate them in a fun, interactive and engaging way about health and how decisions they make could affect their wellbeing 

What is Munchstars? 

munchstars.com 

Creating your team of Munchsters 

Editing your team 

Personalising your Munchster 

Feeding your Munchster 

I got 99 problems but Munchstars ain’t one 

Gathering together to figure out our MVP revealed that we all had different ideas for how we wanted the app to work... 

We created a user journey together to finalise the idea. The MoSCoW technique was then used to determine our MVP. 

Our week by week plan seemed so promising… We had 4 weeks to go and only had some buttons styles designed 

As a team we decided on a general style to push forward with. Designers got full control over the UI decisions. Focusing on our personal goals that we wanted to achieve with our final project, our last chance with total creative freedom 

What did we use for version control as Designers... 

We didn’t use version control 

Development Liam Defty 

React “A Javascript library for building user interfaces.” Firebase “The tools and infrastructure you need to build better apps” 

JSX You don’t have to use JSX with React. But I think that’s what makes React awesome. render() { const token = localStorage.getItem('token'); if(token && !this.props.auth.loggedIn) { return ( ) } if(!this.props.auth.loggedIn) { return ( ) } if(this.props.auth.loggedIn) { return ( ) } } 

Stateful Components React makes use of stateful components. Store your data as state and when the state is updated the rendered markup will be re- rendered depending on the change. getInitialState() { return { users: {}, newUser: false, user: { name: this.props.player.name, nickname: this.props.player.nickname, points: this.props.player.points, avatar: { head: this.props.player.avatar.head, body: this.props.player.avatar.body, legs: this.props.player.avatar.legs, } }, } }, 

Sync State with Firebase We can use re-base to sync our state. Forget about data persistence and focus on doing the fun stuff. https://github.com/tylermcginnis/re-base getInitialState() { return { questions: {}, } }, componentDidMount() { const endPoint = `${this.props.auth.uid}/users/questions`; this.ref = base.syncState(endPoint, { context: this, state: 'questions' }); }, componentWillUnmount() { base.removeBinding(this.ref); }, 

Routing We use JSX for the router too. React Router is the most popular router for React. It has a simple API with powerful features. const routes = ( ); 

One Way Data Flow React uses a one way data flow where data is passed down from component to component via props. render() { return ( ) } 

A better way to visualize it 

Passing data back up.. ...can get a bit messy. render() { return ( ) } 

What if we want to pass data from component 1 to component 3? Surely there’s a better way? 1 3 

Redux “Redux is a predictable state container for JavaScript Apps” 

Redux provides a global store we can access from any component. Instead of having to pass everything up through each component. We use a dispatcher to update the global store. 

Actions Actions are payloads of information that send data from your application to your store. export function updateUsers(users) { return { type: 'UPDATE_USERS', users } }; 

Reducers Actions describe what’s happened but don’t state how the apps state changes. This is the reducers job. A reducer is a pure function that takes the previous state, an action and returns the next state. function authReducer(state = initialState, action) { switch(action.type) { case 'LOG_IN': return Object.assign({}, state, { team: action.team, loggedIn: action.loggedIn }); case 'UPDATE_USERS': return Object.assign({}, state, { users: action.users }); default: return state; } } 

Store Redux apps have a single store which takes: 1. All Reducers which we combined into the rootReducer. 2. An optional starting state - similar to React's getInitialState. const store = createStore(rootReducer, initialState); 

Create a component to attach it to We're injecting the data at the top level and passing it down, but you can connect() any component to make the actions and the store available to you anywhere. 1. Get state from store we want to pass down as props function mapStateToProps(state) { return { auth: state.auth, player: state.player, }; } 2. Bind actions to dispatch and make the actions available as props function mapDispatchToProps(dispatch) { return bindActionCreators(actions, dispatch); } 3. Create an component which passes the data to which makes the data available to the entire app const App = connect(mapStateToProps, mapDispatchToProps) (Main); 

Routing with Redux Our App component replaces the Main component, which means the date we bound to it is available to be passed down. The store is made available to it via the Provider component which is where we were able to pass the stores state to previously. import store, { history } from './store'; const routes = ( ); 

What this looks like in a real example 

Thanks for listening! :) Questions?