Skip to content

Project intro plan

Jump to bottom
nbogie edited this page Jun 9, 2019 · 12 revisions

Mentor notes for project intro

  • A quick 30-second glimpse at the working project, for context. Let the students see what they're going to be building today. Not hands-on, yet (we'll get there, soon).
  • Clarify: This will be individual work, at your OWN pace, with lots of mentor support.
    • (future weeks may have more collaboration).
  • There are no stupid questions:
    • We don't expect you to have remembered everything from class!
    • This is your opportunity to ask anything about ANY of the tech we use.
  • What success looks like in this module:
    • The objective is NOT to make the app - the objective is to learn and practice, by trying to make the app.
      • If you make the app but do not understand your code. Is that success? Your next practice project will be just as tough and you will always need the same amount of help.
      • If you do not complete the app, BUT you DO improve your understanding, that is SUCCESS, because your next practice project will be easier and you will need less help!

The bigger tech picture

Short discussion about the bigger (tech) picture for a project (encourage mentors to contribute, too). For this project we're going to fast-forward to the coding (HTML,CSS,JS) because we've been given a design.

Have the students and mentor shout out aspects of production until we have more or less these bones in place:

  • Design:
    • UX design, visual design, including responsive design, sound design, ...
  • Coding
    • visual impl.
    • interaction impl.
    • audio impl.?
  • Testing
  • Hosting
  • Source control for backup, collab, etc. (git, github)
  • Marketing, SEO, ...
  • ... ?
  • Note: These do NOT simply run in chronological order

Make sure everyone's clear which parts we're focusing on with this project.

Possible project emphases

Everyone will try to get the basics working, but after that...

...there are some possible project directions:

  • e.g. spend more time on css & responsive design
  • e.g. spend more time on fetch, error handling

A minimal road-map for today:

  • Understand what you're trying to build
  • Get your app basics in place (forked and cloned from the starting project)
  • Follow the project guide at your own pace
    • We'll be starting with a prototype with plain HTML and CSS, before thinking about React components
    • After, we'll use static JSON before we use live JSON from the API
  • Keep checking in your work to git and pushing to your github repo
  • Get it hosted early today - don't wait til you're "finished". It's a good way to check for problems.
  • Keep going back to the spec to check you're building what was asked for! Ideally, you'd keep going back to the customer.
  • Ensure you're in a good position towards the end of the day to be able continue in homework
  • Optional: A short JS-basics practice, after lunch. Perhaps also an experiment with fetch.

Task: let's look at the app in some detail

The goal is to try to understand what you're trying to build. Also to notice subtle detail.

https://github.com/CodeYourFuture/cyf-weather/blob/master/README.md#aim

With a partner:

  • look at the video of the app in use
  • what interesting features do you notice? what user interactions, what application feedback?

Group discussion: go round with one contribution from each pair till we've found some of the subtle design features.

  • clarify: In this project, your "boss" is asking you to build it so that it looks exactly this way. Therefore much* of the visual design for THIS app has been done for you. (* see below)

  • What hasn't been specified?

    • error handling
      • what errors might we get?
    • what else hasn't been specified? (responsive design)

  • What are you confident about?

  • What bits are you worried about?

Start onto the project document

https://github.com/CodeYourFuture/cyf-weather

Post-Setup checkpoint

All to run through setup before we have any fun. Checks:

  • Student has created a fork
  • Student has pushed one (trivial) commit to it.
    • e.g. change the name of the html title from React App to "My Weather App".
  • Student can demonstrate: "how will you submit more changes to your code, in future?"

Lunch checkpoint

  • Everyone is on github
  • Everyone has a (probably quite empty) app hosted on netlify
  • Everyone's github mentions their deployed project URL (mussie-weather-app.netlify.com).
  • Everyone has submitted their two URLs, here: https://forms.gle/56Ncpz44Jbrz3EZC7

Misc notes

Mentor note: netlify deploy instructions. Those are manual. Eventually students will want to use github setup, so that pushing to master does everything for them. Have the students link their github in their netlify account before running the netlify deploy process for the first time.

Fill in Feedback Form: Students to mentors: https://forms.gle/svzuNffT4KipQPNN6

Clone this wiki locally