Learn about the project we will be building.
- [Instructor] In the first video for this class, I gave you a short preview of the application we're going to be building. I mentioned that I wanted to do something with machine learning, so I came up with an idea for a site where users could log in and play simple games like tic tac toe against a mystery opponent who may or may not be a machine pretending to be a human. But now let's take a step back, way back to the brainstorming and planning phase. Remember, our mindset for this course is getting to MVP, minimum viable product. That means we need to keep our eyes on the prize and pare way unnecessary complexity from our application.
We need to watch out for feature creep. When I say watch out for feature creep, I mean that we as application designers need to be careful that we don't continue to add small tools, features, and improvements to our application until the whole project becomes unwieldy and unnecessarily complicated. While we're planning our app, we're going to make sure our focus is on the application's core functionality and we're going to be wary of potential complexity that might make our application unnecessarily difficult to build. If you get a really good idea but think it might be a bit tricky to implement, you should write it down and hopefully you can get to it in a future version.
Here, for instance, are some of the features we're going to implement and some of the features that I wanted to add but I'm afraid I'm going to have to save for later. So when I think about the core features, I want my users to be able to have an authenticated login, I want them to be able to play against a simple bot, I want them to be able to guess if that opponent is human, and I want to store all this information in a database. I also know that there's some ideas that I should save for later. For instance, even though I want authenticated login, I probably should save Facebook integration for another time.
I also know that I need to save playing against a live person. Right now, writing a bot is going to be relatively simple. Getting our application to connect to a server that allows us to have player versus player could be a lot more difficult. I'm also going to save this leaderboard idea for later. I think having users interact with one another just like playing, could be a little bit too complex for our minimum viable product. Finally, I'm definitely going to wait on using a real machine learning API. That could be a lot of work. To guide the first stage of our development, we're going to create two important sets of documents.
These will be our user stories and our wireframes. Let's start first with our user stories. Our user stories are intended to aid development by providing us with a linear, narrative style description of a hypothetical user's actions as they utilize our application. I can think of a few user stories. The first user story that I imagine is that of logging in. First the user can choose to create a new account or login. Next the user enters their username and password and presses login or signup. And finally, the user is navigated to the site's homepage.
Let's take a look at what we want that to be like in practice. So here I am on my site. I press log in or sign up. I can create a new email, and great, I've been brought to the homepage. Let's check out another user story. The next user story I want to document is playing tic tac toe. First the user chooses to start a new game, then the user is connected with an opponent, next the user plays through a game of tic tac toe, and finally, when the game is over, the user gets to guess whether or not the opponent was a human or a robot.
Let's imagine what that would look like. I start my game, I get to play against an opponent, and after I win or lose, I get to guess was my opponent human or robot. Finally, the last user story I want to document is viewing and editing one's profile. I imagine that first the user may navigate to their profile page from the menu, that the profile page displays the user's information, and a record of their last games, and that the user may edit their personal information.
On my site, I want to be able to go to my profile page and see a record of my games. So these three user stories, logging in, playing tic tac toe, and viewing and editing one's profiles, are the user stories that are going to guide our development. We'll take these as a base for the way we want our users experience with the application to go. The next document we're going to create is our wireframes. Wireframes are visual, sometimes interactive representations of an application, which often focus less on the application's specific graphic design elements and instead emphasize the layout, features, functionality, and broader user experience.
Let me show you an example of one wireframe I created for our homepage. Here you can see I don't focus too much on color or the specific texture of individual buttons, but instead focus on what the layout and general functionality of each of the tools are going to be. Here I gave another wireframe, imagine how I want my pull-out drawer to look, and then here also is a wireframe of how I thought our profile page could look. As you can see in my wireframe, I don't get into too much detail about what goes in the game records, I just put a box and say this is where the game records will go.
If you're not a graphic designer, don't worry. That's not what wireframing's about. And you also don't need to be afraid to use a pen and paper. There are also a number of other tools available online, many of them free. I used Adobe XD for my wireframes, but I've also used UXPin, Marvel App, and Balsamiq. Go online and check out what works best for you. Now we have our user stories and wireframes to guide our development as we move forward. Remember, it's okay to change things. We don't need to use these as a strict rulebook. Instead, they should be our guiding documents.
- Installing local dependencies
- Generating a starter project
- Deploying to Heroku
- Planning your development process
- Using styled-components
- Styling for mobile
- Setting up models on Graphcool
- Creating Relay mutations
- Adding Relay to your authentication flow
- Protecting routes with authentication