Munchstars – student project

Munchstars is a web app aimed at children to educate them in a fun, interactive and engaging way about health and how decisions they make could affect their wellbeing.

Transcript

1. Web App Design & Development Project By Andy Kelly @askkell Catherine Hopkins @catherinehpkns Liam Defty @liamdefty Jo Hardy @johardydesign
2. Questions Problem Solving The Project The Team Development Web App Demo Introduction
3. Meet The Team
4. Andy Kelly Catherine Hopkins Liam Defty Jo Hardy We are 2nd Year FdA Digital Design Students, working together on our final assignment
5. Project Planning Research Preparing the Project Proposal The Roles Everyone in the Team played a role in;
6. Andy Kelly Catherine Hopkins The Designers UX & UI @askkell @catherinehpkns
7. The Developers Javascript & Sass Liam Defty @liamdefty Javascript & Sass Jo Hardy @johardydesign Sass
8. The Project The Design and Development of a Web Application would allow us to perform the roles identified and meet our personal objectives
9. 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
10. 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
11. What is Munchstars?
12. munchstars.com
13. Creating your team of Munchsters
14. Editing your team
15. Personalising your Munchster
16. Feeding your Munchster
17. I got 99 problems but Munchstars ain’t one
18. Gathering together to figure out our MVP revealed that we all had different ideas for how we wanted the app to work...
19. We created a user journey together to finalise the idea. The MoSCoW technique was then used to determine our MVP.
20. Our week by week plan seemed so promising… We had 4 weeks to go and only had some buttons styles designed
21. 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
22. What did we use for version control as Designers...
23. We didn’t use version control
24. Development Liam Defty
25. React “A Javascript library for building user interfaces.” Firebase “The tools and infrastructure you need to build better apps”
26. 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 ( <div className="loadingWrap"> <div className="loading"></div> </div> ) } if(!this.props.auth.loggedIn) { return ( <WebsiteContainer {...this.props} /> ) } if(this.props.auth.loggedIn) { return ( <Dashboard {...this.props} /> ) } }
27. 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, } }, } },
28. 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); },
29. 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 = ( <Router history={browserHistory}> <Route path='/' components={App}> <Route path='signup' component={SignUp} /> <Route path='login' component={LogIn} /> <Route path='game' component={Game} /> <Route path='wardrobe' component={Wardrobe} /> </Route> <Route path='/*' components={NoPage} /> </Router> );
30. One Way Data Flow React uses a one way data flow where data is passed down from component to component via props. render() { return ( <Game {...this.props} gameState={this.state} /> ) }
31. A better way to visualize it
32. Passing data back up.. ...can get a bit messy. render() { return ( <Wardrobe {...this.props} cancel={this.cancel} updatedAvatarHead={this.props.updateAvatarHead} updatedAvatarBody={this.props.updateCharactarBody} updatedAvatarLegs={this.props.updateCharactarLegs} saved={this.state.saved} editModeToggle={this.editModeToggle} editMode={this.state.editMode} saveChanges={this.saveChanges} /> ) }
33. What if we want to pass data from component 1 to component 3? Surely there’s a better way? 1 3
34. Redux “Redux is a predictable state container for JavaScript Apps”
35. 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.
36. Actions Actions are payloads of information that send data from your application to your store. export function updateUsers(users) { return { type: 'UPDATE_USERS', users } };
37. 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; } }
38. 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);
39. 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 <App/> component which passes the data to </Main> which makes the data available to the entire app const App = connect(mapStateToProps, mapDispatchToProps) (Main);
40. 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 = ( <Provider store={store}> <Router history={history}> <Route path='/' components={App}> <Route path='signup' component={SignUp} /> <Route path='login' component={LogIn} /> <Route path='game' component={Game} /> <Route path='wardrobe' component={Wardrobe} /> </Route> <Route path='/*' components={NoPage} /> </Router> </Provider> );
41. What this looks like in a real example
42. Thanks for listening! :) Questions?