7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

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.

Back to the top