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.
git clone [email protected]:sukhjitsingh/daug-mobile.git
exp start
exp ios
Intro, Login & Sign Up screens are based on Robinhood App.
Profile screen is based on Instagram.
Social Feed screen is based on Facebook.
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
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.