gitshare icon indicating copy to clipboard operation
gitshare copied to clipboard

A social platform for software developers to connect and collaborate. Built using React, Redux, Firebase, and the GitHub API.

Git Share

8 May 2020 | Jamison Cozart

Description

A social platform for software developers to connect and collaborate. Built using React with Redux for the Frontend and Firebase as the Backend.

View the live site at: https://gitshare.app (optimized for mobile experience)

landing page screenshot post feed

Landing page features link to github and particle system background. Feed page shows posts by all users

sign in profile page

Users need to sign up and sign in to use the site. Users can connect their github profiles to their gitshare profiles to display data about the languages they've recently used as well as their github activity.

details page sidebar menu

Users can click on posts to see post description, comment thread, delete buttons if the user is the author of the post, or a save button if the user is not the author, and an upvote button. Users can open the sidebar which allows users to filter their post feed by most upvoted, newest, or posts by users they are following. Also allows for toggling dark mode.

Follow list dark mode

Users need to sign up and sign in to use the site. Users can connect their github profiles to their gitshare profiles to display data about the languages they've recently used as well as their github activity.

Setup/Installation Requirements

Node install

For macOS:

If Homebrew is not installed on your computer already, then install Homebrew by entering the following two commands in Terminal:

curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install
echo 'export PATH=/usr/local/bin:$PATH' >> ~/.bash_profile

Install Git with the following command:

brew install git

Next, install Node.js by entering the following command in Terminal:

brew install node
For Windows:

Please visit the Node.js website for installation instructions.

Install this application

Clone this repository via Terminal using the following commands:

cd desktop
git clone https://github.com/jamisoncozart/git-share
cd git-share

Set up a firebase account, and register an app by following this documentation https://firebase.google.com/docs/web/setup

Create a .env file in the root directory and add the firebase configurations:

touch .env

Add this to the .env file and include your own firebase keys between the quotations:

REACT_APP_FIREBASE_API_KEY = ""
REACT_APP_FIREBASE_AUTH_DOMAIN = ""
REACT_APP_FIREBASE_DATABASE_URL = ""
REACT_APP_FIREBASE_PROJECT_ID = ""
REACT_APP_FIREBASE_STORAGE_BUCKET = ""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ""
REACT_APP_FIREBASE_APP_ID = ""

Next, install npm at the project's root directory, and start the server:

npm install
npm start

If everything is correct, the localhost site should open automatically

View the contents of this project by opening in VSCode:

code .

Development Process

Application wireframing features pages for Sign Up/Sign In, posts, saved posts, creating new posts, viewing accounts you've followed, and your profile.

Application Component Tree

Application Component tree depicting the Component heirarchy for state management and planning.

Technologies Used

  • React
  • Redux
  • React Router
  • Firebase
  • Node.js
  • WebPack
  • CSS
  • Git

© 2020 Jamison Cozart