Mobile version of DogStagram (iOS and Android)

Inspiration

DogStagram is an app for dogs and their best friends, man (I assume!). An individual can have dogs, and a dog can have many pictures. Social interections such as likes can happen to dogs, thier pictures, comments on their pictures, and replies to comments on their pictures. Intentionally, once someone acquires a dog, they cannot leave them. So, no selling of dogs by individuals.

The commercial version of this app will have these features and more.

Introduction

Basic Overview

User views other users and their dogs. User can view individual dogs too. User can acquire new dogs, like dogs, and/or their individual pictures, leave comments like commments, reply to comments, and like replies to comments.

Features

Features of the app include the following;

User can create, edit, and delete an account
A logged in user can do the following:
- Acqure a dog
- View other users
- View dogs
- Make comments
- Like comments
- Reply to comments
- Like replies to comments
- View followers of other users
- View users that likes a comment or reply

Goal

The goal is create a social media platform focused on dogs.

Challenges

The challenges include the following;

Select pictures (and videos in the commercial version) from a device (iOS, Android, and Web browsers)
Pass picture for profile pic lifted from the device to the Rails backend
From the backend, store the picture file to AWS S3 via ActiveStorage
Not have a copy in the backend, but instead AWS S3 sends a reference to the backend upon successful upload. This is what the Rails backend’s ActiveStorage uses to generate a unique link for each record of user object photo_url, eg when a user logs in from the frontend, a successful login attempt will have a profile photo URL unique to that instace of database access and sends it to the frontend. The frontend in rendering this image URL points to the Rail backend API, which in turn processes the URL and responds with a redirect to AWS S3, and that renders to the frontend
Pictures for dogs are saved to a Firebase Realtime Database, not to the backend
The mix of storage technologies is to cut costs
Use Firebase Auth to enable OAuth 2.0 login authorizations from Facebook and Twitter

Demo

Click here for the demo

Installation

Prerequisites

AfroPanTrack frontend is biult with React(^16.12.0), Axios(^0.19.1), google maps react(^2.0.2"), react google maps(^9.4.5), redux(^4.0.5), and redux thunk(^2.3.0). Ensure you have installed these packages with the specified versions or newer ones before cloning this repo. You can find their official installation guides below;

Frontend installation

To install the front end of DogStagram, do the following;

Clone the Frontend
Ensure all relevant packages from the prerequisites section above are installed by running yarn add "package-name" from your terminal
Follow the instructions from React Native Firebase documentation to properly set up your Firebase parameters
Then run cd ios && pod install && cd .. from your terminal. This installs the necesary pods
Then run cd android && ./gradlew clean from your terminal. This will set up required parameters for the android version of the app and you’ll likely have to fix ensuing issues
Then run ./gradlew signingReport && ./gradlew app:assembleRelease from your terminal. This is to ensure you have a clean slate of working build ofthe android version of the app and you’ll likely have to fix ensuing issues

####### To run the andriod version

To run the android version, run adb devices from your terminal to see available devices/emulators. If none is seen, you might need to properly set up android studio parameters. You’ll likely have to fix ensuing issues
Then run npx react-native run-android from your terminal to launch the emulator or create a biuld that can be installed on an android phone

####### To run the iOS version

Open the project’s workspace in Xcode and click run. You’ll likely have to fix ensuing issues
If the biuld passes and there is a connected phone, the app will be installed on the phone. You might need to approve permision for the app to run on your phone
Head over to Backend and follow the instructions to build/install the backend API

First start

After installation you need to fire up the backend API and the frontend in that order. For the backend, navigate into the folder you cloned the backend repo into(probably need to run an ls command to be sure you are in the root app folder), and run rails s. This would start the backend on the default port 3000. I used ngrok package to open up my http://localhost:3000 to the internet so that my apps can access the backend through the internet. I wrote this article detailing how to achieve that. Then in a new shell tab or new terminal window, navigate to the folder containing the cloned and properly installed frontend repo and run yarn start. You will now be given options on what platforms to run the app.

Summary of files

External datatset

Firebase: Google cloud-based database system

Planned improvements

Some of the planned improvements include;

Adding IBM Watson to add AI capabilities for registered(those that created accounts) user behaviours
Implement OAuth 2.0 to enable logging in using social media accounts
Integrate app with device programs like calenders, alarms, reminders, etc
Make a commercial version

Contacts

Credits

Download Details:

Author: chinomnsoawazie

Source Code: https://github.com/chinomnsoawazie/dogstagram-frontend-mobile

#react-native #react #mobile-apps