Daug mobile app

What's Daug?

Daug is a social network for pets.

• Your pets can sign up or login using their paws.
• They can upload selfies or post their thoughts for other pets to see.
• They can also look at other pets posts and either paw (like) or scratch (dislike) it.

Demo and some screenshots

Demo - Try it on Expo

Getting started

git clone git@github.com:sukhjitsingh/daug-mobile.git

exp start

exp ios

Designs

Intro, Login & Sign Up screens are based on Robinhood App.

Profile screen is based on Instagram.

Social Feed screen is based on Facebook.

Milestone #1

Objectives

• Learn how to build & organize screens in RN
• Learn advanced RN styling and use LinearGradient, Image, Icons & Custom Fonts
• Learn how to use mock data for prototyping UI screens
• Learn how to use NPM libaries such as React Native Elements, Expo & React Native Vector Icons

TODO

• Design & build an Intro Screen
  • ⭐ Bonus: Add Snap Carousel with Lottie animations to Intro Screen
• Design & build a Signup Screen
  • ⭐ Bonus: Add buttons to sign up with Facebook & Twitter
• Design & build a Login Screen
  • ⭐ Bonus: Add buttons to login with Facebook & Twitter
• Design & build a Profile Screen
  • ⭐ Bonus: Add the Logout button
• Design & build a Social Feed Screen with Mock Data
• Attach screenshots/gif of screens to README.MD

Milestone #2

Objectives

• Learn how to build navigation for Daug app using React Navigation
• Learn mobile design patterns for navigation & screen layouts
• Learn how to quickly build RN screens and hook them up using navigation

TODO

• Understand the 3 main navigation patterns for mobile apps:
  • StackNavigator
  • TabNavigator
  • DrawerNavigator
• Setup a IntroStack (using StackNavigator) for the Intro Screen (root), Login Screen (push) & Sign Up Screen (push)
• Setup a HomeTabs (using TabNavigator) for the Social Feed Screen (default) and Profile Screen
• Setup a RootNavigator (using StackNavigator) with the IntroStack & HomeTabs with mode: "modal"
• Design & build an Edit Profile Screen
• Setup a ProfileStack (using StackNavigator) for the Profile Screen (root), Post Details Screen (push) & Edit Profile Screen (modal) with mode: "modal" and custom RNE header component
• Design & build a Post Details Screen
• Design & build a Create Post Screen
• Setup a SocialStack (using StackNavigator) for the Social Feed Screen (root), Post Details Screen (push) & Create Post Screen (modal) with mode: "modal" and custom RNE header component
• ⭐ Bonus: Display Posts on ProfileScreen
• ⭐ Bonus: Setup a HomeNavigator(using DrawerNavigator) with the HomeTabs (as root) and update RootNavigator to use HomeNavigator instead of HomeTabs
• Add working gif of app to README.MD

Milestone #3

Objectives

• Learn how to make backend API calls and User Authentication
• Learn how to setup and use Redux and AsyncStorage
• Serve as an React Native app that you can showcase on your porfolio

URL: https://daug-app.herokuapp.com

TODO

• Intro Screen - Make simple GET request to /api to check server status
• Signup Screen - Make POST request to /auth/signup to create a new user
  • ⭐ Bonus: Add UI validation to Signup Screen - name (not null), email (format) & password (min. 8 characters)
• Login Screen - Make POST request to /auth/login to validate and login an existing user
  • ⭐ Bonus: Add UI validation to Login Screen - email (format) & password (min. 8 characters)
• Social Feed Screen - Make GET request to /api/feed/ to get all posts for social feed
  • ⭐ Bonus: Use ActivityIndicator to show placeholder loading when fetching feed data
  • ⭐ Bonus: Use DeviceEventEmitter to trigger fetching posts when the new_post_created event is emitted
  • ⭐ Bonus: Use timeSince() utility function to show relative times for post creation
• Create Post Screen - Make POST request to /api/users/:userId/posts to create a new post by the user
  • ⭐ Bonus: Use DeviceEventEmitter to emit new_post_created event once post is created
• Profile Screen - Make GET request to /api/users/:userId to get all the profile data
  • ⭐ Bonus: Use ActivityIndicator to show placeholder loading when fetching profile data
  • ⭐ Bonus: Use DeviceEventEmitter to trigger fetching profile data when the user_profile_updated event is emitted
• Edit Profile Screen - Make PUT request to /api/users/:userId to update a user's profile information
  • ⭐ Bonus: Use DeviceEventEmitter to emit user_profile_updated event once user data is updated
• Setup Authentication flow for app using AsyncStorage. Once the user has logged in then take them to home page each time they open the app again
• Add working gif of app to README.MD

Wrap up

Objectives

• Add UI polish, tie up loose end and add remaining functionality
• Update Readme with app details and publish Expo app for demo
• Serve as an React Native app that you can showcase on your porfolio

TODO

• Dynamically load user info
• Fix photo upload and add take photo functionality
• Add Like, Comment and Follow API functionality
• Clean up and format README.MD to showcase app - follow this template
• ⭐ Bonus: Add phone number UI to Edit Profile screen
• ⭐ Bonus: Add Camera functionality to Create Post screen
• ⭐ Bonus: Use Redux to share state between tab bar & screens
• Add working gif of app to README.MD

Feedback

In case you have any feedback or questions, feel free to open a new issues on this repo or reach out to me @sukhjitsingh on Github.

For any other questions about MobileSpace in general please reach out to @monte9 on Github.