checkpoint5

Capstone requirements
User stories
Tracking stories and issues
Wireframing your app
Build your static client
Implement your MVP
Feedback and iteration
Style your app
Finalize your capstone
Build your static client
Objective: By the end of this checkpoint, you can implement a static client.

In this checkpoint, we'll take you from your first deploy to having a full static version of your client. By the end, you'll have a prototype of your React app that uses mock data and minimal styling. You'll be able to get it in front of users to get initial feedback before building out the full version later in this module.

At the end of this checkpoint, you’ll complete 2 assignments:

Implement your static client.
Collect feedback on your app.
Key Terms

Static client
Initial deploy
We're going to take care of the initial deployment for our client now. As a general rule, it's best to get your code wired up sooner rather than later, because it makes you more likely to rapidly release small iterations, get feedback, and further iterate (a.k.a., the virtuous product development cycle 😉).

We covered the steps for creating and deploying a new React app earlier in the course, so we won't go into detail, but here are the steps in brief:

Create a new react app in your local project folder. You can follow the steps in the React Clean Start checkpoint. When naming your project folder, go with something that corresponds with the name of your app; lucidity-app is a better choice than my-first-capstone.
Create a repo on GitHub with the same name as the app you just created. git init your app folder on your computer and link it up to your new GitHub repo. Add your files and do an initial commit, then push up to GitHub.
Do an initial deploy to Zeit to create the new site. Follow the instructions in the React Deploying to production checkpoint.
Code up your static app
Now, you're ready to start coding up the static version of your React app. You'll want to have your HTML wireframes close at hand so you can reference them as you begin to build out your components.

Creating a static React app is not an exact science, but there are some good general guidelines to follow. Broadly speaking, we find the suggestions in Facebook's official guide to thinking in React to be helpful. Spend a few minutes looking it over before you get started, keeping in mind that instead of mocks from a designer, your HTML wireframes will serve as your mocks. You can also refer back to the Thinking in React checkpoint.

You'll probably want to add React Router from the get go also, insofar as your app has distinct pages or views.

Getting feedback
Once the static version of your app is live, it's time to get user feedback. The sorts of things you're going to want to find out about are:

Do my users think the app is interesting or valuable?
Did my users use the app as I intended?
Did my users encounter any bugs or broken features?
Did my users understand how to use the app?
Is the basic functionality of my app working?
Get feedback from real life people who are not you or your mentor, and make sure to leave a (digital) paper trail. We'll leave it up to you how to do this, but here are some ideas:

Create a list of questions that you ask in person or over the phone, typing up the response when you talk to each user
Send over your questions in an email, and ask your test users to reply with their answers
Create a short survey using Google forms and send a link to your test users
Based on this feedback, do a round of iteration on your app to address any issues that came up.

Note that any iteration should only affect the static version of your React app. We'll build out the actual API in the next checkpoint. Also, you may get feedback about the overall appearance of your app, since you haven't created polished styling yet. If you do get that kind of feedback, note it, but for now, hold off on iterating on it. Again, any iteration at this point should only pertain to the functionality of the static React app.

Assignment
To complete this assignment, you need to create a static version of each view in your app. You should not go deep into styling and gloss. For now, you should focus on providing a functional experience on mobile. Ultimately, you want to get a static version of your app in front of users so you can get feedback on the underlying feature set and iterate, before moving on to create your API and complete the full version of your client. This staged, incremental approach will save you from prematurely committing to an API and styling before getting feedback on the basic functionality of your app.

Once you have a live, static app, collect feedback from a few users and make any necessary updates to your client.

When you're done, submit a link to a Gist with the following information in it:

Name of your app
Link to live static version
Link to repo on GitHub
The user feedback you collected.
Indicate who you spoke to, what you learned, and what if anything you did in response to the feedback.