In the last section we did a walkthrough of all the different technologies that were going to be using
inside this application.
Now just one last section of some administrative stuff.
I know this stuff is boring.
I know you want to write some code but believe me doing this preparation ahead of time is really going
to pay off.
So the last little bit of proper overview on the app is going to be looking at a couple of mockups of
the application we're going to try to build on the front end of our app.
So we're going to we've got a couple of mock ups and then we'll get started on our application.
OK.
So we're going to go through this page by page essentially more or less following how a user might make
use of our application when our user first comes the application.
And we're going to be using the name e-mail.
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
it kind of collects user feedback via e-mail whatever.
Anyways once they come to our application we're going to show them a landing page of sorts where we
show a header.
It says Our logo at the top left a button to log in with Google off at the top right and then some text
that just says hey get feedback from your users faster or something just to make it clear what our application
does.
Now throughout this course we're not going to be really concerned with the styling aspects of our application.
Trust me the functionality of what we're trying to build here is complex enough that trying to add on
a lot of styling and marking stuff here would be its own separate course.
So this landing page that we're going to have it is going to be pretty straightforward pretty simple
and it's really going to be a lot more about making sure that we're kind of conveying just very basic
information to the user.
OK.
So you can kind of imagine the user comes here and maybe they decide hey they want to try our application.
So they click on the log in button right here.
Now when they click on the logon button they'll be kicked into our flow through Google.
Now if you're not familiar with auth that is totally fine.
We're going to be going through it in just incredible incredible detail.
That's why you're here right.
That's why you're taking the course.
So just take my word for it.
When a user clicks on this button up here that will then log them into our application.
Now once a user logs into our application we will then present them with a screen that shows them the
results of all the different campaigns or surveys that they've sent out over time.
So the user will be prompted with a list of some of the different campaigns they've sent out.
We'll show the name of each campaign.
We'll show them some of the feedback that they got from users.
So in this case we're dealing with like say yes or no questions right here and we're showing the number
of yes responses from their users and no responses.
And then the total number of surveys sent and so we'll have one of these separate little hard looking
things for every different campaign or survey that has been sent out.
Now a couple other elements on this page that are really important.
Remember we are accepting real money and real credit cards for the South location.
So we're going to show some buttoned up inside the letter that says add some money or pay some money
so that you can send out these survey e-mails.
Remember that we're not really doing a subscription based type interface or type billing here.
We're really doing just credit based on other words.
You give us like say $10 and that allows you to send out 10 emails.
So at any given time we want to make sure the user is aware of how many credits they have left in their
account or how many emails they can still send out.
And then at the bottom right hand will have a nice big button that a user can click on to create and
send out a brand new survey.
OK just two other screens.
First off the add credits button when a user clicks on this thing right here I want to present the user
with some type of form that allows them to enter in their credit card information and pays us money.
Right.
So when a user gives us their credit card we will then Bill their credit card and give them some number
of additional credits.
When the user clicks on the new button right here remember that's going to allow them to create a new
survey.
So let's imagine they click on that and they're going to go into the flow to create and send out a brand
new campaign or a new survey.
Now this flow is going to have two separate screens to it.
So let's look at each individual one.
We're going to spend a little bit of time talking about this particular floor right here because this
is going to be one of the most complicated aspects of the front and side of our application.
So when the user goes to create a new survey or new campaign we're going to ask them to give us some
title for the survey some subject line to put inside the email that gets sent out to all their users.
Some text to put inside the body of the email they're going to send out.
And then a list of all the different emails that they want to send this survey to.
So in theory recipient list right here the list of e-mails would be just a real long copy pasted in
collection of e-mails.
Maybe it's five emails maybe it's a thousand whatever it is we want to make sure that we collect it
all and send one e-mail to each and every one of those users.
Now the reason this component is going to be a little bit more complicated is that we're going to make
sure that a user has the ability to review their inputs after they've entered them into his form.
So remember we're talking about money here.
Right we're talking about money and we're talking about e-mails.
We want to be really sure that the user who is creating this new survey right here really really really
wants to send out the survey really wants to send it out because as soon as they submit it we're going
to send out five or ten or a thousand e-mails.
So rather than having the user just click on like submit right here when the user clicks on this button
is going to say next we're going to give them the opportunity to review all the different inputs they
had entered in on the last screen.
So we're going to give them the ability to review this stuff and then say OK I triple checked it.
This all looks good.
I want to really definitely 100 percent send out this survey because after they click this Submit button
that's the point of no return.
That's the point at which we are going to deduct money from their account and send out this big ole
hunk of e-mails.
OK.
So that's pretty much it from the front end aspect of this application.
Now this might seem like really straight forward because hey we only looked at what like four or five
different screens so it might look really straightforward but I would say that probably the back end
component of this application is going to be way more significant than the front end.
And so remember this is a full stat course and I want to teach you the entire stack and equal parts.
So we're not going to be just sitting and writing re-act components all day.
We're going to be doing a little bit of react and some Mongo DVH stuff and some Noad stuff just all
over the place really learning the entire full stack as opposed to just doing a lot of fancy looking
re-act components which is something that you know you probably already know or something you can kind
of figure out on your own.
OK.
So that's pretty much it for mockups.
That's what we're going to build.
So I think that's enough on all the prep stuff you know all the kind of forward information.
So let's take a quick break.
We're going to come back in the next section and start tackling this project head on.
So I'll see you in the next section.