⚠️ Before you start writing code

Today should be used for finalizing planning and doing research on data, technology, and tools you might need.

The following checklists will help you know when you are ready to start writing code.

✅ Checklist for the whole team

• Every team member is clear on your MVP, and you know exactly what you are building.
• You have added user stories and tasks (at minimum, for MVP) to your Trello board backlog, and you have first tasks queued in Current Sprint.
  • Your tasks should reflect the decisions you have made about how you will implement features (i.e., they are specific and detailed enough that you know where to start).
  • Make sure your tasks are labeled according to what responsibilities belong to the front end or back end.
• You have created a team organization on GitHub and added every team member.
• You have created your project repo or repos on GitHub and made sure everyone is added as a collaborator.
  • Make sure you have a .gitignore file! You can get one that is specific to your project at gitignore.io.
• You are clear on the Git and GitHub workflow for your team.
• Consider appointing a rotating team lead who can be responsible for running standup, leading at check-in, and looking after the Trello board.

✅ Checklist for the back-end

• 🚨 Make sure you are using django-environ and a .env file. This will be especially important for secret keys and sensitive info, like AWS credentials. DON’T COMMIT YOUR SECRET KEYS!
• Make sure you are using Postgres and not SQLite.
• Models! What models will you need?
  • What fields belong on those models? Use the Django Model Field Reference.
  • What relationships exist between your models? (one-to-many, many-to-many?)
    • Consider using the CRC model to help guide your discussions.
    • You should create a diagram for your models to map relationships. This may change as you work, but you should have a good plan to start with.
• What URLs will the front end need?
• What data will the front end request?
  • Are you returning HTML? -> What templates does the front end need, and who will make those?
  • Are you returning JSON? -> How will you structure your data?
• Deploy early and often. Who will deploy? Make sure more than one person on your team has the ability to do this.

✅ Checklist for the front-end

• Have you mapped out a user flow through your app?
• Wireframes for each interface the user will see
  • With backend, can you say what URL corresponds to each page or interface the user sees?
  • If using React Router (with a separate front-end application), what urls do you need?
• What data will you need on each page or interface? Where is it coming from?
  • What requests will you need to make from the front end?
• Are you making forms? Discuss data with the backend.
• What assets will you need?
• General strategy for css and design so that you can budget time for it.
  • Are you using a css library (e.g. Material UI, Bulma, Tachyons)? What is the general look and feel of your app?
  • Start to think about UI/UX and design
• Deploy early and often. Who will deploy? Make sure more than one person on your team has the ability to do this.

Reminders

• Standup starts Tuesday 1/18 @9:30 am (check your email for a cal invite)
• First check-in Tuesday 1/18 @11:00 (check your email for a cal invite)

Standup and check-ins will use your regular Zoom classroom.

🗓️ Today’s topics

• Turning user stories into tasks
• Putting tasks on your Trello board

✅ TODO: Create tasks on your Trello board today

Your team’s Trello board is ready with columns predefined to start you off. You are welcome to adapt it and create additional columns to support the way your team works.

These are invite links to join your team’s Trello board.

• Team Caktus
• Team Maestro Del Juego
• Team Two-Man Turtle
• Team Matcha

Note: you can totally change that background if it’s too much for you. 😆

Slides

• Trello & Tasks

🔖 Resources

• Atlassian: Writing User Stories
• FreeCodeCamp: How and Why to Write User Stories
• Designing User Flows
• A shorthand for designing UI flows
• Creating Perfect User Flows for Smooth UX

Example Trello Boards

These boards are from real final projects, so you’ll see most of the cards in the “Done” column

• Open Mic Trello Board
• Live Music Trello Board
• Music Teacher App Trello Board

🗓️ Today’s topics

• Refining your product idea
• Thinking about features and beginning to think about implementation
• Creating a product roadmap
• Writing user stories

✅ TODO: Finalize your app idea

What is your app and what does it do?

One representative on behalf of your team should fill out this form by tomorrow afternoon to tell us what product you are building. Please make sure the responses represent everyone on your team.

Defining MVP and prioritizing features

Use these slides to guide your team discussions today. We’ll go over them in class, followed by time to work on creating your product roadmap with your team.

• Product Roadmap Slides

🔖 Resources

• Atlassian: Writing User Stories
• FreeCodeCamp: How and Why to Write User Stories
• Getting the Most Out of Personas
• Creating Personas
• Stack Overflow Podcast: Building a web app

The past few months have prepared you to take on the challenge ahead in these next four weeks. You may or may not feel ready, but you ARE.

Your goal in this phase is to design and build a real-world software product, working collaboratively on a small team using agile development practices and all the tools you’ve already learned – and some you will learn as you go.

At the end of the phase, your team will present your product to an audience of local tech professionals, hiring partners, and the Momentum community.

The experience of working on a team during this phase and the product you build will form the foundation for your job search. _The people skills you’ll use will be just as important as the technical skills!

You will not begin writing code for your project until Thursday of this week.

Today’s topics

• What is agile development?
• Forming final project groups
• Brainstorming product ideas

✅ TO DO

• BEFORE NOON: Complete this form about Phase 4
• Create a team agreement with your team
• Brainstorm ideas for your final project

Slides

• Phase Overview
• Agile Development
• Coming up with your idea

🔖 Resources

Productivity Timers ⏲️

• Cuckoo The one we use in class 🤓
• Pomofocus Pomodoro Timer
• Marinara Pomodoro Timer Chrome Extension

Time Management

• The Pomodoro Technique for Time Management & Productivity
  • Zapier’s list of Pomodoro Apps
• Time Blocking
• Common Time Management Problems & Solutions

Idea Generation 💡

• awesome-react
• awesome-javascript
• awesome-django
• awesome-python
• public apis
• data is plural

Agile Development

• Beginner’s Guide to Scrum and Agile
• 12 principles from the Agile Manifesto
• The Power in Agile, a talk by Sarah Mei A critical look at the power dynamics implicit in Agile methods.
• Command Line Heroes Podcast Produced by RedHat and hosted by Saron Yitbarek, this is a scripted podcast that tells the story of software from the last 40-ish years or so. Season 1 has an episode of the origin of Agile Development. The whole series is really well done. If you enjoy understanding the history of things like I do, you will like this podcast!
• What is Code? by Paul Ford Read this for the stakeholder perspective – really long but really well written and produced!

🗓️ Today’s Topics

• Implementing search in your application 🔍
• Images
• File Uploads: forms and requests

Example Request to Upload a File

This is an update (notice the PUT verb) to an existing record. In this case you are including the file itself as the body of the request (notice it in the second position as an argument to put()) and setting specific headers required by the server to handle the binary file attachment.

axios.put(url, file, {
  headers: {
    Authorization: 'Token ' + token,
    'Content-Type': file.type,
    'Content-Disposition': `attachment; filename=${file.name}`
  }
}).then(res = res.data)

📖 Read | 📺 Watch | 🎧 Listen

• What Are HTTP Query Params?
• How to Build a Search Bar in React

🔖 Resources

• Generate random images from Unsplash without an API
• Uncontrolled components
• Refs and the DOM - class-based component examples
• useRef hook
• Using files from web applications
• Custom hook recipes
• More custom hooks
• Official React docs on custom hooks