Daug mobile app

Demo - Try it on Expo

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.

Functionality

• Daug is a fully functioning Social Network app
• Users can Sign up & Log into the app
• Users can create new Posts
• Users can like and comments on Posts
• Users can follow each other
• Users can edit their profile

Demo and Screenshots

I have used React Native Camera library to let the users to post pictures. Also used React Native Elements library to build UI, React Navigation library to handle navigation, and packages such as react-native-modal and react-native-keyboard-aware-scroll-view to improve UI.

Would like to implement a feature to see the list of followers and following. Also would like to add theme to the app to enable light/dark modes, and overall make the app more dynamic and functional.

Designs

Profile screen is based on Instagram.

Social Feed screen is based on Facebook and Instagram.

Milestones

Below you can see my main milestones and how I achieved them

Milestone #1

TODO

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

Milestone #2

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

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

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: Use Redux to share state between tab bar & screens
• Add working gif of app to README.MD

Getting started

git clone git@github.com:makkhay/daug-app.git

exp start

exp ios

Feedback

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