Building a Job Nina with Sapper, Strapi and Netlify

Job Nina is a platform where jobs are created; the admin/employer can add any field job that matches the company's requirements. Generally speaking, job nina is a job search platform. In this tutorial, I'll walk you through the steps of creating a job nina with sapper and strapi as the backend then deploy to netlify.

Prerequisites

To complete this tutorial , you need to have:

• Node.js and NPM installed locally. Visit article from Teamtreehouse for instructions on installing Node.js and NPM on your local machine
• Basic understanding of sveltejs/sapper.
• Basic understanding of strapi. click to know more
• Git and GitHub
• Netlify account

What is Sapper?

Sapper is a web application framework with a beautiful development experience and flexible filesystem-based routing.

Sapper, unlike single-page apps, does not compromise SEO, progressive enhancement, or the initial load experience. However, unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel. It is a svelte-powered application that creates bigger apps with a smaller footprint.

What is Strapi?

Strapi is an open-source, Node. js-based, headless CMS that saves developers time while allowing them to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc.) across any device. Visit strapi documentation page for more details.

Project Setup

Let's begin setting up our project.

Strapi Installation

Before we begin the installation process, make sure that Node.js and NPM are fully installed on your system.

• Use the following command to start a new project.

       npx create-strapi-app@latest my-project --quickstart

• Change my-project to the preferred name of your project. Select n when asked for a configuration template.
• Wait for the complete installation. You will be redirected to http://localhost:1337/admin, where you will be prompted to register your details.
• Add your details and click LET’S START to access the Strapi dashboard.

Building the Project

In this phase, start by creating a new collection type Jobs with the following content and field types as shown below:

• Name
• Salary
• Experience

Also, create another collection type "Job_type" with content "Name".

Then, add a relation for the two collection types. In the collection type Job_type field Name, click on add new entry and select the require field for the relation.

Next, head over to Settings, navigate to Roles, and click on Public. Scroll down to Permissions, click on Jobs and Job_type, then click on "select all" to allow all activities for the application and save.

Installing Sapper

Sapper installation is very easy; copy and paste the following command on your terminal/cmd.

     npx degit "sveltejs/sapper-template#rollup" my-app
    # or: npx degit "sveltejs/sapper-template#webpack" my-app
    cd my-app
    npm install
    npm run dev

The above command install the project's dependencies, scaffold a new project in the my-app directory, and launch a server. Now that you are done with the installation process, start building the project.

Developing the Frontend

After installing all the necessary packages for developing our front end, we should run the command npm run dev to begin working on the front end. After that, a display showing the local address will appear on your cmd screen: http://localhost:3000.

This local address can be copied and pasted into your browser to bring up the Sapper page. Next, open the sapper folder in your code editor, navigate to src/component/nav.svelte; copy and paste the following code.

1    <script>
2      export let segment;
3      const handleClick = () => {
4        console.log(segment);
5      };
6    </script>
7    <nav>
8      <div>
9        <h1 on:click={handleClick}>JOB FORAGE</h1>
10        <ul>
11          <li><a class:current={segment === undefined} href=".">Home</a></li>
12          <li><a class:current={segment === "about"} href="about">About</a></li>
13          <li>
14            <a class:current={segment === "contact"} href="contact">Contact</a>
15          </li>
16          <li><a class:current={segment === "Jobs"} href="Jobs">Jobs</a></li>
17        </ul>
18      </div>
19    </nav>
20    <style> 
21      nav {
22        background: #fff3ef;
23      }
24      nav div {
25        max-width: 960px;
26        padding: 0 10px;
27        margin: 0 auto;
28        display: grid;
29        grid-template-columns: 1fr 1fr;
30        text-align: center;
31      }
32      h1 {
33        margin-top: 20px;
34        font-size: 30px;
35        font-weight: bold;
36        /* display:flex; */
37        text-align: left;
38      }
39      ul {
40        padding: 0;
41        margin: 0;
42        text-align: right;
43      }
44      li {
45        display: inline-block;
46      }
47      a {
48        text-decoration: none;
49        padding: 1em 0.5em;
50        display: block;
51      }
52      a.current {
53        border-bottom: 3px solid #ff3e00;
54      }
55    </style>

Click on src/component/footer.svelte, and include the code below.

1    <footer>copyright 2022 by Opuama Lucky</footer>
2    <style>
3      footer {
4        color: #bbb;
5        text-align: center;
6        padding: 20px;
7        max-width: 400px;
8        margin: 40px auto 0;
9        border-top: 1px solid #f2f2f2;
10      }
11    </style>

The code above should display both the nav bar and the footer in your browser.

For the homepage, navigate to src/routes/index.svelte; copy and paste the codes below.

1     <svelte:head>
2      <title>Begining sapper</title>
3    </svelte:head>
4    <div>
5      <img src="jet.jpg" alt="" />
6      <h1>Job Nina</h1>
7      <p>find your next assignment right here</p>
8      <a href="Jobs" class="btn">View Job</a>
9    </div>
10    <style>
11      h1,
12      p {
13        text-align: center;
14        margin: 0 auto;
15      }
16      h1 {
17        font-size: 2em;
18        text-transform: uppercase;
19        font-weight: 700;
20        margin: 0 0 0 0.5em 0;
21      }
22      img {
23        width: 200px;
24        margin: 0 auto;
25        display: block;
26      }
27      a {
28        margin: 40px;
29      }
30      div {
31        margin-top: 60px;
32        text-align: center;
33      }
34      @media (min-width: 480px) {
35        h1 {
36          font-size: 4em;
37        }
38      }
39    </style> 

Unfortunately, you will not see anything on your browser because we have not yet decided how our project should look. To fix this, navigate to src/routes/ layout.svelte and enter the following code. The code below assists us in arranging our project.

1    <script>
2      import Nav from "../components/Nav.svelte";
3      import Footer from "../components/Footer.svelte";
4      export let segment;
5    </script>
6    <Nav {segment} />
7    <main>
8      <slot />
9    </main>
10    <Footer />
11    <style>
12      main {
13        position: relative;
14        max-width: 960px;
15        padding: 60px 10px;
16        margin: 0 auto;
17      }
18    </style> 

Connecting Strapi

Before we begin, we must install axios in order to send asynchronous HTTP requests easily. Click here to know more about axios.

Run the following command on cmd /terminal

    npm install axios
    or
    yarn add axios

Navigate to the routes folder and create a folder Jobs. Create a file index.svelte with the following codes (src/routes/Jobs/index.svelte).

1    <script>
2      import { onMount } from "svelte";
3      import axios from "axios";
4      let jobs = [];
5      let error = null;
6      
7      const getJobs = () => {
8        axios.get("http://localhost:1337/api/Jobs").then((res) => {
9          jobs = res.data.data;
10          console.log(jobs\["id"\]["attributes"]["Name"]);
11          return { jobs };
12        });
13      };
14      onMount(getJobs);
15    </script>
16    <style>
17      ul{
18        padding:0px;
19      }
20      li{
21        list-style-type:none;
22        padding: 10px;
23       
24      }
25      ol li {
26        font-weight: bold;
27        font-size: 24px;
28      }
29        .btn{
30        display:block;
31        padding:15px;
32        border:1px solid #6b3fca;
33        border-radius:8px;
34        background-color: #6b3fca;
35        margin:10px auto;
36        text-decoration:none;
37      }
38       a:hover{
39        background-color:#9f43e5;
40      }
41      div{
42        text-align:center;
43      }
44       ol li ul{
45        display:none;
46    }
47     ol li:hover ul{
48        display: block;
49    }
50    </style>
51    <main>
52    <div>
53      <h1>All Current Jobs</h1>
54      <hr />
55      </div>
56      {#await jobs}
57        loading...
58      {:then jobs}
59        <ol>
60          {#each jobs as jobs}
61            <li > {jobs\["attributes"\]["Name"]}
62              <ul>
63                <li>Salary:  ${jobs\["attributes"\]["Salary"]}</li>
64                <li>Job Requirement:  {jobs\["attributes"\]["Experience"]}</li>
65              </ul>
66            </li>
67          {/each}
68        </ol>
69      {:catch error}
70        {error}
71      {/await}
72      <div>
73        <a href="/Jobs/create" class="btn" >Add a Job </a>
74      </div>
75    </main>

In the above code, we imported axios and onMount life cycle, which provides a way to run a function when the component is loaded to the DOM. It can be used to initialize values and call API to load. Following that, apply a get request to fetch data from our Strapi backend.

Next, navigate to the routes folder again and create a folder Jobs. Create a file create.svelte with the following code (src/routes/Jobs/create.svelte).

1    <style>
2    h2{
3        text-align: center;
4    }
5    form{
6        max-width: 360px;
7        margin:40px auto;
8        text-align:center;
9    }
10    input, textarea{
11    display:block;
12    width:100%;
13    padding:10px;
14    font-family:arial;
15    margin:10px auto;
16    border:1px solid #eee;
17    border-radius:8px;
18    }
19    </style>
20    
21    
22    <script>
23        import { onMount } from 'svelte';
24        import axios from 'axios'
25        
26        let allJob_type = [];
27        let title = "";
28        let salary = "";
29        let Jobtype = [];
30        let details = "";
31        let error = null;
32        
33        
34        async function handleSubmit() {
35            try {
36                const response = await axios.post("http://localhost:1337/api/Jobs", {
37                   data: { Name: title,
38                    Salary: salary,
39                    Experience: details,
40                    Job_types: Jobtype,
41                   },
42                });
43                Jobtype=response.data.data
44                
45            } catch(e) {
46                error = e
47            }
48        }
49        onMount(async () => {
50        try {
51            const response = await axios.get('http://localhost:1337/api/job-types');
52            allJob_type = response.data.data
53            console.log(allJob_type);
54        } catch(e) {
55            error = e
56        }
57    });
58        
59        </script>
60        
61        {#if error !== null}
62          {error}
63        {:else}
64           <h2>Add a Job </h2>
65           <form>
66            <input type ="text" placeholder="Job Title" bind:value={title} required >
67            <input type ="number" placeholder="Amount $" bind:value={salary}  required >
68            <textarea type ="text" placeholder="Job Requirement" bind:value={details}  required></textarea> 
69             <br />
70            Select Job_type
71            <br />
72            {#each allJob_type as jobtype}
73                <label>{jobtype\["attributes"\]["name"]}</label>
74              <input type="checkbox" bind:group={Jobtype} value={jobtype} />
75            {/each} 
76            <input type="submit" value="Submit" on:click={handleSubmit} />
77        </form>
78        
79        {/if}

In the above code, we declare all of the variables required, and then we define a function handleSubmit to post/insert data to the API and a get request to retrieve the data.

Here is our Home page.

Here, Job/index.svelt is showing all available jobs. Click on "Add a Job".

You will be directed to the Jobs/create page after clicking the Add a Job button. Fill out the form and submit it.

After submitting the form, your information will appear as shown in the image below.

Go to Strapi database and refresh.

Push to GitHub and Deploy to Netlify

In this phase, we will push our Sapper project to GitHub. If you are new to GitHub, follow this article and you will be fine. Click here to sign up as well.

After successfully pushing to GitHub, a similar image should appear on your git repo.

Let us now deploy to Netlify. If you are new, sign up and register. Once logged in, click on create new site and select import from an existing project. Choose GitHub, search for the GitHub repo, and continue. Update your build command to npm run export then deploy.

Testing the Project

Before testing the project, ensure that Strapi app is still running on your system. To run Strapi app,

    npm run develop   

Still on Netlify, click on open production deploy.

Conclusion

Congratulations, we have reached the end of this tutorial. If you followed the steps in this tutorial, your project should be working fine.

We were able to create collection types and establish a relationship between them. We fetched and submitted data to our Strapi backend, pushed to github and also deployed to Netlify. You can add more features to your project as well.

Here is the link to the GitHub repository for this tutorial.