KyleLawson16 / shelfie-frontend-ios

React-Native mobile app frontend for Shelfie Challenge IOS

ShelfieChallenge IOS Frontend

Built with React Native and Ant Design Mobile

Table of Contents:

• Amazon S3
• Important Packages
• Setup
• Structure

Amazon S3:

Amazon S3

• Bucket Name: "shelfie-challenge"
• Region: US West (N. California)
• Upload media using react-native-aws3
• File Tree:
  • shelfie-challenge
    • posts
      • photos
      • videos
    • teams
      • logos

Posts

• Url stored in api ShelfiePost.Post
• Naming convention:
  • '<random_game_id>-<randomly_generated_id>'

Users

• Url stored in api ShelfieUser.User
• Naming convention:
  • '<random_user_id>-<randomly_generated_id>'

Important Packages

• antd-mobile
  • Component library
  • Backbone of project
• axios
• moment
• rc-form
• react-native-aws3
  • Handles uploading media to AWS S3 Bucket
• react-native-camera
• react-native-image-crop-picker
  • Photo library access
  • Image cropping
• react-native-remote-svg
• react-native-scalable-image
  • Easier image sizing
• react-native-storage
  • Local storage module
  • Used for storing knox tokens
• react-native-vector-icons
  • Icon font library
• react-native-video
  • Displaying videos
• react-redux

Setup:

Clone repository:

git clone https://github.com/KyleLawson16/shelfie-frontend-ios.git

Install dependencies:

yarn install

Available scripts:

react-native start
react-native run-ios
react-native run-android

Uses:

• start -- starts metro bundler
• run-ios -- builds ios bundle and launches simulator
• run-android -- builds android and launches simulator

Structure:

Root Directory:

index.js

• Registers app

App.js

• Renders AppNavigation
• Initiates redux store

AppNavigation.js

• Serves as main file where user-flows belong
• Includes:
  • Authentication flow
  • Post Submission flow
  • BottomNavbar flow
  • TopNavbar flow
• Manipulated through props passed upward by children

styles.js

• Includes all styles within app
• Organized by container (specified in comments)

Containers/Components:

Pages

• GamePage
  • UserPage
    • ChallengeSubmission
    • UserForm
    • UserInfo
    • UserSubmissions
    • UserSubmission
  • GameInfo
  • GameNavbar
    • FeedPage
      • ChallengeSubmission
    • ChallengePage
      • ChallengeCarousel
    • LeaderboardPage
      • LeaderboardItem
    • PrizePage
      • PrizeCarousel
• GamesPage
  • GameItem
• LandingPage
  • SignIn
  • SignUp
• SubmissionPage
  • SubmissionCamera
  • SubmissionPost
• UserPage
  • ChallengeSubmission
  • UserForm
  • UserInfo
  • UserSubmissions
  • UserSubmission
  • ProfilePicture
• NotificationsPage
  • NotificationItem

Navigation

• BottomNavbar
• TopNavbar
• GameNavbar

Actions

• createUser
• loginUser
• logoutUser
• fetchUser
• fetchGames
• createPost
• fetchPosts
• updatePost
• deletePost
• fetchLeaderboard
• fetchPrizes
• addLike
• deleteLike
• addFollower
• deleteFollower
• joinGame
• updateProfilePicture
• fetchNotifications

This project was bootstrapped with Create React Native App.