How to Build a Job Board With AWS Amplify and Nextjs
Tags: aws, nextjs, react, tutorial
Published: 2023-04-07 09:31:43

In today's fast-paced digital world, job boards have become a vital resource for job seekers and recruiters of all levels. Building a job board can be challenging, especially for those without a technical background. However, with [AWS Amplify](https://aws.amazon.com/amplify/?nc=sn&loc=0) and [Next.js](https://nextjs.org/docs), we can create a professional and functional job board website quickly.

In this article, we will walk through the step-by-step process of building a job board using these tools, from setting up the AWS Amplify backend to designing the user interface using Next.js.

The source code for the job board tutorial is readily available on [GitHub](https://github.com/femakin/AWS-AMPLIFY-NEXT-JOB-BOARD).


# Project Goal

Here's what we'll accomplish by the end of this tutorial:


1. By the end of the article, readers will have gained valuable skills in serverless application development, data modeling, and user authentication.
2. Integrating AWS Amplify DataStore client into the frontend
3. Handling user authentication and authorization with AWS Amplify Auth
# Prerequisites

To follow along, we will need the following:

- [AWS](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email) [a](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email)[ccount](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email) [](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email)[created](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email)
- Basic knowledge of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [Nextjs](https://nextjs.org/)
- [Node.js](https://nodejs.org/en/) ( v18+) installed
- [Npm](https://www.npmjs.com/) (v9+) installed
- [AWS Amplify CLI](https://docs.amplify.aws/cli/) (v10+) installed. Check [**official documentation for a guide**](https://docs.amplify.aws/start/getting-started/installation/q/integration/react/)

# Project Demo

Here is a brief preview of the application.


![Project preview](https://res.cloudinary.com/practicaldev/image/fetch/s--2Gcq8CLZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6bkuutdhy64o4n7vpzw.gif)

# Why AWS Amplify

AWS Amplify is a tool that helps web and mobile developers create and manage entire applications on AWS. It allows developers to use a wide range of AWS services without requiring extensive specialized knowledge of the cloud. With AWS Amplify, developers can quickly build, deploy and host their applications, adapting to different needs and use cases.
AWS Amplify provides the following services.

1. [Amplify CLI](https://docs.amplify.aws/cli/) - Local toolchain to configure and manage an app backend with just a few commands.
2. [Amplify Studio](https://docs.amplify.aws/console/) - Point-and-click environment to build and deploy a full-stack app in minutes, including frontend UI and backend.
3. [Amplify UI Components](https://ui.docs.amplify.aws/) - Open-source design system with cloud-connected components for building feature-rich apps fast.
4. [Amplify Web Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html) - Fully managed CI/CD and hosting for fast, secure, and reliable static and server-side rendered apps.
5. [Amplify Libraries](https://docs.amplify.aws/lib/) - Open-source client libraries to build cloud-powered mobile and web apps.

# Setting Up Backend

First, we type the `amplify version` command in our terminal to confirm that the Amplify CLI is installed. AWS provides a video guide to installing and configuring the Amplify CLI in their [official documentation](https://docs.amplify.aws/start/getting-started/installation/q/integration/next/).
We can begin setting up the backend as soon as these are complete.

# Creating an application on AWS Amplify

- Log in to the [AWS console](http://console.aws.amazon.com/)
- In the console search bar, type in `amplify` and click on the AWS Amplify from the research result
- On the Amplify page, we need to create a new app. Click the New App drop-down and select `build an app`.
- Enter the app name and click the `confirm deployment` button
- Wait while AWS setup the app environment
- Once completed, click the `Launch Studio` button to open the amplify studio

Upon launching the studio, a screen similar to the image below should appear.


![studio dashboard](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390210030_Screenshot+2023-03-08+at+11.05.34.png)


Here we will be configuring the backend features, so we need to be familiar with this interface.

# Creating the Data Model

Models in Amplify are similar to creating a database table (DynamoDB table).
In this project, we will be creating two models (table).

1. `JobList` - To store jobs information
2. `ApplicantList` - To store applicant's information

Also, we will create our users in the User management table.

To get started, click the Create data model in the Amplify Studio.


![create model](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390468369_create+model.png)


Next, click on Add model

![data model](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390619923_Screenshot+2023-03-08+at+11.29.24.png)

Next, Create `ApplicantList` and `JobList` Models that should look like the image below.


![models](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390673254_Screenshot+2023-03-08+at+11.40.37.png)


Now, we can click on **save and deploy** our models.


![deploy models](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390714308_Screenshot+2023-03-08+at+11.44.49.png)


After successful deployment, we should have something like this


![deployed](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390767944_Screenshot+2023-03-08+at+12.16.20.png)

# Setting Up Authentication With AWS Amplify

The authentication feature will help us manage login, signup, forget passwords, and verify OTP. Here is where we will configure the login and registration processes. To set up:


- Click the Authentication tab on the side menu.
- Click on Password protection settings.
- For a simple password, set the maximum number of characters to 6 and uncheck all checkboxes.
- Leave everything else as default.
- Click the `Deploy` button and confirm the deployment.
- Wait while AWS deploys the authentication.
- Once deployment is complete, we'll already have an authentication flow available for consumption. Successful deployment should display as shown below.


![deployed](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390808283_Screenshot+2023-03-08+at+14.00.27.png)

# Setting Up Storage With AWS Amplify

Here we will manage our resources for file storage (images, audio, video, etc.) and data storage backend by Amazon S3. To set up:

- At the left panel of the amplify studio, click on **Storage**
- In Authorization settings, check the **Upload box**, **View box**, and **Delete box** under Signed-in users


![file storage](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390922178_Screenshot+2023-03-08+at+15.11.57.png)

- Click the `Create bucket` button
- Wait while AWS deploys and syncs the S3 bucket to the project.
- Once deployment is completed, we have straightforward access to our S3 bucket.

# Setting up Frontend


## Bootstrapping Next.JS Application

Next, let's create a Next project by running the following command in our terminal:

```javascript

    npx create-next-app@latest awsjobboard
    cd awsjobboard

```

## Pull configuration files

To pull the configuration files into our front end, click the Local setup instructions and copy the configuration files as shown in the image below.


![configuration file](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678390975272_Screenshot+2023-03-08+at+17.13.28.png)


Before executing the command we just copied, in the `awsjobboard` directory, create a folder with the name `Backend`. This folder will contain all the backend configs of the project.
Now, we can execute the command we just copied from the Amplify Studio in our terminal inside the `Backend` folder we created. It will get the latest client configuration files for our Next.js project.
This will prompt us to log in to the Amplify CLI. We should click Yes and return to the terminal to continue configuring the Amplify app. We will be asked to select our code editor, the type of project that we are building, and the JavaScript framework that we are using. We can press enter to select the default values for these. We should then set the rest of the wizard options manually, as shown below:


![configuration](https://paper-attachments.dropboxusercontent.com/s_E69AEA80D6890F76369F8310A46DA28955D893A0859A35F2F315DD274C132D35_1678391062969_Screenshot+2023-03-08+at+17.49.54.png)

## Setting up Components

In the `src` directory, we will create a folder with the name `components`. This is the directory that will contain all the reusable components for the project.

**Navbar Component**

In the `src` directory, create the file `src/components/Navbar.js`and add the following code:

{% gist
https://gist.github.com/femakin/410ef2b884268a0f3167236ade7f4eff %}


The code above imports necessary dependencies from AWS Amplify, Next.js, and React, and also imports `awsconfig` which is a configuration file for the AWS Amplify SDK.
The component displays a header containing a logo and a button for sign-up or login. The button's text is dynamically set based on whether the user is authenticated or not. Clicking the logo or the button triggers navigation to either the home page or the authentication page using the Next.js `useRouter` hook.

The component also authenticates the user on page load or when the `asPath` property from the Next.js router changes using the `Auth.currentAuthenticatedUser()` method from the AWS Amplify Auth library. 

**Jobdetails Component**

In the `src` directory, create the file `src/pages/Jobdetails.js` and add the following code:

{% gist
https://gist.github.com/femakin/30c012f3f8db0f57c35766a2b01acf04 %}


The component above imports a custom `getData` function from an API route file. The component renders a hero section with a welcome message, a recent jobs section that displays job details fetched from the server with the `getData` function, and a button to apply for a job.
Clicking the `apply` button triggers navigation to the applicant page with the job details stored in local storage using the Next.js `useRouter` hook.
The `data` prop passed to the component is an array of job objects fetched from the server. 

## Setting up the APIs

In this section, we will create all our Apis which are `getdata.js` to get all JobList, `apply.js` to apply for a job as an applicant, and `addnewJob.js` for admin to add a new Job.

**getData API**

In the `src/pages/api` directory, create the file `src/pages/api/getdata.js` and add the following code:

{% gist
https://gist.github.com/femakin/1a6ba58ef6f251bd36ed38a580ec3448 %}


This code above exports an asynchronous function called `getData` which uses Amplify's `DataStore` API to query job data from the `JobList` ****model**.**

**apply API**

In the `src/pages/api` directory, create the file `src/pages/api/apply.js` and add the following code:

{% gist
https://gist.github.com/femakin/2d261ff4047aa615737eeddc0341f011 %}


The function takes in two parameters, `data`**, and** `jobdetails`, which are objects containing applicant details and job details, respectively. The function attempts to save the applicant details in the Datastore by creating a new instance of the `ApplicantList` **m**odel and setting its properties to the values from the `data` object and the `\[jobdetails.id\](<http://jobdetails.id>)` property. If the save operation is successful, the function returns an object with a `success` property set to `true`. If there is an error during the save operation, the function returns an object with a `success` property set to `false` and an `error` property containing the error object.

**addnewjob API**

In the `src/pages/api` directory, create the file `src/pages/api/addnewjob.js` and add the following code:

{% gist
https://gist.github.com/femakin/0f4c1dcdf1ab318327edd4c2cb3d3be1 %}


The function above takes in an object parameter `data` containing job details, and it saves the job details in the Datastore by creating a new instance of the `JobList` model and setting its properties to the values from the `data` object. If the save operation is successful, the function returns an object with a `success` property set to `true`. If there is an error during the save operation, the function returns an object with a `success` property set to `false` and an `error` property containing the error object. The `JobList` model is defined in a file located at `../../../Backend/Backend/models`.

## Designing the pages

The next step is to design our project pages. Here, we will create the Home page, the Applicant page, and the Admin page. A landing page will be the home page. An applicant page will be the application page. An admin page will be where administrators can create vacancies and approve or reject applicant applications.
In order to use AWS Amplify with a Next.js application, several dependencies need to be installed. First, we need the `@aws-amplify/ui-react` and `aws-amplify` packages to enable authentication and API services. We also require  `sweetalert2` for creating user-friendly alerts. To install these dependencies, let us run the below command in our terminal.

`npm i @aws-amplify/ui-react aws-amplify sweetalert2`

Now we can create the Home page, the Applicant page, and the Admin page.

**Home Page**

In the `src/pages` directory, create the file `src/pages/home.js` and add the following code:

{% gist
https://gist.github.com/femakin/44d3566134725af666118c644f50882c %}


The code above imports Amplify from AWS Amplify library, `awsconfig` from a configuration file for AWS services, styles, useEffect and useState from React, `Navbar` and `Jobdetails` from their respective components, and `getData` function from a local API file. The `useEffect` hook is used to fetch the job data from the API and set the state with the fetched data. The `return` statement renders the `Navbar` component and, if there is data, the `Jobdetails` method is used to configure AWS Amplify with the `awsconfig` object and `ssr` property set to true, which enables server-side rendering.

**Applicants Page**

In the `src/pages` directory, create the file `src/pages/applicant.js` and add the following code:

{% gist
https://gist.github.com/femakin/c38d93f6ad8ad6bb0b798ea1bc74fc4e %}


This code above handles the form submission of a job application for a user. It uses AWS Amplify for authentication and imports the necessary packages for the authentication flow. The component displays a form for the user to fill out and submit their job application details, and it also displays the job details they are applying for. Upon successful submission, it displays a success message and redirects the user to the home page. The code also handles user authentication and redirects the user to the appropriate page based on their user type.

**Admin Page**

In the `src/pages` directory, create the file `src/pages/admin.js` and add the following code:

{% gist
https://gist.github.com/femakin/0efa66fed5dc99005f288df6c40c3f9b %}


The code above displays a form for adding a new job and a list of job applications. It uses AWS Amplify and DataStore to interact with an AWS backend. The component is wrapped with the `withAuthenticator` HOC to enable authentication with Amazon Cognito.

The `useEffect` hook is used to fetch the authenticated user and redirect them to the appropriate page based on their attributes. It also fetches the list of job applications from the database and updates the `data` state.

The form inputs are stored in state using the `useState` hook. The `handleInputChange` function updates the state with the values entered by the user. When the form is submitted, the `handleSubmit` function calls the `addnewjob` function to add the job to the database. If successful, a success message is displayed and the user is redirected to the home page. If there is an error, it is logged to the console.

The list of job applications is displayed using the `data` state. Each job application is displayed as a card with an image, the job ID, the applicant's email, name, portfolio link, and a cover letter message. The `map` function is used to iterate over the `data` array and display each application.

**Auth page**

In the `src/pages` directory, create the file `src/pages/auth.js` and add the following code:

{% gist
https://gist.github.com/femakin/da1568853149aaffdec155a9602baa0a %}


This code imports and configures the necessary dependencies for authenticating users via AWS Amplify. It defines a function named `Authaccount` that uses React's useEffect hook to check whether a user is authenticated and redirects them to either an admin or applicant page based on their user attributes. Finally, it exports the `Authaccount` function wrapped with the `withAuthenticator` higher-order component provided by AWS Amplify, which adds authentication UI components to the page.


**Index page**

In the `src/pages/index.js file` , replace the existing code with the code below:

{% gist
https://gist.github.com/femakin/55dbc7cb45911809e9ef7d259ba63385 %}


The code above defines a default export function named `page` in the index.js file. It returns a JSX element containing a Home component.

## _app page

In the `src/pages/_app.js file` , replace the existing code with the code below:

{% gist
https://gist.github.com/femakin/d0d4858e86702e0e613ceeef14107e8c %}

## Testing the Job board

For us to test our project, there are a few steps we need to take:


- Click the User management tab on the side menu in the Amplify studio.
- Click `Create User` to create a new user with a temporary password.

Now, navigate to the root of the project on the terminal and run `npm run dev`

Our job board is now up and running at `localhost:3000`. To view the homepage, we can visit `localhost:3000` in our preferred web browser. We should be able to see the homepage, which will resemble the image below.


![](https://paper-attachments.dropboxusercontent.com/s_B925965729EC1F336A66AC1A217D4E3F8E1502A97A93852572B628BDD8E56A30_1678432406329_Screenshot+2023-03-10+at+07.40.11.png)


Next, we log in using the email and password we created, which takes us to the change password page, where we can now change and update our password. After we log in, we move to the admin page, where the admin can create and approve or reject jobs.


![](https://paper-attachments.dropboxusercontent.com/s_B925965729EC1F336A66AC1A217D4E3F8E1502A97A93852572B628BDD8E56A30_1678434246325_screencapture-localhost-3000-admin-2023-03-10-08_37_56.png)


Immediately the Admin adds the Job, the details get uploaded into our JobList model in the Amplify studio and the Job board homepage as shown below


![](https://paper-attachments.dropboxusercontent.com/s_B925965729EC1F336A66AC1A217D4E3F8E1502A97A93852572B628BDD8E56A30_1678436064129_screencapture-us-east-1-admin-amplifyapp-admin-d2a24hhrcbd5ni-staging-data-manager-2023-03-10-09_11_48.png)

![](https://paper-attachments.dropboxusercontent.com/s_B925965729EC1F336A66AC1A217D4E3F8E1502A97A93852572B628BDD8E56A30_1678436434707_screencapture-localhost-3000-2023-03-10-08_56_51.png)



# Conclusion

In this tutorial, we walked through the step-by-step process of creating a professional job board, from setting up the backend with AWS Amplify to designing the user interface using Next.js. With the knowledge gained from this tutorial, anyone can now create a job board website that is efficient and easy to use. 

# Resources and References
- [How to create a fully customized authentication flow with AWS Amplify](https://www.youtube.com/watch?v=EvzLRCDe6VI&t=1706s)
- [AWS Amplify Documentation](https://aws.amazon.com/amplify/)
- [How to install and configure AWS Amplify CLI](https://docs.amplify.aws/start/getting-started/installation/q/integration/react/)
- [How to customize Amplify HOC with](https://ui.docs.amplify.aws/react/theming) [authenticator](https://ui.docs.amplify.aws/react/theming)
- [NextJs Documentation](https://nextjs.org/docs/getting-started) 
- [Deploy a Next.js 13 app to AWS with Amplify Hosting](https://aws.amazon.com/blogs/mobile/amplify-next-js-13/)