START BY NOT CODING - PLAN!

1. User Stories (what & why)
   • As a ... I want to / should be able to ... because ... (benefit)
     • eg: As an admin, I should be able to edit my event because the timing and details might change.
     • As a public user, I should be able to see all events and their details.
2. User Scenarios (sequence of HOW user can accomplish each user story)
   • Given ... when ... then ... and ...
     • eg: Given that I'm logged in, when I select my event from the calendar then I can use the datepicker to edit the date and click "Save" to keep the change.
3. MVP: What is the MVP design (total of all user stories)?
   • Don't code it if you won't demo it
4. Database Design (ERD, including any APIs that may be used)
   • Nouns in user stories/scenarios describe the tables. Also think of any relational/join tables that may be needed to JOIN tables together to get the data needed in the stories.
5. (Server Framework) - prescribed by Compass
6. Routing
   • Use user scenarios to plan routes: the VERBS are the HTTP methods and routes, and the NOUNS are the REST resources and DB tables.
   • List ALL routes necessary to accomplish user scenarios, eg: GET /photos/:id PUT /photos/:id DELETE /photos/:id
   • Will you use <form> method override and/or AJAX so that you can use more than only GET and POST (encouraged)?
7. Wireframes: Not About Visual Design!
   • Show info hierarchy and level of detail needed to know what data goes on each page and where user input happens
   • Should be a mental check
   • Compare wireframes against ERD and User Stories / Scenarios to ensure they're all consistent with each other
8. Storyboarding (User Flows)
   • Show the wireframe views in various possible states, linked in sequence as a flowchart showing how each User Scenario can be accomplished.
9. Visual Design
   • It matters; this sways both users & employers more than you'd think / hope.
   • But don't worry / spend too much time on this - use Dribbble, FolioFocus, and Smashing to check out / borrow designs others have made.
10. UI Framework

• MUST Use a grid framework that's important to learn (eg: Bootstrap, Foundation)

11. Git

• FIRST THING: One person create repo, give group members collaborator access
• Work on branches, NOT ON MASTER
• Make a Pull Request (test code works)
• Checkout Master & pull (test code works)
• Merge in the PR (test code works before pushing! Fix first!)
• Push origin master
• Checkout a new branch and delete the old/merged one

PRE-CODING

12. Scaffolding - do this as a group! So everyone knows how it's set up, and can solve environment things together.

• Try to & install all npm modules etc. that are needed NOW
• Use Express skeleton app provided by Compass
• Use CDN links with script tags to import client-side libs wherever possible - eg: jQuery, Bootstrap
• (ALL TOGETHER): Make sure you can type npm install && npm start and have the app initially running without errors before pushing & cloning the repo to work separately
• Add everyone as a collaborator with push access on the repo
• THEN can have everyone clone & start working.
• Divide up tasks, make branches; may decide to pair program
  • Will you choose the tasks that you currently feel uncomfortable with so you can learn? If someone else seems 'better' at it, they're just a resource you can ask for help.
  • Each person should work on separate, SHORT and focused feature branches (don't go too long without merging your work into master to share, and don't start coding a different feature midway through your feature branch).

CODING (probably don't need to start until tomorrow even)

13. Migrations!

• If you have to change the db schema, USE MIGRATIONS (+ have everyone run them) so it doesn't make teammates' existing DB incompatible when they pull down your code

14. Front end

• Decide on CSS id and class naming conventions (Bootstrap's own conventions are the main ones to get familiar with)
• Use placeholder image services (like placekitten) and lorem ipsum as initial content filler before you have real data
  • Experiment with changing the size and/or amount of text for user-submitted images & text to make sure your responsive layout doesn't break
• Change viewport sizes/shapes in Devtools to test responsive layout

15. Back end

• Data objects: Start by using psql shell to make sure db objects/relations are working (don't even need working app routes to test this).

16. Communication Tools

• Pull requests on Github?
• Share your schedule information with each other; meal breaks, weekend work times, appointments for timeout etc.
• Trello or Github Projects (click on the "Projects" tab on your repo to create one - allows people to see who's assigned as responsible for what, and what is currently being worked on. Eliminates duplicate work, or not knowing what you can do next.