FCC Indy Website

http://freecodecampindy.com

Navigation

About this Project
Contribution Guidelines
The Projects Page (Boards)
Prerequisites for running locally
Running locally (first time)
Running locally (all subsequent times)
Including Styles (Sass or CSS)
Assets
Credits

About this Project

Website for the local Free Code Camp group in Indianapolis, IN.

Contribution Guidelines

We welcome contributions from local Free Code Camp Indy members. Please get in touch with Gwen Faraday if you would like to contribute to this project: [email protected]

The Projects Page (Kanban Boards)

On the Projects Page there are boards to track development. Here is how they work:

1. Note - Quick title of a task that needs to be done
2. Issue - Detailed description of what needs to be done. Comments from others regarding the task and what should be done or how it should be done.
3. Groomed - If the issue no longer needs to be fleshed out, it is moved to groomed, so people know it's ready to be worked on.
4. In Progress - If you see a groomed issues you want to work on, then you assign it to yourself and move it to in progress.
5. Complete - When an issue is done it is moved to completed.

Prerequisites for Running Locally

1. Install Git globally locally
2. Install Node.js and NPM globally
3. Install the LiveReload plugin (recommended, not required)
   • Chrome Extension - After install go to your Extension settings and give LiveReload access to file URLs
   • Firefox plugin

Running locally (first time)

1. Fork this repo

   • Click the fork button at the top right of this repository

2. Clone down your fork

   • OSX/Linux:
     • Open Terminal
     • mkdir ~/GitHub
     • cd ~/GitHub
     • git clone https://github.com/Free-Code-Camp-Indy/free-code-camp-indy.github.io fcc-indy
     • cd fcc-indy
     • You now have the project stored in : Your User Profile/GitHub/fcc-indy
   • Windows:
     • Open Command Prompt
     • md %USERPROFILE%\Documents\GitHub
     • cd %USERPROFILE%\Documents\GitHub
     • git clone https://github.com/Free-Code-Camp-Indy/free-code-camp-indy.github.io fcc-indy
     • cd fcc-indy
     • You now have the project stored in : My Documents\GitHub\fcc-indy

3. Create a new branch named "issue#", example issue7 or issue15

   • git checkout -b issue16 master (Change 16 to the number that matches the issue you are working on.)

4. npm install

5. npm start

6. Navigate to localhost:8000

7. Click the livereload icon in your browser to enable it for that page

Running locally (all subsequent times)

1. cd into the directory:
   • OSX/Linux: cd ~/GitHub/fcc-indy
   • Windows: cd %USERPROFILE%\Documents\GitHub\fcc-indy
2. npm install (in case any dependencies have changed)
3. npm start
4. Navigate to localhost:8000
5. Click the livereload icon in your browser to enable it for that page

Including Styles (Sass or CSS)

1. Sass indented syntax files:

   • Save file with a .sass extension and precede filename with an _ (eg _filename.sass)
   • Import file into style.sass file (eg @import "filename" - _ and extension not required)

2. CSS or SCSS syntax files:

   • Save file with a .scss extension and precede filename with an _ (eg _filename.scss)
   • Import file into style.sass file (eg @import "filename" - _ and extension not required)

Generate new mock "events" data

By hosting through git pages we've lost the ability to use a server-side to hide away secret API keys. You should not commit secret API keys to a public repository. While we figure out a trusted solution, we must generate data and upload a ".mock.json" file locally using your own API key. Note: you only have a limited number of API requests per day so don't send too many requests.

Here's how you set up to generate these files.

The Easy Way

1. Acquire an API key from Meetup.com by visiting meetup's api key page
2. Add this key to meetup_api_key.txt, a file you need to create at the root of this repository
3. Run npm run generate

The Hard Way

The bird's eye view of what we're going to do involves learning a little of how your terminal works, then what an environment variable is and how to set one. If you are on Windows you may want to download a UNIX-like shell such as Cygwin in order to follow these steps. Alternatively you can search for powershell or command prompt variations of these shell commands.

1. Acquire an API key from Meetup.com by visiting meetup's api key page
2. You must then populate a environment variable called MEETUP_API_KEY with your API key.
   • You can create a temporary environment variable running: export MEETUP_API_KEY="replace this text with actual key". You can then test this by running echo $MEETUP_API_KEY to see the secret value you added. Once you close your terminal window the variable is destroyed.
   • Alternatively You can more permanently add this to your type of shell (e.g. bash, zsh)'s "runcom" (abbreviated rc) file!
     1. Find out which type of shell you use (most likely bash) by running echo $0. Example run:

        > echo $0
        -zsh  # <-- this is my shell
        

     2. Look for your shell's "rc" file in your home directory (aka ~) by running ls -a ~ | grep "shell name", replacing "shell name" with the shell you identified in step #1. Example run:

        > ls -a ~ | grep "zsh"
        .oh-my-zsh
        .zsh-update
        .zsh_history
        .zshrc  # <-- Here it is!
        

     If you do not see a "rc" file for your shell, make one for your shell's type (e.g. touch ~/.bashrc).
     1. Open up the ".shellrc" you found in step #2 in a text editor. Once opened add export MEETUP_API_KEY="replace this text with actual key".
     2. Open a new terminal window. Test the success of your endeavors by running: echo $MEETUP_API_KEY.
3. Run npm run generate. If you set the MEETUP_API_KEY correctly you should not encounter errors.
4. Feel free to commit the newly generate free-code-camp-events.mock.json data if information has been updated.

Note: Make sure you have not committed and pushed up your API key somehow, or else you must immediately generate a new key!

Assets

Google Drive - May have to request access

Credits

• Team Leader/Developer:

  • Matt Allbright

• Project Manager:

  • Gwen Faraday

• Designers:

  • Tara Ree Miller

• Developers:

  • Larry Tooley
  • Andrew Allbright
  • Gavyn Leavitt
  • Mark Loeser

• Advisors:

  • The Jared Wilcurt