Capstagram

We are a team of 6 software engineers who were tasked with creating a full-stack photo and caption sharing mobile application. As a team we decided to use React-Native and Expo to build out the front-end, and Express and Node with a Neo4j database for our back-end. This project was a challenging but rewarding experience for all of us as web developers to gain a taste of mobile development.

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Meet the Team

About The Project

Capstagram allows users to sign up and post photos for other users to leave captions on. The captions can be liked and unliked by your friends, with the most liked captions obtaining the coveted few spots on the home feed. A user's home feed shows them all photos their friends have posted, along with the top voted captions on each photo.

Friends photos displayed in the main feed are shown most recent first. When a user presses view all # captions under a photo they are redirected to the captions galore page where all the captions for that photo are displayed. Captions on this page are displayed most recent first, and there is also an input box stickied to the bottom that allows users to add a new caption to a photo.

Users can add new friends by pressing Search on the bottom nav bar to pull up a list of all Capstagram users allowing them add friends by filtering using the input box stickied to the top or by scrolling through the list to find the user you want to add.

Users can add a photo by pressing the add photo button in the middle of the bottom nav bar. They can then select to upload a photo from their device or take a picture with the device's built in camera. Once a photo is successfully uploaded, the user is directed to the profile page.

To navigate to a users profile page, users can press the profile button on the bottom nav bar to see their profile screen. On the profile screen users can see their display picture as well as how many posts they have and how many friends they have. Friends is pressable to display a list of the users friends. Users can also toggle between their own posts and their personal wins page with a simple press of a button.

The account page can be accessed by pressing the settings button on the bottom nav bar. Users will be navigated to their account page where they can change their profile picture, and edit various account details like their name and bio. There is also a button to logout if the user is done using the app.

(back to top)

Built With

• 
• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up of Capstagram up and running follow these steps below.

Prerequisites

• npm

  npm install npm@latest -g

• Firebase Account
• Neo4j Aura DB Account
• A physical mobile device or a mobile simulator

Installation

1. Clone the repo

   git clone https://github.com/SpiritedAway-BO/Capstagram.git
   

2. Navigate into both the client and server directories and install npm packages

   cd client/
   npm install
   -----------
   cd server/
   npm install
   

3. Navigate to client/components/Auth/firebase and copy the example_config in the same directory and call it config.js. Replace with your Firebase and Local Tunnel information.

   REACT_APP_FIREBASE_KEY: 'INSERT KEY HERE',
   REACT_APP_FIREBASE_DOMAIN: 'INSERT DOMAIN HERE',
   REACT_APP_FIREBASE_PROJECT_ID: 'INSERT PROJECT ID HERE',
   REACT_APP_FIREBASE_STORAGE_BUCKET: 'INSERT STORAGE BUCKET HERE',
   REACT_APP_FIREBASE_SENDER_ID: 'INSERT SENDER ID HERE',
   REACT_APP_FIREBASE_APP_ID: 'INSERT APP ID HERE',
   LOCALTUNNEL: 'INSERT LOCAL TUNNEL URL HERE',

4. Navigate to server directory and copy the example.env in the same directory and call it .env. Replace with your Neo4j Aura DB information.

   NEO4J_URI=YOUR NEO4J AURA URI
   NEO4J_USERNAME=YOUR NEO4J USERNAME
   NEO4J_PASSWORD=YOUR NEO4J PASSWORD
   AURA_INSTANCENAME=YOUR NEO4J AURA INSTANCE NAME

5. In new terminal window, navigate into server directory and run

   npm run server

6. In new terminal window, navigate into client directory and run

   npm run start

(back to top)

Meet the team:

Stephanie Chen
      LinkedIn: @stephaniezjchen
      GitHub: @stephaaniechen
Ahmed Hanafy
      LinkedIn: @ahmed-hanafy9
      GitHub: @AhmedHanafy9
Ryan Leigh
      LinkedIn: @leigh-ryan
      GitHub: @ryan-leigh
Roshan Patel
      GitHub: @roshanupatel
Tessa Thornberry
      LinkedIn: @tessathornberry
      GitHub: @tessathornberry
Curtis Wang
      LinkedIn: @curtiswang1014
      GitHub: @cwang1014

Capstagram Link: https://github.com/SpiritedAway-BO/Capstagram

(back to top)