All right.
It's time for the final project of the module, and we are going to be building a secrets project, which
is going to be a client-side website that uses the Secrets API in order to reveal the deepest, darkest
secrets of people anonymously.
This is inspired by a real app called, Whisper that was pretty famous a few years back, and essentially
it's people across the Internet sharing their secrets anonymously, and it's weirdly fascinating to
read through people's secrets and what they reveal to us when they don't need to be identified.
And in order to do this, we're going to be using the Secrets API and getting hold of random secrets
using Axios, so that we can put some of the different pieces of information that we've learned over the
different modules together to create a real product.
Go ahead and download the Secrets Project zip file, extract it, and open it inside VS Code.
As always, the first thing to do is to cd over to this location in the terminal, run the "npm i" command in
order to install all the node modules and then we can preview what this website looks like by using
nodemon to run the solution.js
.
Once you load up this website, it's not called whisper, it's called Lisper,
you will see that we've got some fancy styling done in CSS.
We've got the username of the person who submitted this secret, and when we hover over the card, we
see their secrets revealed.
I'm keeping this project relatively simple because we've had a long module, and I just want you to
be able to practice some of the previous things we learned using EJS and also using Express.
We're just going to hit up the random endpoint for the Secrets API.
And if you wanted to, you could refresh the website and it would load up a different random secret.
So the first thing I want you to do is to take a look at the index.ejs and see the structure of the different
variables that are being injected in here.
So the user corresponds to this part, and the secret corresponds to the part that shows up.
Don't worry about the styling.
It's already created for you in the main.css.
Of course,
as always, if you wish, you can remove all the styling in here and create it yourself from scratch
as well.
You don't have to use anything that's provided, although I recommend it because we're focusing on skills
that we want to practice, and there's always capstone projects for you to fully customize and create
your own projects from scratch.
In the index.js, I've got a number of hints for you and again, you could delete all of this and just
go off the functionality that you see when you run solution.js.
But these hints show you all the steps you need to go through in order to make this work.
Now we're not doing anything too fancy in here,
we're not doing Authentication, we're not using Bearer tokens, we're not doing registration,
I just wanted to keep this simple so that we focus on the things that we really care about, which is
how do you work with an external API?
How do you use the documentation of the API and how do you use Axios and Express to hit up that API
and grab the necessary pieces of data to populate a client-side website and consume data from that API?
This is a really common skill and just wanted to give that one last bit of practice and create a project
that's pretty cool that you can share with your friends and family.
Once you're ready, go ahead, pause the video and give this project a go.
All right, let's run through the solution together.
First things first,
let's go ahead and import express from the Express module that we have already installed.
And you can check that by going to package.json, looking at the dependencies.
And then the next thing is we're going to also import the Axios module.
And then we can move on to Step 2.
We're going to create a new app from the express() module like this, and we can set our port to our normal
port, which is 3000.
In this step, we're saying use the public folder for static files.
And if you don't remember why we're doing this, it's because we have images that are being used in
the front-end of the website,
but more importantly, we've also got our stylesheets that live in a folder that we can keep static.
And if you don't remember this, we did this when we first learned about using Express to create servers
and this is an important middleware.
So we do app.use(),
and then in the Express package there is something called static, which is a built-in middleware function
and allows us to serve static files and allows us to specify which folder contains the static files,
which in our case, as you can see, is called public.
Now, what this means is that any static files that are being used will be able to refer to public and
then can add the relative path after that location.
So it's public styles/main.css.
Now, Step 4 is when the user goes to the home page, it should render the index.ejs file.
So this is our app.get() so when the user goes to the home page.
So the forward slash, we're going to have our req and res, our anonymous function here.
And inside this function, we are going to return something by using res.render.
And what we want to render is index.ejs.
And the next step is we should be able to use Axios inside this GET route to get a random secret and
pass it to EJS to display the secret.
Here we're going to create our const called result and it is going to be as a result of calling
axios.get().
Now, we're going to provide the URL of the route that we want to hit up, which is the random route,
and you can split this up to baseURL, you can add it as a config, but in my case, I'm just going
to add it in here straight up as it is.
Remember, this method is asynchronous and you can see that when you hover over the .get() you can
see that it returns a Promise.
That means in order to get hold of the result, we either have to get hold of it by chaining
.then() at the end of this method call or we change this to an asynchronous function and use await before
we call this method.
So that means we're waiting for this to give us the results, to be able to put it into this const
before we continue to the next line.
What's going to happen in the next line is we're going to pass over some data to our index.ejs and that
data is going to come from the result.
And we can take a look at what kind of result we get.
So this is the response that we would get through result.data and we can get hold of the id, the
secret, the emScore, the username.
So in our case, we only want the username and the secret.
So let's remember what the keys for those pieces of data are.
And then we're going to take a look inside index.ejs, see which variables we need to hit up.
So there's one called secret and one called user.
So let's set that up.
{secret: ...
This is the first piece, and then the other one is called user.
But if we look at the keys that we get back from the API, the first one is indeed called secret, so
it will be stored under result.data.
And then here is where we add that key.secret and user will be result.data.username.
So that matches with what we get back here.
Now you can of course simply just log result.data in order to see what you get back and to be able
to format this.
And you can also through trial and error, hopefully see whether if these pieces of data are being passed
to the correct parts of your HTML.
But hopefully, this will work,
and if not, we will add a try-and-catch block in order to make sure that we catch any errors. We put
the part we want to try, inside the try block, and inside the catch block,
we're going to send the status of 500 because something went wrong in our server and we are going to
console log any errors by writing console.log() and we can grab hold of the error here.
And it is error.response.data that
contains any messages from the API so that we as the developers can look into this and try to solve
any problems.
Now, for the user who's looking at our website, they won't know what to do with that,
so we're just going to show an error code that says, "Something's wrong with the server, don't worry about
it," and we can debug this from our developer side.
Finally, all we need to do is to run app.listen() in order to listen on the port that we've specified.
And as usual, we're going to add an anonymous function that console logs to the terminal that says,
`server started on port ${port}` and then the port is the port number that we put up here.
That's all we needed to do.
And now if we go ahead and run this, so stop anything else that's running, use nodemon to run the
index.js that you just created.
Go over to localhost 3000 and hopefully you will see the username load up here.
You will be able to see their secret when you hover over the card.
Did you manage to get this to work?
Did you manage to use what you've learned so far in the module?
Feel free to modify this project as you wish, or change it up,
do anything you like to extend its functionality, but just be aware that because it's resting on the
Secrets API, which as we mentioned, is an API for students to learn and not something for a production
app, that all user-submitted data including their registrations or their username, their password,
any tokens, any bearer tokens, any usernames, any secrets are erased pretty much on a regular basis,
like every 24 hours or 48 hours.
So it's not going to be a real API that you can rely on to create a real product.
But, in the next module where we have a capstone project coming up, I'm going to show you lots of real
world APIs that you can use to create your own project that are more robust and are suited for real
world projects that you can build and add to your portfolio or even create a startup or a product for
yourself.
This could be the beginning of something wonderful.
I hope you enjoyed this module with me and I'll see you in the next one.