tenji240 / simpleapp Goto Github PK

• Find or create a new API source
• Ditch new.json
• Start working with wiring up the new API (note: learn Redux before tackling this)

We'll be using this one

• import and link the library (vector icons are already set up so no need to stress on that)
• Add some colored headers to each of the views
• Tag the docs in the readme so people know where to look for stuff

Since we have no actual server side stuff set up (maybe a future issue?), let's define and populate the JSON content.

Publication

{"name": "name of publication",
"date":"date published", 
"hero_image":"300x300 hero URL", 
"logo":"80x80 publication logo",
"title":"title of publication",
"saved":"boolean status"}

Some possible publications w/themes

• Bloomberg #2800D7
• Washington Post #232526
• CNBC #2980b9
• The Economist #e74c3c
• LA Times #2c3e50
• Motor Trend #c0392b
• NPR #3498db
• Polygon #ff0052
• The Verge #f7c626
• Road and Track #e67e22

Tasks

• Populate JSON data in news.json

• Top is a Header with Current Date
• Scrollable list of cards (Instagram style?) w/hero image, title, publication name, & date published

Inspiration:

• Top Header (don't worry about the toggle between history/saved)
• Flat List (Round Avatar of logo, title, publication subtitle
• Only show stories with saved status as true

Inspiration

There are existing test suites for Jest and Flow

• set up tests for each of the component views (Home, Explore, Saved, Favorites)
• Add Flow to each of the tests

Probably the toughest issue

• Grid view of each publication
• grid element contains logo and theme color
• When pressing a publication grid item, present a modal or a new view to display the contents of the publication (might require nested navigation)

• Display all publishers in a scrollable grid
• For each publisher, display current favorite status
• add ability to toggle between favorite and non-favorite
• Bonus: When pressing Favorite toggle, display an Alert.alert({...}) letting the user know if they want to turn on notifications for this publication.

Add Mock Abilities to gifted messenger

• Load messages from messageStorage.json
• onEnter, push new message to messageStorage.json
• add tests

Everything is basically consolidated into App.js

• Separate all Components into separate JS files
• Set up proper state and prop transfers for each component
• Test to make sure Functionality is maintained

Define Min Spec CSS in styles.json

• Apply Styles to all components