1. Getting Started

1.1 Introduction

There's a lot of talk about Flux applications going on around the Internet these days. And if you haven't been keeping up with it you might be wondering what exactly is Flux and should I be using it? Hi, I'm Andrew Burgess and in this course, I'm going to teach you all about building a Flux application. Flux is actually an application architecture similar to MVC. And so you can use the Flux pattern to build amazing web applications. And that's what we're going to be doing in this course. We're going to be building a simple Twitter clone that we're gonna call Chirper. It's going to be built with the Flux pattern, and we're also going to use React as the view library. So, we have two different projects from Facebook in this course. Throughout this course, you'll learn what flux Is and how you can do it. We'll take a look at building actions and stores. We'll take a look at how our views should interact with those actions and stores. And we'll build a small but robust server side that will manage all of our user accounts and data for us. We've got a lot to cover here, so as soon as you're ready, let's get started.

1.2 Application Demo

Let's take a look at the final version of the application that we're going to build in this course. That way, as we go through these lessons, you'll have an idea of where this project is heading. So I have the server started, so I'm gonna head over to local host port 3,000, and notice that I am automatically redirected to our slash login page. And this is the login page, where on the right we could create a new account, or on the left we could login if we already have an account. Let's say we don't have an account yet. I'm going to create an account, so I'll put in my name as Andrew Burgess, put in my email address, let's take the username Andrew. And I'll type in my password, and let's go ahead and sign up. And so, now, notice that we are sent back to the home page here. And this is actually great, because if we are already logged in, and we go to localhost port 3,000, if I refresh the page notice we're not redirected to the login page. Instead, we're just sent directly to our application's home page. We have a couple of links over here on the left side. And we have a box where we can say something on the right side here, and a button to actually create our Chirp. So if I go ahead and make a Chirp, so I might say, hello world and then I'll press Chirp. You can see that our Chirp appears in our list down here. Now, before this, there was nothing in the list, because of course, we hadn't made any Chirps, and there was no one we were following. But you can right now, we've just made our first Chirp. And this is a nice little box here, we have an avatar of the user, we're actually going to use Gravitar to get the avatars based on users email address, and you can see we have their full name here. We have their username, and we also have the length of time ago that this tweet was made. Now, we can find some other users to follow if we click on the users link over here on the left-hand side. And you can see we have a list of all the different users that are currently in this system. And you can see that we can view John Doe's profile there. And if I go back to the users list I can go ahead and choose to follow him. And let's also choose to follow Jane Smith. And as you can see these Follow buttons are now Unfollow buttons, and this makes it really easy to toggle following and unfollowing someone. And so, if we follow a few extra people, and then I go back to the timeline, you can see that now we have a list of a few more Chirps here. And we can see that John Doe has made a few Chirps and Jane Smith has made one. Also, from anywhere we can see a user's avatar, we can actually click on that avatar and we can go directly to their profile page. So you can see this is our own profile page, and here, instead of a Follow button, we just have the text, this is you. So then, you can see I could go ahead and logout, and immediately we're taken back to this page, where I can go ahead and login. And this takes us back to the homepage. So there we go. This is a basic look at the Chirper application, which we're going to create in this course. When you're ready to get started, let's setup our application in the next video.