Daug mobile app

Daug is a social network for pets.

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 just dislike it.

Demo and some screenshots

Functionality

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

Used React Native Camera library to let the users take pictures while creating posts or upload a new profile picture. 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 Redux in the future to better manage the state. Also would like to add themeing to the app to enable light/dark modes, and overall make the app more dynamic and functional.

Getting started

git clone https://github.com/jkhusanov/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 and Instagram.

Milestones

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

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 an Signup Screen
  • ⭐ Bonus: Add buttons to sign up with Facebook & Twitter
• Design & build an Login Screen
  • ⭐ Bonus: Add buttons to login with Facebook & Twitter
• 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

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 @jkhusanov on Github.