1 00:00:00,890 --> 00:00:04,770 In the last section we did a walkthrough of all the different technologies that were going to be using 2 00:00:04,770 --> 00:00:06,410 inside this application. 3 00:00:06,420 --> 00:00:09,400 Now just one last section of some administrative stuff. 4 00:00:09,420 --> 00:00:10,650 I know this stuff is boring. 5 00:00:10,650 --> 00:00:15,060 I know you want to write some code but believe me doing this preparation ahead of time is really going 6 00:00:15,060 --> 00:00:16,190 to pay off. 7 00:00:16,200 --> 00:00:21,990 So the last little bit of proper overview on the app is going to be looking at a couple of mockups of 8 00:00:21,990 --> 00:00:25,800 the application we're going to try to build on the front end of our app. 9 00:00:26,100 --> 00:00:30,330 So we're going to we've got a couple of mock ups and then we'll get started on our application. 10 00:00:30,750 --> 00:00:31,240 OK. 11 00:00:31,590 --> 00:00:36,780 So we're going to go through this page by page essentially more or less following how a user might make 12 00:00:36,780 --> 00:00:40,860 use of our application when our user first comes the application. 13 00:00:40,860 --> 00:00:43,080 And we're going to be using the name e-mail. 14 00:00:43,170 --> 00:00:46,740 I don't know I just I made up I don't have a good name for the app we're going to call it email because 15 00:00:46,740 --> 00:00:50,710 it kind of collects user feedback via e-mail whatever. 16 00:00:50,930 --> 00:00:55,980 Anyways once they come to our application we're going to show them a landing page of sorts where we 17 00:00:55,980 --> 00:00:57,070 show a header. 18 00:00:57,090 --> 00:01:03,480 It says Our logo at the top left a button to log in with Google off at the top right and then some text 19 00:01:03,480 --> 00:01:09,570 that just says hey get feedback from your users faster or something just to make it clear what our application 20 00:01:09,570 --> 00:01:10,710 does. 21 00:01:10,710 --> 00:01:15,780 Now throughout this course we're not going to be really concerned with the styling aspects of our application. 22 00:01:15,780 --> 00:01:20,850 Trust me the functionality of what we're trying to build here is complex enough that trying to add on 23 00:01:20,910 --> 00:01:25,740 a lot of styling and marking stuff here would be its own separate course. 24 00:01:25,740 --> 00:01:30,360 So this landing page that we're going to have it is going to be pretty straightforward pretty simple 25 00:01:30,660 --> 00:01:36,270 and it's really going to be a lot more about making sure that we're kind of conveying just very basic 26 00:01:36,270 --> 00:01:37,950 information to the user. 27 00:01:38,480 --> 00:01:38,830 OK. 28 00:01:38,850 --> 00:01:43,550 So you can kind of imagine the user comes here and maybe they decide hey they want to try our application. 29 00:01:43,590 --> 00:01:46,270 So they click on the log in button right here. 30 00:01:46,410 --> 00:01:51,390 Now when they click on the logon button they'll be kicked into our flow through Google. 31 00:01:51,690 --> 00:01:54,840 Now if you're not familiar with auth that is totally fine. 32 00:01:54,840 --> 00:01:59,000 We're going to be going through it in just incredible incredible detail. 33 00:01:59,130 --> 00:02:00,050 That's why you're here right. 34 00:02:00,060 --> 00:02:01,410 That's why you're taking the course. 35 00:02:01,560 --> 00:02:03,120 So just take my word for it. 36 00:02:03,180 --> 00:02:08,900 When a user clicks on this button up here that will then log them into our application. 37 00:02:08,950 --> 00:02:14,170 Now once a user logs into our application we will then present them with a screen that shows them the 38 00:02:14,170 --> 00:02:19,060 results of all the different campaigns or surveys that they've sent out over time. 39 00:02:19,450 --> 00:02:23,860 So the user will be prompted with a list of some of the different campaigns they've sent out. 40 00:02:24,160 --> 00:02:26,790 We'll show the name of each campaign. 41 00:02:26,950 --> 00:02:29,560 We'll show them some of the feedback that they got from users. 42 00:02:29,560 --> 00:02:34,330 So in this case we're dealing with like say yes or no questions right here and we're showing the number 43 00:02:34,390 --> 00:02:37,710 of yes responses from their users and no responses. 44 00:02:37,900 --> 00:02:42,250 And then the total number of surveys sent and so we'll have one of these separate little hard looking 45 00:02:42,250 --> 00:02:47,780 things for every different campaign or survey that has been sent out. 46 00:02:47,860 --> 00:02:50,630 Now a couple other elements on this page that are really important. 47 00:02:50,800 --> 00:02:56,080 Remember we are accepting real money and real credit cards for the South location. 48 00:02:56,080 --> 00:03:00,970 So we're going to show some buttoned up inside the letter that says add some money or pay some money 49 00:03:00,970 --> 00:03:03,710 so that you can send out these survey e-mails. 50 00:03:03,820 --> 00:03:07,880 Remember that we're not really doing a subscription based type interface or type billing here. 51 00:03:07,900 --> 00:03:10,930 We're really doing just credit based on other words. 52 00:03:10,960 --> 00:03:15,880 You give us like say $10 and that allows you to send out 10 emails. 53 00:03:16,180 --> 00:03:20,950 So at any given time we want to make sure the user is aware of how many credits they have left in their 54 00:03:20,950 --> 00:03:24,630 account or how many emails they can still send out. 55 00:03:25,000 --> 00:03:29,710 And then at the bottom right hand will have a nice big button that a user can click on to create and 56 00:03:29,710 --> 00:03:31,630 send out a brand new survey. 57 00:03:32,140 --> 00:03:33,990 OK just two other screens. 58 00:03:34,060 --> 00:03:39,970 First off the add credits button when a user clicks on this thing right here I want to present the user 59 00:03:39,970 --> 00:03:46,950 with some type of form that allows them to enter in their credit card information and pays us money. 60 00:03:47,110 --> 00:03:47,700 Right. 61 00:03:48,010 --> 00:03:53,080 So when a user gives us their credit card we will then Bill their credit card and give them some number 62 00:03:53,080 --> 00:03:54,410 of additional credits. 63 00:03:56,540 --> 00:04:00,320 When the user clicks on the new button right here remember that's going to allow them to create a new 64 00:04:00,320 --> 00:04:01,120 survey. 65 00:04:01,130 --> 00:04:07,670 So let's imagine they click on that and they're going to go into the flow to create and send out a brand 66 00:04:07,670 --> 00:04:10,200 new campaign or a new survey. 67 00:04:10,940 --> 00:04:13,040 Now this flow is going to have two separate screens to it. 68 00:04:13,040 --> 00:04:15,500 So let's look at each individual one. 69 00:04:15,650 --> 00:04:19,100 We're going to spend a little bit of time talking about this particular floor right here because this 70 00:04:19,100 --> 00:04:24,340 is going to be one of the most complicated aspects of the front and side of our application. 71 00:04:24,860 --> 00:04:30,350 So when the user goes to create a new survey or new campaign we're going to ask them to give us some 72 00:04:30,350 --> 00:04:37,310 title for the survey some subject line to put inside the email that gets sent out to all their users. 73 00:04:37,310 --> 00:04:41,000 Some text to put inside the body of the email they're going to send out. 74 00:04:41,150 --> 00:04:46,040 And then a list of all the different emails that they want to send this survey to. 75 00:04:46,040 --> 00:04:52,430 So in theory recipient list right here the list of e-mails would be just a real long copy pasted in 76 00:04:52,670 --> 00:04:54,490 collection of e-mails. 77 00:04:54,620 --> 00:04:59,450 Maybe it's five emails maybe it's a thousand whatever it is we want to make sure that we collect it 78 00:04:59,450 --> 00:05:04,900 all and send one e-mail to each and every one of those users. 79 00:05:04,910 --> 00:05:09,890 Now the reason this component is going to be a little bit more complicated is that we're going to make 80 00:05:09,890 --> 00:05:15,710 sure that a user has the ability to review their inputs after they've entered them into his form. 81 00:05:15,710 --> 00:05:17,890 So remember we're talking about money here. 82 00:05:17,910 --> 00:05:20,490 Right we're talking about money and we're talking about e-mails. 83 00:05:20,780 --> 00:05:27,620 We want to be really sure that the user who is creating this new survey right here really really really 84 00:05:27,680 --> 00:05:32,720 wants to send out the survey really wants to send it out because as soon as they submit it we're going 85 00:05:32,720 --> 00:05:37,010 to send out five or ten or a thousand e-mails. 86 00:05:37,040 --> 00:05:42,530 So rather than having the user just click on like submit right here when the user clicks on this button 87 00:05:42,860 --> 00:05:48,500 is going to say next we're going to give them the opportunity to review all the different inputs they 88 00:05:48,500 --> 00:05:50,770 had entered in on the last screen. 89 00:05:51,080 --> 00:05:56,170 So we're going to give them the ability to review this stuff and then say OK I triple checked it. 90 00:05:56,180 --> 00:05:57,590 This all looks good. 91 00:05:57,590 --> 00:06:04,040 I want to really definitely 100 percent send out this survey because after they click this Submit button 92 00:06:04,310 --> 00:06:05,540 that's the point of no return. 93 00:06:05,540 --> 00:06:10,700 That's the point at which we are going to deduct money from their account and send out this big ole 94 00:06:10,730 --> 00:06:12,200 hunk of e-mails. 95 00:06:13,560 --> 00:06:13,900 OK. 96 00:06:13,930 --> 00:06:17,520 So that's pretty much it from the front end aspect of this application. 97 00:06:17,540 --> 00:06:22,270 Now this might seem like really straight forward because hey we only looked at what like four or five 98 00:06:22,270 --> 00:06:27,820 different screens so it might look really straightforward but I would say that probably the back end 99 00:06:27,820 --> 00:06:32,380 component of this application is going to be way more significant than the front end. 100 00:06:32,440 --> 00:06:37,990 And so remember this is a full stat course and I want to teach you the entire stack and equal parts. 101 00:06:37,990 --> 00:06:41,760 So we're not going to be just sitting and writing re-act components all day. 102 00:06:41,800 --> 00:06:47,530 We're going to be doing a little bit of react and some Mongo DVH stuff and some Noad stuff just all 103 00:06:47,530 --> 00:06:52,870 over the place really learning the entire full stack as opposed to just doing a lot of fancy looking 104 00:06:52,870 --> 00:06:57,580 re-act components which is something that you know you probably already know or something you can kind 105 00:06:57,580 --> 00:06:58,950 of figure out on your own. 106 00:06:59,390 --> 00:06:59,760 OK. 107 00:06:59,800 --> 00:07:01,960 So that's pretty much it for mockups. 108 00:07:02,050 --> 00:07:03,440 That's what we're going to build. 109 00:07:03,640 --> 00:07:08,030 So I think that's enough on all the prep stuff you know all the kind of forward information. 110 00:07:08,170 --> 00:07:09,460 So let's take a quick break. 111 00:07:09,460 --> 00:07:13,750 We're going to come back in the next section and start tackling this project head on. 112 00:07:13,750 --> 00:07:15,620 So I'll see you in the next section.