dispatchr - ucsb · 2016. 12. 4. · react-redux state container for javascript apps. redux-saga...

12
Dispatchr Team Savage Alok Gupta Jordan Nguyen Sal Olivares Spencer Prescott Brian Yan Appfolio Mentors Daniel Vicory Lu Jin

Upload: others

Post on 02-Jan-2021

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

DispatchrTeam Savage Alok GuptaJordan NguyenSal OlivaresSpencer PrescottBrian Yan

Appfolio MentorsDaniel VicoryLu Jin

Page 2: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Problem/Motivation

● Everyone needs groceries or items from local stores● Not everybody has cars● Major Pain Point: It’s inconvenient● College students are busy● College students generally live close together

○ i.e. Isla Vista

● Why not help out your neighbors and get paid?

Page 3: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

The Solution: Dispatchr

● Community powered mobile platform● Users can post their item requests to a global feed

○ What items they want, from what stores

● Other users can accept requests and be compensated○ These “heroes” earn points that help build their reputation○ Anyone and everyone is encouraged to be a hero

● Items delivered right to your doorstep

Page 4: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Technologies - Backend

● Ruby on Rails RESTful API○ Lots of basic functionality out the box to build upon

● RSpec for unit testing○ Used for test-driven development

● Deployed to cloud via Heroku○ Cloud Platform-As-A-Service○ High Availability

Page 5: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Technologies - Frontend

● React Native○ Write once, run anywhere: mobile, web, desktop.

● React-Redux○ State container for JavaScript apps.

● Redux-Saga○ Allows us to model user flows.

● React-Native-Router-Flux○ Easy routing to screens in the app

● ES6 JavaScript

Page 6: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Tools Used

● Github● Travis CI● Heroku● Trello● Slack● Hangouts● Messenger● Adobe XD

Page 7: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Development Workflow

1. Test-Driven Development○ Tests must be written prior to any dev

2. Feature Implemented according to requirements3. Pull request opened on Github

○ Entire test suite must be already passing○ Travis CI checks must pass○ 2 peer approvals required

4. Merge

Page 8: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

System Design

Page 9: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Work Completed

● Custom API built from ground up○ MVP endpoints setup: Items, Users, Addresses, Requests, Request Items

● Multi-Platform Front-End Clients: iOS, Android, and Web○ Sign-in page○ Global requests view○ Personal requests view○ Request detail view○ New request submission○ Landscape support

Page 10: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Demo

Page 11: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Next Steps● Vision: Wireframe● Work to be done:

○ Robust, secure login system○ UI enhancements for the front-end○ Real-time Notifications○ Integrate Machine Learning/Artificial Intelligence

■ Automatically recommend items■ Suggest which stores are best to pick up items

Page 12: Dispatchr - UCSB · 2016. 12. 4. · React-Redux State container for JavaScript apps. Redux-Saga Allows us to model user flows. React-Native-Router-Flux Easy routing to screens in

Questions?