Before we jump into the weeds and start coding, let's make sure we have a big picture of what we want to build and the different components that will be needed.
In this section, we'll go over each portion of the application and discuss what needs to be built.
Broadly speaking, your application will consist of four major components and/or features:
sitemap.xmlfile, and more. This will include a REST API for fulfilling requests made from the admin website application.
Let's go through each of those components one-by-one and list out what we'll need to build for each one.
The frontend will consist of both a website and REST API application. These will be two separate applications that work alongside each other.
Let's go over each one.
The website will be what your visitors interact with directly to view your blog posts and consume any other information or content you publish.
Below is a full list of the pages the website will have and their purpose:
html, etc.) and will reside at a URL of
500, and other errors that may occur on your website. We'll create a custom layout and styling for that page.
You'll also write responsive CSS code for each of those pages, which means the website's appearance will be optimized for devices of all screen widths.
Furthermore, we'll add favicon icons to your website (logo found in the tab bar of your browser) and SEO metadata like title tags and meta descriptions. Also related to SEO, we'll create a
sitemap.xml file that will give search engines a blueprint for what pages they need to crawl on your website.
The website will be built using the Next.js framework, which is a widely used framework for building production-ready React.js applications. It offers server-side rendering, automatic code-splitting, static exporting options, and easy production builds.
You can learn more about the framework at their official website: nextjs.org.
Alongside the website, we'll also need to build a REST API application that takes requests from the website, retrieves the necessary data from the database, and sends it back to the frontend to be displayed to the website visitor.
Here is a list of the features and types of data we want our REST API to facilitate:
"/assets/filename.png"URL endpoint from an
/assetsdirectory in your
/coding-blogparent project folder.
In essence, the REST API will be a Node.js application that sits and listens for requests to get certain types of data. When it gets a request from a frontend, for let's say a blog post, it will interact directly with the MongoDB database and send the blog post data back to the frontend website to be displayed for the visitor.
There are several benefits to keeping the website and REST API separate and structuring the application in this way.
You'll decouple your web URLs from your API URLs so they can each change independently, more easily separate logic between the website and REST API, and it'll make scaling much easier in the future. And if you decide to add more features to your website in the future, it will be much easier to add things without conflicting with what you've already built.
In this course, we'll also go over how to host your own images for the website.
This will consist of an
/assets directory on the server we deploy your application to that stores your images or other files in it. Then, we'll configure your frontend REST API application to serve images out of that directory.
For example, let's say you have a file named
filename.png stored in your
/assets directory. We'll configure the REST API application to serve that image at a URL of
"/assets/filename.png", which you'll be able to put on your frontend website to be displayed.
In the later stages of this course when we build the admin application, we'll create ways to upload, edit, and delete these images.
MongoDB is a document-based and non-SQL database that is great for building modern applications. And Atlas will allow us to quickly get a database running in the cloud, will handle all the security and headache-inducing aspects of managing a database, and has a generous free-tier for you to use as well.
It will be used to store both blog post data and user data used for authenticating requests made by the admin application.
The frontend REST API will pull data from the database and display it for your visitors. The admin application will both read and update the data inside the database.
It will facilitate the following functionalities for your coding blog:
/assetsdirectory on the server).
sitemap.xmlfile changes live.
You can view a demo of the admin website here.
Also, we'll add some authentication security measures to the admin website. The entire website will be password protected by creating a login page where you can gain access through using email and password credentials. And each functionality in the list above will require authentication before any changes to the database can occur.
This will ensure that you're the only one who can make changes to your database.
There will also be a page in the admin website where you can update your admin user's password (demo).
In this course, we'll also walk through how to deploy your application to production.
For serving your applications, we'll use DigitalOcean. The frontend, directory of images, and admin application components will be hosted on the same server.
When we deploy each application, we'll also configure these features:
example.com) for both your frontend and admin applications.
Through that process, you'll learn how to deploy a production-ready application.
Each section of this course will represent each step in building the application from the ground up.
In a broad sense, these are the steps we'll take to build the application:
sitemap.xmlfile for your website.
You should now have a good feel for the big picture of what we're going to build and the individual components that will be needed.
If you want all the source code for this course upfront, you can download it from this link:
In the next section of this course, we'll jump into building the project!