Bootstrap The Website Application
Bootstrap The REST API Application
User Functionality
Item Functionality
Comment Functionality
Search Functionality
Moderator Functionality
Informational Pages
Deploy The Application
Post Deployment Tasks
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.

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, the Hacker News clone application will consist of four major parts:

  • A website where users will create, view, and interact with items, comments, and user data.
  • A REST API that will fulfill requests from the website for creating, updating, and viewing data from the database.
  • A MongoDB database that stores the data for the application.
  • An Algolia search index that will be used for the search functionality.

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

Website

The website will be what your visitors interact with directly to create, update, and view data stored in the database.

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.

Below is a full list of the pages the website will have and their purpose.

Each page will have responsive CSS code provided for them as well.

User Related Pages

The first set of pages we'll talk about are the ones related to users.

These include any pages that facilitate the following user functionalities:

  • Create new users in the database.
  • Login users.
  • Authenticate users so they can stay signed in as they navigate throughout the website and take actions that modify data in the database.
  • Logout users.
  • Reset a user's password in the scenario it has been forgotten.
  • Display and update user information on the website (email address, biography, settings, etc.).
  • Allow users to change their password.

Here's the full list of pages:

  • Login & Create a New Account ("/login")
    • To be used by a user to create a new account and/or login to an account that already exists.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/login.
  • Forgot Password ("/forgot")
    • Where a user will enter their username and request an email that contains a reset password link.
    • This is used in the scenario that a user forgets their password.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/forgot.
  • Reset Password ("/reset")
    • A page where a user can set a new password for their account.
    • The link for this page will be sent to the user's email after they fill out the form on the "/forgot" page. It is the last step in the user setting a new password after they forgot it.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/reset.
  • Change Password ("/changepw")
  • Single User Account Information ("/user")
    • A page for viewing or modifying a user's account information.
    • The page will contain a public and private version. The public version will display the user's public account information that anyone can view. And the private version can be used by users to modify their account information.
    • You can check out the demo for the two versions of this page with these links:
  • Items Submitted By Users ("/submitted")
  • User Upvoted Items & Comments ("/upvoted")
  • User Hidden Items ("/hidden")
    • list of items that have been hidden by a given user. This means the user has indicated that they don't want to see the items on list pages.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/hidden.
  • User Favorite Items & Comments ("/favorites")
  • Comments By User ("/threads")

Item Related Pages

Next, we'll cover all the pages necessary to facilitate the following item related features:

  • Create a new item.
  • Display a single item.
  • Edit an item.
  • Delete an item.
  • Upvote an item.
  • Un-vote an item (remove an upvote).
  • Add an item to a user's favorites.
  • Remove an item from a user's favorites.
  • Add an item to a user's hidden item list (won't be visible on item list pages).
  • Remove an item from a user's hidden item list.
  • Create each item list page.
  • Create an algorithm for ranking items on certain item list pages.

Here's the full list of pages:

  • Submit a New Item ("/submit")
    • The page used to submit a new item to the website.
    • Will contain a form with the title, URL, and text input fields.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/submit.
  • Individual Item ("/item")
    • Used to display the data for a single item based on its id value stored in the database.
    • Will consist of the following features:
      • Display the details for a specific item (title, points, domain, etc.).
      • Allow a user to upvote, favorite, and/or hide the item.
      • Allow a user to comment on the item.
      • Display the comment section, which consists of the comments that have been placed on the item.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/item?id=S5BNJFjz5WvO.
  • Front Page of Ranked Items ("/")
    • Used to show the highest-ranked items submitted from the past three days.
    • Will serve as the homepage of the website.
    • You can check out the demo for this page here: https://codernews.crfdemo.com.
  • Ranked News Items ("/news")
    • Will be very similar to the homepage ("/") in that it will show the highest-ranked items that have been submitted in the past three days. But, it will handle additional pages of results.
    • You can check out the demo for this page here: https://codernews.crfdemo.com?page=2.
  • Newest Items ("/newest")
  • Past Items ("/past")
    • Used to view the most upvoted items that were submitted on a given day.
    • The URL for the page will contain a day value in its query data that is used to pull item data from the database.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/past.
  • Ask Items ("/ask")
    • Used to display the highest-ranked "ask" category items from within the past three days.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/ask.
  • Show Items ("/show")
    • Used to display the highest-ranked "show" category items from within the past three days.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/show.
  • Newest Show Items ("/shownew")
  • Items By Domain ("/from")
  • Edit an Item ("/edit-item")
  • Delete an Item ("/delete-item")

Comment Related Pages

Next, we'll cover all the pages necessary to facilitate the following comment related features:

  • Create a new comment on an item.
  • Display a single comment.
  • Edit a comment.
  • Delete a comment.
  • Upvote a comment.
  • Downvote a comment.
  • Un-vote a comment (remove an upvote or downvote).
  • Add a comment to the user's favorites.
  • Remove a comment from the user's favorites.
  • Reply to another comment.
  • Create the comment sections for designated pages.
  • Create each comment list page.

Here's the full list of pages:

  • Reply To Comment ("/reply")
    • The page used to make a reply to another comment.
    • On the page, it will display the details for the comment, including the upvote/downvote option, author, creation date, etc. And the page will also include a text area where the user can create the new comment.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/reply?id=LAGMB67CVZIH.
  • Individual Comment ("/comment")
    • Used to display the data for a single comment based on its id value stored in the database.
    • Will consist of the following features:
      • Display the details for the specific comment points, links to parent item and comment, etc.).
      • Allow a user to upvote, downvote, or un-vote the comment.
      • Allow a user to favorite and/or un-favorite the comment.
      • Allow a user to post a reply to the comment.
      • Display the comment's children (i.e. replies).
    • You can check out the demo for this page here: https://codernews.crfdemo.com/comment?id=LAGMB67CVZIH.
  • Newest Comments ("/newcomments")
  • Edit a Comment ("/edit-comment")
  • Delete a Comment ("/delete-comment")

Search Pages

We'll also build search functionality for the application, which will provide a real-time full-text search of the items and comments submitted to the database.

Below are all the pages that will be created for that functionality:

  • Search Results ("/search")
    • The page where a user will enter a query and view the search results returned from the Algolia search index.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/search.
  • Search Settings ("/search/settings")
    • On this page, users will be able to modify their default search settings, which include the following:
      • Number of search results to show per page.
      • Default type of data to retrieve from Algolia. This can be set to show either items or comments.
      • Default search results sorting method, including the "Most popular first" and "Most recent first" options.
      • Default date range to use when retrieving results from Algolia. The choices will include the "Last 24h", "Past Week", "Past Month", "Past Year", and "All-Time" options.
      • Determine if Algolia's type tolerance feature will be used in search results.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/search/settings.
  • Search About ("/search/about")

Moderation Pages

Moderator users will be given the following special privileges to maintain the website:

  • Killing an item or comment that is deemed to be irrelevant, inappropriate, etc. This will mark the item as dead in the database.
  • Un-killing an item or comment by removing the dead property given to it when it was killed.
  • Shadow ban a user. This will make all the user's submitted items and comments automatically dead when they are created. The rest of the user's account will function normally. There will also be functionality for the moderator to remove a user from the shadow banned list.
  • Ban a user. This will remove the user's ability to sign into their account. There will also be functionality for the moderator to remove a user from the banned list.

Below are all the pages that will be created for that list of features:

Informational Pages

We'll also need to create some additional pages that provide users with more information on certain subjects.

These will include the following pages:

  • Formatting Options ("/formatdoc")
    • Gives the formatting options when submitting an item or comment, including blank lines for paragraphs, adding italicized text, and links.
    • You can check out the demo for this page here: https://codernews.crfdemo.com/formatdoc.
  • FAQ ("/newsfaq")
  • Items & Comments Guidelines ("/newsguidelines")
  • Show Items Guidelines ("/showguidelines")

Each of these pages will be linked to in various parts of the website.

Error Pages

The website needs to handle any 404 and 500 errors that may occur.

Luckily, 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 those pages.

You can read more about this in the Next.js documentation.

REST API

Alongside the website, we'll also need to build a REST API application that takes requests from the website, interacts with the database, and sends a response back to the browser that is displayed to the website user.

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

In essence, the REST API will be a Node.js application that sits and listens for requests to create, update, or retrieve certain types of data in the database. When it gets a request from the website, for let's say a single item submission, it will interact directly with the MongoDB database and send the item's data back to the website to be displayed for the user.

There are several benefits to keeping the website and REST API separate 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 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.

MongoDB Database

For our 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 all the data related to items, comments, and users.

Algolia Search Index

We'll also build a search feature for the application that will provide a real-time full text search of the items and comments submitted to the database.

To get an idea of what the search page will look like from a user's perspective, check out the demo.

Play around with the page by submitting a search request in the header input field and test out the filter drop-down menu at the top of the results.

In the header section of the page, you'll notice a link that goes to the /search/settings page.

On this page, a user can modify some of their search options. These values are stored as browser cookies and will persist when the user leaves and comes back to the search page.

To implement fast and accurate search results, we'll use the Algolia instant search engine. Algolia is a company that provides "search as a service" for developers. To do this, they provide an API that can be used to add and retrieve data from.

Each time an item or comment is created, updated, or removed, the data will be mirrored in an Algolia search index.

To learn more about their site search services, check out this page on their website.

Deploying The Application

In this course, we'll also walk through how to deploy your application to production. To serve your application, we'll use DigitalOcean.

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 website and REST API applications.
  3. SSL/HTTPS certificates for your applications so everything is accessed via https://.
  4. Use the Nginx web-server software to host your application, which is super-fast and used by some of the highest-traffic websites in the world.
  5. Use an NPM package called PM2 to keep your application alive and running forever.

Through that process, you'll 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. Bootstrap The Website Application
    • Create a new Next.js application that will be used to run the website.
    • Create the header and footer layout that will be used on the majority of pages.
    • Create the alternative header layout that will be used for other pages.
    • Create a component that will be used for adding <head> meta data to each page.
    • Add favicon icon images for the website.
    • Create the custom 404 and 500 error pages.
  2. Bootstrap The REST API Application
    • Create a new Express REST API application.
    • Create a new MongoDB database hosted in the cloud by Atlas.
    • Connect to the database from the REST API application.
  3. User Related Functionality
    • Create new users.
    • Login users.
    • Authenticate users.
    • Logout users.
    • Reset user's passwords.
    • Display and update user's account information.
    • Change a user's password.
  4. Item Related Functionality
    • Create a new item.
    • Display a single item.
    • Upvote an item.
    • Remove an item upvote.
    • Favorite an item.
    • Remove an item from a user's favorites.
    • Hide an item.
    • Remove an item from a user's hidden items.
    • Edit an item's title or text content.
    • Delete an item.
    • Create each item list page:
      • Top ranked items.
      • Newest submitted items.
      • Top ranked items of the "show" category.
      • Newest submitted items of the "show" category.
      • Top ranked items of the "ask" category.
      • Newest submitted items from a given domain.
      • Newest items submitted by a given user.
      • Items favorited by a given user.
      • Items upvoted by a given user.
    • Apply the ranking algorithm to the item list pages.
  5. Comment Related Functionality
    • Create a new comment.
    • Display a single comment.
    • Upvote a comment.
    • Downvote a comment.
    • Remove a user's comment vote (upvote or downvote).
    • Favorite a comment.
    • Remove a comment from a user's favorites.
    • Edit a comment's text content.
    • Delete a comment.
    • Create the comment section for the single item and comment pages.
    • Create each comment list page:
      • Newest comments.
      • Comments submitted by a given user.
      • Comments favorited by a given user.
      • Comments upvoted by a given user.
  6. Search Related Functionality
    • Create and configure an Algolia search index.
    • Configure the REST API to interface with the Algolia search index.
    • Create all the necessary code for adding, updating, and removing items and comment data in the search index.
    • Build the search related pages on the website:
      • Search results page.
      • Search settings page.
      • Search about page.
  7. Moderation Related Functionality
    • Configure the REST API application to accommodate the moderator functionality.
    • Kill and un-kill items.
    • Kill and un-kill comments.
    • Shadow ban users.
    • Ban users.
    • Display moderator logs on the website.
  8. Create Each Informational Page
    • Formatting options.
    • FAQ.
    • Guidelines for item and comment submissions.
    • Guidelines for submitting items of the "show" category.
  9. Deploy The Application
    • Create and configure a new server using DigitalOcean.
    • Configure a custom domain name.
    • Use Nginx as a web server.
    • Configure HTTPS/SSL encryption.
    • Run the website and REST API applications using the PM2 process manager.
  10. Post Deployment Tasks
    • Get the website indexed on search engines (Google, Bing, DuckDuckGo, etc.).
    • Configure Google Analytics 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 up front, 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 👉
Bootstrap The Website Application
Bootstrap The REST API Application
User Functionality
Item Functionality
Comment Functionality
Search Functionality
Moderator Functionality
Informational Pages
Deploy The Application
Post Deployment Tasks