borg / mobile-application-development Goto Github PK

Build your first mobile app!
Port your react ToDo list to native and add done action

Your app should feature:

1. A dynamic list of To-Do's.
2. Indication of completion status
3. A button or checkbox to complete each To-Do.
4. An input field to create new To-Do's.
5. A button to clear whole list
6. Any other fancy features you might like (filtering? multiple selection? coloring? emjoi support?)
7. Anything else you dug up in the React Native documentation!
8. Publish your app with expo and post it to the class 3 issue along with your full name.

My demo app used checkboxes, but you can also use any other type of button

This boiler plate is very minimal, but may be some help.

Post links to your

1. prototype repo
2. UX wireframe + mood board (if it's a url like figma or xd or similar...if it's a pdf you can attach or send in slack)

Let's have fun making things!

Part one

Make a minimal to-do list

1. Use codesandbox.io to make an App component
2. Add a form text input field
3. Add a button
4. Add anything entered into text field to the to-do list

It should end up something like this

Share a link to your repo below

Part two
Select your favorite mobile app and be prepared to show it to class and explain what's so great about it.

1. fork a version of this sandbox
2. Load 10 random words from "https://random-word-api.herokuapp.com/word?number=10" using async fetch call
3. Find the longest word
4. Reverse the order of the letters in the longest word and output the result, eg. if the longest word is complexity the correct result should be ytixelpmoc
5. Use at least 3 features of ES6 we have covered today
6. Post a link to your solution in a comment on this thread

Pick one of the global state management frameworks I outlined last week - globalState, Context, Hookstate, EasyPeasy or Redux - and convert your todo app to an app that maintains a global todo state, accessible from any part of the app stores the state in a persistent storage (either Async or remotely), so it's remains on app/browser reload.

I would consider redux the hardest route, so that would give you extra points. If you choose redux you can dig into a video tutorial like this.

Create an app with a bottom tab navigator, with at least two pages, where one is a TaskList nested inside a stack navigator. The Tasklist should work like our previous assignment but have some more details, such as body, date or priority. Clicking on a task should open the Detail page.

For extra points make the top button in the Detail page set the Done status, and make sure the detail page updates the state accordingly. You can also ornament and style as you feel like.

If done as a pair, link to one snack and say who you are.

Please post you final decks + repos or snacks where both source and an executable version of your project are available.