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.
- 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
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.
Profile screen is based on Instagram.
Social Feed screen is based on Facebook and Instagram.
Below you can see my main milestones and how I achieved them
- 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
- Understand the 3 main navigation patterns for mobile apps:
- 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
- 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 thenew_post_created
event is emitted - ⭐ Bonus: Use
timeSince()
utility function to show relative times for post creation
- ⭐ Bonus: Use
- Create Post Screen - Make
POST
request to/api/users/:userId/posts
to create a new post by the user- ⭐ Bonus: Use
DeviceEventEmitter
to emitnew_post_created
event once post is created
- ⭐ Bonus: Use
- 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 theuser_profile_updated
event is emitted
- ⭐ Bonus: Use
- Edit Profile Screen - Make
PUT
request to/api/users/:userId
to update a user's profile information- ⭐ Bonus: Use
DeviceEventEmitter
to emituser_profile_updated
event once user data is updated
- ⭐ Bonus: Use
- 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
- 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
git clone git@github.com:makkhay/daug-app.git
exp start
exp ios
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