Frontend Website - Layout & Styling
Frontend REST API & MongoDB Database
Frontend Website - Display Real Data
Deploy The Frontend Website & REST API
Search Engine Indexing
Configure Google Analytics
Admin Website - Layout & Styling
Admin REST API
Deploy The Admin Website & REST API
Getting Started / Plan & Design The Application

Plan & Design The Application

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.

Components Of The Application

Broadly speaking, your application will consist of four major components and/or features:

  1. A frontend website where visitors will view your blog posts and other content. This will include a REST API that will fulfill requests for getting blog post data from a database.
  2. An admin control panel website where you can create/edit blog posts, upload/edit/delete hosted images, update your website's sitemap.xml file, and more. This will include a REST API for fulfilling requests made from the admin website application.
  3. Hosting your own images to be used throughout the application.
  4. A MongoDB database that stores the data for your blog posts and the username/password credentials for authenticating the admin user.

Let's go through each of those components one-by-one and list out what we'll need to build for each one.

Frontend

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.

Frontend Website

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:

  • Homepage
    • Includes an introduction with your name and a short description that describes your career interests, a list of the five newest blog posts you've published, and another list of the projects you've built or are currently working on.
    • You can check out the demo for this page here.
  • List All Blog Posts
    • Will serve as the page where your website visitors can see a full list of all the blog posts you've published. Will reside at a URL of "/blog".
    • You can check out the demo for this page here.
  • List All Blog Posts By Tag
    • Will be for visitors to view a list of blog posts with a certain tag (i.e. javascript, nodejs, html, etc.) and will reside at a URL of "/blog/tags/[tag]".
    • You can check out an example for this page here.
  • Blog Post
    • Will display the content for each of your blog posts and will be accessed at a URL of "/blog/your-blog-post-title".
    • The PrismJS NPM package will assist with the syntax highlighting of your code snippets.
    • You can view a demo example of this page here.
  • Contact
    • Will display the information about how people can get in touch with you, which could include your email, Twitter handle, GitHub profile page, and any other additional links you want to add. It will be accessed at a URL of "/contact".
    • You can view a demo example of this page here.
  • About
    • Will include a description of yourself, a list of your projects, and a list that describes your current coding setup. It will be accessed at a URL of "/about".
    • You can view a demo example of this page here.
  • 400 & 500 Error
    • The Next.js framework has built-in ways for handling 404, 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.

Frontend REST API

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.

The REST API will be built using Node.js and the Express.js framework. Express has a robust set of features that will help us build the REST API both quickly and effectively.

Here is a list of the features and types of data we want our REST API to facilitate:

  • Get all of the published blog posts ordered by publish date.
  • Get all of the published blog posts that have a specific tag (i.e. javascript, css, html).
  • Get the five newest blog posts that have been published (displayed on the homepage).
  • Get one blog post based on the URL title value.
  • Host images at a "/assets/filename.png" URL endpoint from an /assets directory in your /coding-blog parent 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.

Hosting Images

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 Database

For the database, we're going to use the Atlas service to create a MongoDB database in the cloud.

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.

Admin

Similar to the frontend, the admin will consist of both a website and a REST API application. The website will also be built using Next.js and the REST API with Node.js and Express.js.

It will facilitate the following functionalities for your coding blog:

  • Blog Posts
    • Create a new blog post.
    • Edit a blog post's data (title, content, thumbnail image, etc).
    • Delete a blog post.
  • Images
    • Upload a new image (to the /assets directory on the server).
    • Edit an image's filename.
    • Delete an image.
  • Sitemap
    • Update the contents of your website's sitemap.xml file.
    • Restart the PM2 process on your server to make the sitemap.xml file changes live.
    • Ping search engines to alert them about the changes made to the sitemap.xml file.

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).

Deploying The Application

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:

  1. Secure your DigitalOcean server through a basic firewall and only allow access to the server via encrypted SSH keys.
  2. A custom domain name (i.e. example.com) for both your frontend and admin applications.
  3. SSL/HTTPS certificates for your applications so everything is accessed via https://.
  4. Use the Nginx web-server software to host your applications, which is super-fast and used by some of the highest-traffic websites out there.
  5. Use an NPM package called PM2 to keep your application alive and running forever.

Through that process, you'll learn how to deploy a production-ready application.

How This Course Will Be Structured

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:

  1. Build the layout and styling for the frontend website.
    • Everything up until the request to the frontend REST API needs to be made will be built in this section.
    • Page layout with a header and footer, React.js code and CSS styling for each page, SEO metadata, and favicon logo images.
  2. Create the frontend REST API application and update the frontend website to display the data retrieved from the REST API.
    • All the code needed to facilitate blog post data requests from the frontend will be built.
    • MongoDB database will be created and configured using Atlas.
    • Add functionality for hosting images from the /assets directory.
    • Update the frontend website to pull in real blog post data using the newly created REST API.
  3. Deploy the frontend website and REST API to the DigitalOcean server.
    • Create and configure a new server using DigitalOcean, configure your custom domain name, use Nginx as a web server, configure HTTPS/SSL encryption, and run the applications using the PM2 process manager.
  4. Get the frontend website indexed on search engines (Google, Bing, DuckDuckGo, etc.).
    • Register your website on the Google Search Console and Bing Webmaster Dashboard.
    • Create a sitemap.xml file for your website.
  5. Configure Google Analytics for your frontend website.
    • Obtain a Google Analytics tracking ID and configure tracking on your frontend website.
  6. Build the layout and styling for the admin website.
    • Everything up until the request to the admin REST API needs to be made will be built in this section.
    • Page layout with header and sidebar menu and React.js code with CSS styling for each page.
  7. Create the admin REST API and add the features to the admin website.
    • Create a new admin user in the database used for authentication. 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.
    • All the code needed to facilitate the interaction with blog posts, images, and sitemap data.
  8. Deploy the admin website and REST API to the DigitalOcean server.
    • Configure your domain name, use Nginx as a web server, configure HTTPS/SSL encryption, and run the applications using the PM2 process manager. The same DigitalOcean server created in the previous section will be used.

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!

⚠️ In preview mode some course materials are hidden. For full access 👉
Frontend Website - Layout & Styling
Frontend REST API & MongoDB Database
Frontend Website - Display Real Data
Deploy The Frontend Website & REST API
Search Engine Indexing
Configure Google Analytics
Admin Website - Layout & Styling
Admin REST API
Deploy The Admin Website & REST API