The Spinal Cord Injury Research Map Database (SCIRMD) is an application which allows users to discover research studies and other resources for people living with Spinal Cord Injuries and/or Traumatic Brain Injuries. Passive Users have the ability to register for authenticated accounts, upon registration, users are able to submit research projects and local resources of which they are aware.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Software or Technology to install/obtain
- Postgres & Postico (used to manage the databases)
- An IDE code viewer such as Visual Studio Code, Atom, Sublime, etc...
- Obtain an Google Maps API key. Can be obtained by creating a Google Maps Platform account at the following link:
src/
contains React Components.public/
contains static client-side assets.build/
after the project is built, contains the transpiled code fromsrc/
andpublic/
which will be viewed on the production site.server/
contains necessary Express App files.
A step by step series of examples that tell you how to get a development environment running.
- From GitHub, navigate to the main page of the repository. Find Repository Here
- Under the repository name, click Clone or download.
- In the Clone with HTTPs section, click the copy button to copy the clone URL for the repository.
- Create a local directory or navigate to the local directory into which you wish to clone the project.
- Open your Terminal, in the terminal navigate to the directory in which you created or an already existing directory from step 4.
- In the terminal, type
git clone
, then paste the URL you'd copied in Step 2.
$ git clone https://github.com/srz1992/get-up-stand-up-project
- Press Enter. Your local clone will be created in the directory from step 4.
- In the Terminal, type 'npm install' and press Enter
- Open the project in your IDE.
- Locate the 'src' folder
- You will need your Google Maps API key for this step : In the 'src' folder create a new file called Key.js and copy and paste the following into the new Key.js file you just created:
export const KEYS = { GOOGLE_API_KEY: 'put your Google Maps API key here' }
-
In your IDE, navigate to the '.gitignore' file and perform the following steps: a. on line 37, enter a "#" in front of "build/" ex: #build/ b. on line 68, enter a "#" in front of "Key.js" ex: #Key.js
-
Download and Install Postico
-
In your terminal, type 'brew services start postgresql' and press Enter
-
Open Postico and create a new database named "gusu_project"
-
Reference and execute the queries provided in the
database.sql
file. This will create the database tables required.
###IMPORTANT### Using Postico, CREATE THE FOLLOWING TABLES IN THE 'SQL Query' FILE IN THE FOLLOWING ORDER:
- users
- profile
- resources
- statuses
- research_type
- research_phase
- locations
- articles
- quasi_articles
npm run server
Then press Cmd + t to open a new tab in Terminal
npm run client
Have fun!
-
In your terminal, run
npm install
-
Create a
.env
file at the root of the project and paste this line into the file:SERVER_SESSION_SECRET=superDuperSecret
While you're in your new
.env
file, take the time to replacesuperDuperSecret
with some long random string like25POUbVtx6RKVNWszd9ERB9Bb6
to keep your application secure. Here's a site that can help you: https://passwordsgenerator.net/. If you don't do this step, create a secret with less than eight characters, or leave it assuperDuperSecret
, you will get a warning. -
Api Key -- There is a Key.js file in the src folder that contains your API keys for google maps. Please add the file to your .gitignore.
-
Start postgres if not running already by using
brew services start postgresql
-
Run
npm run server
-
Run
npm run client
-
Navigate to
localhost:3000
- Sign up for an account on Heroku.com
- Install Heroku CLI by typing
brew install heroku
in Terminal - Authenticate by typing
heroku login
in Terminal
Note: Your project also needs to have a git repository.
Run the following commands from within your project folder.
- In terminal, navigate to your project folder and type
heroku create
- Login in if prompted
- Type
git remote -v
to ensure it added successfully
Make sure your PORT is configured correctly as:
JavaScript
var port = process.env.PORT || 5000;
Next, commit your changes and push them to Heroku:
git add .
git commit -m "MESSAGE"
git push heroku master
Note: You'll need to commit and push each time you make a change that you want to deploy to Heroku. Keep in mind you CAN NOT pull from Heroku. This is not a replacement for GitHub!
Lastly, open terminal and type heroku open
as a shortcut to open your website in a browser.
Note: It is best to fully test your code locally before deploying to Heroku. Bugs are much harder to troubleshoot on a live website.
heroku logs
- Display error logsheroku config
- Show basic app infoheroku restart
- Sometimes it helps to turn things off an on againheroku open
- Opens the website for you project in the browser
More detailed instructions can be found here:
- React - A JavaScript library for building user interfaces.
- React-Redux - React bindings for Redux.
- Axios - A Promise-based HTTP client for JavaScript.
- Express - Framework for Node.js.
- PostgreSQL - Open source object-relational database.
- Node.js - JavaScript runtime.
- Nodemon - Utility which monitors any changes to the source and automatically restarts your server.
- Material-UI - React components implementing Google's Material Design.
- Passport.js - Authentication middleware for Node.js.
- Google Maps Platform - Build customized, agile experiences that bring the real world to your users with static and dynamic maps, Street View imagery, and 360° views.
- Google Maps React - Declarative Google Map React component.
- React-Google-Autocomplete - Autocomplete functionality for Google Maps Platform.
- Material-UI - React components implementing Google's Material Design.
- SweetAlert2 - A beautiful, responsive, customizable, accessible replacement for JavaScript's popup boxes.
- Recompose - A React utility belt for function components and higher-order components.
- Curtis Morice - Front-End & Middleware Development - Curtis Morice
- Johnny Packard - Front-End & UI Development - Johnny Packard
- Lauren Smith - Server & Redux Back-End Development - Lauren Smith
- Law Yang - Front-End & Middleware Development - Law Yang
- Sean Zilka - Team Lead, SQL, Back-End Development - Sean Zilka
- Rob Wudlick at Get Up Stand Up to Cure Paralysis Foundation for your wisdom, and inspiration throughout this project.
- Prime Digital Academy and all its staff.
- Mary Mosman for her continued guidance.
- The Menkar cohort for all their assistance.