attshapehackathon

A. Description

attshapehackathon is a React app that was built in 1.5 days by:

  1. Bryant Cabrera - Full Stack Software Engineer,
  2. Kevin Cuison - Full Stack Software Engineer,
  3. Abraham - Front-End Developer,
  4. AC De Leon - Front-End Developer,
  5. Hann-Wei Chang - UX Designer,
  6. Tianyu Li - UX Designer

B. User Stories

C. Images

  1. Wireframe

D. Technologies Used

Front-End

1. React
2. React Router
3. CSS
4. BEM
5. Google fonts
6. Font Awesome Icons

Back-End

1. Node.js
2. Express
3. MongoDB
4. Mongoose
5. truffle

Authentication

1. bcrypt

Planning/Organization/Design

1. Adobe XD
2. Adobe Photoshop
3. Adobe Illustrator

E. Getting Started

  1. Creating local copy of repo
  2. Commiting & pushing changes
  3. Publishing

F. Github workflow

  1. Link to repo: https://github.com/BryantCabrera/attshapehackathon.
  2. Log into your personal repo. Then, click link above and fork the repo. Make sure the repo is in your personal GitHub (go to your personal GitHub account and the project repo “mom-me” should be there). Then, from YOUR PERSONAL FORK, clone it to your local repo.
    1. $git clone {without curly braces, put the clone link here}
    2. $git remote add upstream https://github.com/BryantCabrera/attshapehackathon
  3. In terminal, cd to the project repo, open it, and $git checkout -b {without these curly braces, put your first name here in all lower case letters}
    1. EXAMPLE: $git checkout -b bryant
    2. **any other time you are changing back to your branch, you don’t need to type the “-b” part anymore
  4. $npm install
    1. This gets all of the react & express packages downloaded.
  5. FOR EXPRESS: you’re only concerned with the following folders/files
    1. Controllers
    2. Db
    3. Models
    4. Public
    5. Routers
    6. .env
    7. Server.js
  6. FOR REACT: you’re only concerned with the following folders:
    1. src (where you will be making ALL components)
    2. public
  7. When you are 100% sure your data is ready to be merged into the master copy, make sure you are on YOUR OWN BRANCH (lower left of VScode), call Bryant to let him know you're merging, then:
    1. $git add -A
    2. $git commit -m “Adds {put your name here}’s {2-3 word description of the feature/code you made}”
    3. $git push origin {without the curly braces, branchname}
      1. This passes up the whole branch
    4. go to your PERSONAL GitHub repo
      1. OPTION 1: on your PERSONAL GitHub repo, accept and merge the pull requests
      2. OPTION 2 (if you don't see the green button ABOVE the clone/download button on the right):
        1. in your PERSONAL remote repo, use the dorpdown on the left to switch to the branch that you made updates to
        2. click the "New Pull Request" button directly to the right of that dropdown menu
        3. on the new screen, make sure the left side points to the origin master, and the right side points to your personal branch that has your edits
  8. Make sure your local repo is always in sync.
    1. make sure you don't have any pending commits, then
    2. $git checkout master
    3. Bryant will let you know when to $git pull upstream master
    4. $git branch -D {without the curly braces, your name all in lowercase}
      1. this deletes your old branch
    5. $git checkout -b {without the curly braces, your name all in lowercase}
  9. Merging
    1. On master GitHub link
      1. Click green button called “compare & pull”
      2. Create pull request (a) Title: {YourName in all lowercase} –{1-3 word description of new feature/code you made} (b) Description: {line numbers} : Describe in detail what change you made and what it does.
      3. Click send pull request
    2. DO NOT hit “merge”, Bryant will be handling this.