The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

How to Build a Chat App with React, Strapi & Firebase

large_cover art.jpeg

medium_cover art.jpeg

small_cover art.jpeg

thumbnail_cover art.jpeg

cover art.jpeg

Web development has evolved tremendously over the past decade, with the emergence of modern frameworks that simplify the development process and improve performance. Two such frameworks are Next.js and SvelteKit, which have gained significant popularity in recent years. When developing Strapi applications, choosing the proper framework can ensure optimal performance and seamless user experience. 

In this article, we will compare Next.js and SvelteKit, highlighting their strengths and weaknesses and helping you decide which one to choose for your next Strapi app.


## What is Next.js? 
[Next.js](https://nextjs.org/) is a free and open-source web development framework based on the React library. It allows developers to easily create server-side rendered React applications, resulting in faster page load times, better SEO, and improved performance.

Next.js has several built-in features, including automatic code splitting, client-side and server-side rendering, and optimized performance. It also has an integrated development server and supports hot module replacement, allowing developers to quickly develop and iterate on their applications.

The goal of Next.js, which Vercel supports, is to provide full-stack functionality to the front-end. New rust-based minification capabilities and the incremental bundler and build system Turbopack, which replaces Webpack, indicate that Next.js will remain a powerhouse for users who want access to the full range of development options.

### Key Features of Next.js
Programmers can easily create server-rendered React applications thanks to Next.js, which provides several crucial features. Some of the key characteristics of Next.js include the following:

- Server Rendering: Next allows faster page load times and better SEO. It can also improve overall application performance by reducing the amount of work required by the browser.
- Automatic Routing: Any URL is mapped to the filesystem, then placed in the pages folder, and no configuration is required (you have customization options).
- Automatic code splitting: Next.js automatically splits the code into smaller chunks based on the pages, allowing only the code required for each page to be loaded.
- API routes: With Next.js, creating serverless API routes for server-side functionality or data retrieval from external APIs is simple.
- Extensive plugins and tools: Next.js has a large and active community, and numerous plugins, libraries, and tools can be integrated into Next.js projects, making it simple to add functionality and features to your application.

## How to Integrate Next.js with Strapi?
Next.js documentation contains detailed instructions on how to set up and configure Next.js for various use cases. There are also tutorials and resources on the Strapi blog that can assist in this process, listed below.
- [Integrate Next.js with Strapi](https://strapi.io/integrations/nextjs-cms)
- [Build a blog with Next (React.js) and Strapi](https://strapi.io/blog/build-a-blog-with-next-react-js-strapi)
- [Create your "next" app using Next.js and Strapi](https://www.youtube.com/watch?v=EnuvFyJE6dg&list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)
- [How to Create an SSG (Static Site Generation) Application with Strapi Webhooks and NextJs](https://strapi.io/blog/how-to-create-an-ssg-static-site-generation-application-with-strapi-webhooks-and-nextjs)
- [How to Build a Notion Clone with Strapi v4 and Next.js](https://strapi.io/blog/how-to-build-a-notion-clone-with-strapi-v4-and-next-js-part-1-of-2) 

## Pros and Cons of Using Next.js with Strapi

### Pros of using Next.js with Strapi
When it comes to building Strapi applications, Next.js can be an excellent choice for several reasons.
- Excellent performance in terms of load times: Next.js ability to prefetch pages and assets, making them instantly available to users. This can significantly enhance the user experience and help to reduce bounce rates.
- Ready to use Server Side Rendering (SSR): The server can render the initial content, which improves the time to first byte (TTFB) and reduces the time it takes for a page to load. SSR can also improve search engine optimization (SEO), as search engines can easily crawl and index the website's content.
- Image optimization: It can help to improve the loading times of images on your Strapi application. Also, automatically optimize and resize images based on the device used to access the site, further improving the user experience.
- Third-party support: Next.js has an extensive third-party support system, with many libraries and packages available to extend its functionalities. Developers can add new features to their Strapi applications quickly and easily, without having to build everything from scratch.
- Great SEO: It can help to improve the visibility of your Strapi application in search engine results pages (SERPs). 

### Cons of Using Next.js with Strapi
While Next.js offers several advantages when building Strapi applications, there are also some potential drawbacks that developers should consider.
- No ready support for dynamic routing: While Next.js provides a powerful routing system that allows for flexible routing configurations, it can be challenging to implement dynamic routing, which can be a requirement for some Strapi applications. Developers may need to work around this limitation by using custom server-side code or third-party libraries.
- Limited control over the server: Next.js abstracts away much of the server-side logic, which can be both an advantage and a disadvantage. While this can make it easier to build and deploy applications, it can also limit developers' control over the server and make it more challenging to implement certain custom server-side features.

## What is SvelteKit?
[SvelteKit](https://kit.svelte.dev/) is a framework for developing web applications with Svelte, a popular front-end JavaScript framework. SvelteKit makes creating fast, server-rendered web applications easier with minimal configuration. Like other contemporary web frameworks, SvelteKit offers a file-based routing system. That is why routes and pages can be easily defined in your application. You can see your changes in real-time with SvelteKit's integrated development server, which supports hot reloading.

SvelteKit has built-in support for deployment to various platforms, including Vercel, Netlify, and Cloudflare Workers, as well as for authentication and caching.

### Key Features of Sveltekit
Key features of SvelteKit include the following:
- Fire Base Routing: You can define your routes and create pages for your application using SvelteKit's file-based routing system in a simple way to comprehend and maintain.
- Server-Side-Rendering (SSR): Built-in server-side rendering (SSR) capabilities from SvelteKit can significantly boost your application's performance and SEO.
- Authentication: SvelteKit comes with integrated authentication support, making integrating user registration and login into your application simpler.
- Hot Reloading: A development server that supports hot reloading is already built into SvelteKit, allowing you to see changes as they happen without having to reload the page manually.
- Caching: Integrated development server is provided by SvelteKit and supports Reducing the number of requests to external data sources by using SvelteKit's caching capabilities to boost the performance of your application.

## How to Integrate SvelteKit with Strapi?

The SvelteKit FAQ has a [section on integrations](https://kit.svelte.dev/faq#integrations), which may be helpful if you still have questions. The tutorial below is an excellent guide for integrating Sveltekit with Strapi.

- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi)

## Pros and Cons of Using SvelteKit with Strapi

### Pros of Using SvelteKit with Strapi
Strapi and svelteKit can work well together to build modern web applications. Here are some potential advantages of using SvelteKit with Strapi:
- Speed and Performance: SvelteKit is a fast, lightweight framework with exceptional performance. When combined with Strapi, it is possible to create web applications that are both fast and responsive.
- Scalability: Strapi and SvelteKit are both excellent options for complex and large-scale web applications due to their highly scalable designs. Strapi's flexible content model can handle a wide range of data and use cases, while SvelteKit's serverless architecture makes it simple to scale your application without worrying about infrastructure.
- Flexibility: Both SvelteKit and Strapi are very adaptable and can be tailored to meet the particular requirements of your project. You can build web applications customized to your needs using SvelteKit's modular architecture and Strapi's robust API and plugin system.
- Development Expertise: The developer experience is prioritized by both SvelteKit and Strapi, making it simple to build and deploy web applications quickly and effectively.

### Cons of using Svelte with Strapi
- Lack of plugins and extensions: SvelteKit's ecosystem of plugins and extensions is smaller than Next.js. This may make finding solutions to specific needs or requirements more complex.
- Limited documentation: SvelteKit is a new framework with limited documentation. This can make it more difficult to find answers to questions or troubleshoot issues during development.

## What is Strapi? 
[Strapi](https://strapi.io/) is an open-source, Node.js based, headless CMS that allows developers to work with their preferred tools and frameworks while saving them a ton of time. Strapi also gives content editors the ability to automate the delivery of content (text, images, and video) to all devices.

Also, Strapi is a strong and adaptable CMS that offers programmers a straightforward and user-friendly way to manage content for their applications. For developers looking to create unique API-driven content, it is a popular option due to its flexibility, scalability, and simplicity of use.

## Create a Strapi Project
Before creating a Strapi project, ensure Node.js is installed on your system. Then run the following command on your command terminal (CMD): 
  `npx create-strapi-app@latest my-project --quickstart` 
  
Once this command has been executed, your Strapi project will start on port 1337 and open localhost:1337/admin/auth/register-admin in your browser. Next, set up your administrative user:

![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_178afe8b2e.png)
 
Fill out the form and submit it by clicking the "Let's Start” button. You'll be taken to the Strapi dashboard, as shown below:

![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_af1292b94d.png)

## Next.js vs SvelteKit Comparison

Now, we will compare a few of their features, ranging from routing to deployment. By the end of this article, you should be better equipped to choose one for your specific project. Let's get started!

### Routing
Routing is a mechanism for mapping URLs to specific components or pages in your application. All two meta-frameworks use file-based routing, the primary method used by all meta-frameworks.
- **Next.js:** It creates files in the pages directory to define your routes; the file name determines the route. A file called pages/about.js, for example, would correspond to the /about route.
- **SvelteKit:** Each file in your application's src/routes directory represents a route. For instance, a file named ´src/routes/about.svelte´ will be mapped to the /about route.

### Error Handling
Error handling is an important aspect of web development that can help ensure the robustness and dependability of your application.
- **Next.js:** You can handle errors using the **getInitialProps** method, which allows you to fetch data and handle errors before rendering the page.
- **SvelteKit:** You can handle errors by using the $error store, a built-in store that tracks errors occurring during page rendering.

### API Routing
API routing is a critical component of modern web applications because it allows different systems and services to interact with one another in a standardized manner. This can be used to expose data or functionality to external partners.
- **Next.js:** API routes can be created by creating a file in the ´pages/api´ directory. The following example demonstrates how it is done.
```js
    export default (req, res) => {
      res.status(200).json({ message: 'Hello, world!' });
    };
```

- **SvelteKit:** API routes are created by placing a file with a specific naming convention in the src/routes directory. The following example demonstrates how it is done.
```js
    // src/routes/posts/[id].json.js
    export function get(req, res) {
      const { id } = req.params;
      res.status(200).json({ id });
    }
```   

### Prerending Pages as Static Site Generator(SSG)
By prerendering pages as an SSG, web developers can improve the performance, SEO, and scalability of their web applications, making them more efficient and user-friendly.
- **Next.js:** Next.js prioritizes static content generation at build time and includes a robust data-fetching framework for that purpose.
- **SvelteKit:** SvelteKit focuses on dynamic and real-time content, with a data fetching framework designed for runtime data fetching.

### Styling
Regarding styling your web applications, both frameworks provide flexibility and power; which one to use ultimately depends on personal preference and project requirements.
- **Next.js:** Next.js relies more heavily on third-party CSS-in-JS libraries because it does not support importing CSS or SCSS files directly into your components.
- **SvelteKit:** SvelteKit support built-in CSS module support, allowing you to create modular, scoped styles.

### Deployment
Next.js and SvelteKit have similar deployment options, but the two frameworks approach deployment differently.
- **Next.js:** Next.js intends to be deployed as a server-rendered application, which typically runs on a Node.js server.
- **SvelteKit:** SvelteKit is designed to be deployed as a static site generator, which means it can be deployed on any web server that can serve static files

## Which One Should You Pick?
Choosing a framework depends entirely on you, your team, and the context of your future project. Both frameworks are popular choices for developing web applications, and each has unique benefits and drawbacks.

### When Should you Pick Next.js?
Next.js may be a better choice if you (or your team) are already familiar with React and require more control over your application's configuration. 
Remember that Next.js is more than just a tool for creating static websites. It is a hybrid framework because static and server-side generated pages are used (or meta-framework). Next.js is an appealing option for content-rich websites with numerous pages (90k+), as it reduces or eliminates the need for upfront construction time.

### When Should you Pick SvelteKit?
SvelteKit is a better fit if you (or your team) value simplicity and ease of use. Many of its features, like server-side rendering, automatic code splitting, and dynamic routing, are similar to those of Next.js. SvelteKit is a good option for developers who want to quickly create web applications without a lot of overhead because of its reputation for simplicity and usability.
One significant advantage of using SvelteKit over Next.js is the ability to work with Svelte. According to the survey “[State of JavaScript](https://stateofjs.com/en-us/)," developer satisfaction with Svelte is higher than with React.
 
## Conclusion
One thing is sure: the place to look for innovations in the front-end framework space right now is in the meta-frameworks, such as Remix, Next.js, SvelteKit, Nuxt.js, Gatsby, SolidStart, Gridsome, and others. We're even getting to the point where meta-meta-frameworks exist. From this article, we have been able to differentiate between Next.js and SvelteKit getting to know their key features, how they can be integrated with Strapi, and which one you should choose for your next Strapi application depending on the use case. 

If you want to learn more about hosting your Strapi application and how to do it, here are some resources you might find helpful:

- [Strapi Documentation](https://docs-next.strapi.io/)
- [On-Premise Vs Cloud Solutions: Which Is The Best For Your Business?](https://strapi.io/blog/on-premise-vs-cloud-solutions-which-is-the-best-for-your-business)
- [Deploying Strapi MySQL on a Traditional Hosting Provider](https://strapi.io/blog/deploying-strapi-my-sql-on-a-traditional-hosting-provider)
- [How to Deploy and Scale Strapi on a Kubernetes Cluster](https://strapi.io/blog/how-to-deploy-and-scale-strapi-on-a-kubernetes-cluster-1-2)

Continue discussing this topic further or connect with more people using Strapi on our [Discord community](https://discord.com/invite/strapi). It is a great place to share your thoughts, ask questions, and participate in live discussions.

[![Strapi Demo](/uploads/Strapi_Demo_be3d83686a.png)](https://strp.cc/3KwOx7w)


Learn the differences between Next.js and SvelteKit and which frameworks will best suit your next Strapi application. 

Next.js or SvelteKit: Which One is Better for Your Next Strapi App?

medium_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

small_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

thumbnail_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

Next.js vs SvelteKit: Which One is Better for Your Next Strapi App?

React and Strapi are two popular technologies in the developer ecosystem, and they make a powerful combination for building applications. [React](https://react.dev/) is a widely-used JavaScript library for building user interfaces that allow developers to create reusable components for building complex and interactive web applications. [Strapi](https://strapi.io/) is an open-source headless CMS that lets developers choose their favorite tools and frameworks while allowing editors to manage and distribute their content using their application's admin panel.

By using React for the front-end and Strapi for the back-end, developers can create a seamless user experience that is fast, reliable, and customizable. Strapi's flexible content modeling and REST API capabilities make managing and retrieving data easy. At the same time, React's component-based architecture provides a powerful toolkit for building interactive and dynamic UIs.

In this tutorial, you will learn how to build a meme generator application that enables users to create and alter humorous pictures or videos. You will use React to retrieve memes from Strapi and add text of your choice.

## Prerequisites

Before we start, we need to equip ourselves with the following:

1. Install [N](https://nodejs.org/en)[ode](https://nodejs.org/en) on your local machine. 
2. Basic understanding of Strapi - [get started](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html) with this quick guide.
3. Basic knowledge of React.js. 


## Creating a New React App

If you have at least npm version 5.2, we can use the tool npx to create a new React project. Check out the [React documentation](https://reactjs.org/) to learn more, and then proceed with the steps below to create a new React app.

But first, ensure node.js is installed on your system. 

Next, we need to create a new directory, `Memegen` 
```bash
    mkdir Memegen && cd Memegen
```

Then, run the command below to create the React app:
```bash
npx create-react-app name-of-project
```
OR 
```bash
npm create-react-app name-of-project
```
  
Running this command will initially ask permission to install React temporarily and its associated packages. Once finished, you can start the app by running the command below.
```bash
npm start
```

This should open up the URL ([http://localhost:3000](http://localhost:3000)) on your default browser.

## Designing the Meme Generator

Meme Generator is very easy to use. The app design is straightforward. When creating memes, the user can only change the image and the text, so you don't have to worry about formatting or design. 

We will design a meme generator app for our project. First, open your React app  `Memegen` in a code editor, navigate through the src folder, and create a file  `meme.jsx`, and paste the code below: 
```js
    import react from "react";
    import "./style.css";
    function Meme() {
      return (
        <div className="meme-container">
          <nav className="navbar">
            <img className={props.memeLogo} src="" alt="memeLogo" />
            <p className="title">Strapi Meme Generator</p>
          </nav>
          <div className="input-field">
            <input
              type="text"
              placeholder="Enter the first line..."
              name="firstline"
            />
            <input
              type="text"
              placeholder="Enter the second line..."
              name="secondline"
            />
          </div>
          <button className="generateBTN">Load random image</button>
        </div>
      );
    }
    export default Meme;
```

Following that, add a logo to our nav bar. Navigate to your src folder and replace the code within the App.jsx with the following:
```js
    import react from "react";
    import Meme from "./meme.jsx";
    import "./style.css";
    import memeLogo from "./images.jpg";
    function App() {
      return (
        <div className="app-container">
          <Meme memeLogo={memeLogo} />
        </div>
      );
    }
    export default App;
 ```   

To get the logo image, you can download any meme image, paste it into your src folder, and save it as `images.jpg`. 

From the code above, pass memeLogo as a prop to the **meme** component. Next, create another file `style.css``,` in our src folder for a little styling.
```js
    *{
        margin: 0px;
        padding:0px;
        box-sizing:border-box;
        font-family:sans-serif;
        user-select:none;
        color: white;
    }
    .memeLogo{
    height:90px;
    }
    .app-container{
       max-width: 400px;
       height: auto;
       background-color: black;
       margin: 30px auto;
       border-radius: 35px; 
       overflow: hidden;
       border-radius: 15px;
    }
    .navbar{
        display:flex;
        align-items: center;
        justify-content: space-between;
        background-color: #1c1c1c;
        padding: 6px 33px;
        width: 100% ;
    }
    .title{
        font-size: 16px;
        font-weight: bold;
        color: #94BD9C ;
    }
    .input-field{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin: 18px 0px;
    }
    input{
        padding: 9px;
        font-size: 15px;
        margin: 5px 2px;
        color: black;
        width: 180px;
        border: none;
        outline: none;
        background-color: white;
        color: black;
        border-radius: 9px;
    }
    ::placeholder{
        color: black;
    }
    input:focus{
        outline:2px solid #ffbd08;
        color:black;
    }
    .generateBTN{
        margin:1px auto;
        padding:9px;
        background-color:#6aca7d ;
        color: black;
        font-weight: bold;
        margin-left: 30%;
        border-radius: 9px;
    }
    .generateBTN:active {
        background-color: #4ed08a;
    }
    .meme-image{    
        margin: 21px auto;
    }
    .imageMeme {
    max-width: 350px;
    height: auto;
    margin: 12px 10px 20px 25px; 
    border-radius: 9px;  
    border: 2px solid white;
    }
    .first{
        position: absolute;
        top:18rem;
        /* right: 5px; */
        padding-left: 50px;
        color: white;
    }
    .second{
        position: absolute;
        top:28rem;
        /* right: 5px; */
        padding-left: 220px;
        color: white;
    }
```
 
Ensure your `src/index.js` is the same as this:
```js
    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App.jsx";
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
```    

If you follow this tutorial, your browser should display something similar to the image below.
![Strapi Meme Generator.png](/uploads/Strapi_Meme_Generator_a123a673c5.png)

## Setting up Strapi Project

To set up Strapi for our project, first, create a new directory in Command Prompt (CMD) mkdir strapi-back-end, and then run the command below to create a new Strapi project:

```bash
    npx create-strapi-app@latest my-project --quickstart
```
or
```bash
    yarn create strapi-app my-project --quickstart
```

When you run the command above, you will be prompted to choose your preferred installation method; select Quick Start to proceed. As shown in the screenshot, you will also be asked if you want to use a template; if you do not, Strapi will complete the installation quickly.
After the installation, the Strapi app should launch in your browser and display the following page. Or copy and paste the [http://localhost:1337](http://localhost:1337) link from your cmd into your browser.
![Strapi Quick Installation](/uploads/Strapi_Quick_Installation_a006eff112.png)

Enter the **open the administration,** then signup or log in if you have already registered. You should have a page on your browser like this:
![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_69325a3afc.png)

## Integrating Meme with Strapi

Now upload meme images into your Strapi back-end using the media library.

[Media](https://docs.strapi.io/user-docs/media-library) [L](https://docs.strapi.io/user-docs/media-library)[ibrary](https://docs.strapi.io/user-docs/media-library) allows you to upload images, videos, audio, or documents. Using the media library, you can quickly find the right asset, edit it, and reuse it.

Now, on your Strapi admin pane, go to settings, and click on media. If not enabled, enable responsive friendly upload, and save.
![Media Library Settings](/uploads/Media_Library_Settings_fb91a8d562.png)

**Uploading Meme Images into Media Library**
We have completed the configuration of our media library. It will appear on your dashboard automatically. Next, click on the media library, then click on the add new assets button, add any meme image, and hit **upload 1 asset to the media library** just like the image below.
![Upload Media Library](/uploads/Upload_Media_Library_d3f6555f2d.png)

**Creating Collection Types**
To make a collection type, go to the content-type builder on your admin homepage and create a new collection type called Meme which carries two fields: 

- name: text 
- meme: single media

The name has a text field, whereas the meme has a media field where we will publish all of our meme images.
> Note: don’t forget to enable the permissions for `find` and `findOne`.  You can do that by going to settings > roles > public and choosing the meme content type. 
![Collection Type](/uploads/Collection_type_d69abfa1ba.png)

Next, we must publish the meme images uploaded to our media library. To do so, go to the **Content Manager**, select **Meme** collection type, and click the **Create New Entry** button.
![Content Manager Strapi](/uploads/Content_Manager_Strapi_209b3522b4.png)

Next, fill in the input field name and a meme image from the media library. Save and Publish. You can publish as many meme images as you want for your project.
![Create Entry Strapi](/uploads/Create_Entry_Strapi_dadaecb038.png)

After that, navigate to Settings, choose Roles, and select Public. To allow all application activities, we scroll down to Permissions, click on Meme, and then **select all**. This procedure allows us to access our API completely.  

## Generating Meme from Strapi Back-end

Now you will fetch the meme images from the Strapi back-end to our meme generator application. Strapi API does not retrieve relations, media fields, components, or dynamic zones by default. We'll use the populate parameter to retrieve all fields from our API. For more information, visit Strapi [populating fields](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html). Next, navigate to src/meme.jsx and add the following code:
```js
    import react from "react";
    import "./style.css";
    import React, { useState, useEffect } from "react";
    function Meme(props) {
      const [appData, setAppData] = useState({
        firstline: "",
        secondline: "",
      });
      // const [newMemeData, setNewMemeData] = useState([]);
      const [memeList, setmemeList] = useState([]);
      const [randomMeme, setrandomMeme] = useState(null);
      function meme() {
        fetch("http://localhost:1337/api/memes?populate=meme")
          .then((res) => res.json())
          .then((meme) => {
            setmemeList(meme.data);
          });
      }
      useEffect(() => {
        meme();
      }, []);
      function getRandomMeme() {
        const randomNumber = Math.floor(Math.random() * memeList.length);
        let randomMemeURL =
          memeList[randomNumber].attributes.meme.data.attributes.url;
        setrandomMeme(randomMemeURL);
      }
      function enterLine(event) {
        setAppData((prevAppData) => {
          return {
            ...prevAppData,
            [event.target.name]: event.target.value,
          };
        });
      }
      console.log(appData);
      return (
        <div className="meme-container">
          <nav className="navbar">
            <img className="memeLogo" src={props.memeLogo} alt="memeLogo" />
            <p className="title">Strapi Meme Generator</p>
          </nav>
          <div className="input-field">
            <input
              type="text"
              placeholder="Enter the first line..."
              name="firstline"
              onChange={enterLine}
              value={appData.firstline}
            />
            <input
              type="text"
              placeholder="Enter the second line..."
              name="secondline"
              onChange={enterLine}
              value={appData.secondline}
            />
          </div>
          <button className="generateBTN" onClick={getRandomMeme}>
            Load random image
          </button>
          {randomMeme !== null && (
            <div className="meme-image">
              <img
                className="imageMeme"
                src={`http://localhost:1337${randomMeme}`}
                alt="Meme Not Responding "
              />
              <h2 className="first">{appData.firstline}</h2>
              <h2 className="second">{appData.secondline}</h2>
            </div>
          )}
        </div>
      );
    }
    export default Meme;
```    

Let's examine how the functions mentioned in the code above work in our project.

- meme(): it uses the populate parameters to retrieve all of our data from the Strapi back-end.
- getRandomMeme(): This function is used to retrieve random meme images.
- enterLine(event): We use this function to compute the text on our meme image.

## Testing our project
Since the data in our application depends on Strapi, we must first start the Strapi server because the application won't run otherwise. First, open a new terminal window, change to the directory where our Strapi app was created, and launch the app by typing the following commands:
 ```bash 
 npm run develop
 ```
 To run your React app: 
 ```bash
 npm start
 ```
Whenever you click the **Load Strapi Meme** button, a random image will appear on your meme generator app, just like the image below.
![Meme Generator App](/uploads/Meme_Generator_App_b3321f2d74.png)

Adding text to a generated meme image: 
![Meme Generator App_](/uploads/Meme_Generator_App_b0f270395b.png)

## Conclusion
We used React js to create a meme generator app, add meme images to our media library, and share them on our meme field. We also obtained the media API by using the populate parameter.
Furthermore, by clicking the Load Strapi Meme button, we could send a random image from our Strapi API to our meme generator application. You can expand the functionality of your application.

Here's a link to codes on my [GitHub](https://github.com/lucky4242/Strapi-memegen) repository.

If you would like to learn more about how to customize a Strapi and React-powered application, check these resources: 
- [Strapi Authentication with React](https://strapi.io/blog/strapi-authentication-with-react)
- [Implementing A/B Testing With Strapi, React, and Optimizely](https://strapi.io/blog/implementing-a-b-testing-with-strapi-react-and-optimizely)
- [Strapi Internals: Customizing the Backend](https://strapi.io/blog/strapi-internals-customizing-the-backend-part-1-models-controllers-and-routes)

Continue discussing this topic further or connect with more people using Strapi on our [Discord community](https://discord.com/invite/strapi). It is a great place to share your thoughts, ask questions, and participate in live discussions.

[![Strapi Cloud is now available](/uploads/Strapi_Cloud_is_now_available_951cf56fec.png)](https://strp.cc/40Us0Z9)


Create a meme generator with React using Strapi to retrieve memes & add custom text. Step-by-step tutorial on how to build a simple React app with Strapi.

Build an application with React and Strapi

medium_How to Build a Meme Generator with React and Strapi v4.png

small_How to Build a Meme Generator with React and Strapi v4.png

thumbnail_How to Build a Meme Generator with React and Strapi v4.png

How to Build a Meme Generator with React and Strapi v4.png

How to Build a Meme Generator App with React and Strapi v4

Build a Trello Clone Application with React and Strapi


## Strapi
[Strapi is the world-leading node.js open-source headless CMS.](https://strapi.io/) Strapi simplifies our development process, making it easier to access our content by providing us fast and secure APIs built in an efficient and scalable manner.

## Jekyll
[Jekyll is a simple blog-aware static site generator used for creating personal websites, blogs, documentation websites, corporate websites, etc.](https://jekyllrb.com/) Jekyll was built with the Ruby programming language, and it uses the liquid templating engine as its templating engine. Jekyll is also the engine that powers GitHub pages.

## Tailwind CSS
[Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.](https://tailwindcss.com/) By using Tailwind, we can write our CSS directly in our HTML classes. This leads to faster development time since writing CSS this way is much easier.

## Snipcart
[Snipcart is an easy-to-implement shopping cart platform.](https://snipcart.com/) With Snipcart, you can create a seamless online buying experience no matter your web stack with just two lines of code.


## Prerequisites

To complete this tutorial series, you need to have:

- Ruby, RubyGem, and Bundler installed locally. Visit the [installation page](https://jekyllrb.com/docs/installation/) for instructions on installing Ruby, RubyGem, and Bundler on your local machine.
- Node.js and NPM installed locally. Visit [article from Teamtreehouse](https://treehouse.github.io/installation-guides/windows/node-windows.html) for instructions on installing Node.js and NPM on your local machine.
- Git installed locally and GitHub account. [Follow the instructions here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) to install Git on your local machine. You can [c](https://github.com/)[reate a GitHub account here](https://github.com/).


## Project Setup

#### Strapi installation
The first step in our tutorial will be to install and set up Strapi as our headless CMS. **Make sure Node.js and NPM are fully installed before this step.**


- Create a new project with the following command.
```bash
   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](http://localhost:1337/admin), where you will be prompted to register your details.
![Strapi Welcome Page](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650511264132_new+strapi1.PNG)



- Add your details and click **LET’S START** to access the Strapi dashboard.
![The Strapi Dashboard](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650511300559_new+strapi2.PNG)

- We need to add a folder with the project name to the root directory of your computer. Open the folder in your preferred code editor to access the backend code and configurations.


## Jekyll and Tailwind CSS Installation and Setup

We will be using Jekyll as our preferred static site generator for this tutorial. Jekyll is a simple blog-aware static site generator used for building blogs, personal websites, corporate websites, documentation websites, etc. **Make sure Ruby, Ruby gems, and Bundler are fully installed before this step.**

#### A. Jekyll Installation
The first step in the frontend setup will be to install Jekyll locally on your computer.

For mac installation, run:
```bash
        sudo gem install bundler jekyll
```

For windows installation, run:
```bash
    gem install jekyll bundler
```

[Visit the Jekyll installation page for more information on installing Jekyll on your local computer.](https://jekyllrb.com/docs/installation/)

#### B. Adding Tailwind CSS to Jekyll
For this guide, we will be using the Jekyll starter styled with Tailwind CSS template. This template has Tailwind CSS ultimately set up with Jekyll, making our development journey more accessible and faster. To set up the starter project, [navigate to the Tailwind starter GitHub repository on your browser](http://https://github.com/taylorbryant/jekyll-starter-tailwind). 


- Click **Use this template** on the top right part of the repository.
![A Sample Screenshot](https://lh6.googleusercontent.com/B8fpsvVEY5ETl7fpLngTiovH7c8zkN10I43jMgHyEKWqIOA3_DgD_2LX84kiSNVTXv-WJbTPKCiXCrgLHFIDHJM0okb4p7bGNn8oolBy4UbocumaVpR59EbUsLWYbX0X0LlstSu8=s0)


*You will be directed to the **Create a repository** page.*

![“Create a Repository” Page](https://lh4.googleusercontent.com/ylRJtw_u-NosXqgQNKm1bC6vtHGiEKpR9kcNOikkrxsIIQig5uq-EKHRdNh_nOGLAExlf5jgbKNU5Z1jLrQT7aKBJ9vsfa7hK-oDHEP-9e-cLZqckzSj9BiuL9XMOD0OWKzVwnHe=s0)

- Add your project name as the **Repository Name**, and click **Create repository from the template** to create a new repository with the template.
![What your page should look like](https://lh3.googleusercontent.com/AcZ-53l6FWpFwKJaRkal8P1TOSVtirFDI0FHpo9ltpZxl3fBHvmDq7ne6V_pTQwShdzPxkvMzEHxLPD1bJwl_NFtlIrEnO_QgKBnOc0M6ZBRTZqKy53KBokFqklfs5ldD1Rb5cw4=s0)

- Clone the newly-created repository. 
- Navigate to the cloned repository, and run `bundle install` to install all the required gems.
- Run `npm ci` to install the required NPM packages in the project’s `package.lock.json` file, and run `npm run dev` to start the Jekyll development server.

You will be redirected to [http://localhost:4000/](http://localhost:4000/), where the development server is hosted. The page should look like this:


![The “Jekyll Starter Tailwind” Page](https://lh6.googleusercontent.com/HYEECO71l9N75uoBw6G3DViOQRV_lQ3tFGrrjrp1xggwSgOimiyh_fWyQMcCbtOtDCHiaL5Ac_QIxmOxMkJXi95jEXA208Z5ITmsIGsq_nvjF8I95rZnf6QRciixKr1sAseTsR8n=s0)


## Backend Setup
#### A. Creating the Product-Collection Types
The next thing to do is to add our products to the backend. 

- Navigate to your backend repository and start the backend with `npm run develop`. *We are using `npm run develop` instead of `npm run start` because we will be making changes to the server collection types.*

- Login to your dashboard, navigate to **Content-Types Builder**, and click **create new collection type**. Set the display name to **Product** and add the following fields to the collection type:

==> name(Text(Short text))
==> price(Number(float))
==> description(Text(Long text))
==> image(Media(single media))
==> images(Media(multiple media))
==> videos(Media(multiple media))
==> additional_information(Text(Long text))

- Click **Finished** and then click **Save** to register your changes and restart the server.

#### B. Adding a Slug to the Product-Collection Type
Next, we will be adding a dynamic auto-generated slug system to the `Product` collection type. Using a slug will make it easier to query for our products in the frontend.


- First, navigate to **Content-Types Builder** and click **Product**, then click **Add another field**. Select **UID.** 
- Set the field `slug`, and set the attached field to `name`. 
- Save your changes and click **Configure the view**, and select the `slug` field. 
- Then, set **the Editable field** off in the window that appears. 
- Click **Save** to register your changes. With the slug system fully set up, a new slug will be automatically generated in an uneditable slug field anytime you create a new product. The Slug will be created from the product name.

#### C. Adding Products to Our Backend
Now that we are done creating our collection types, we need to add products to our backend. On the Strapi dashboard, click **Product** under **COLLECTION TYPES** to navigate to the product page then click on **Configure the view** and click on product again. 


- Click **Add new entry** to create new products. You will be directed to an entry page.


![The “Add New Entry” Page](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650637475023_strapinew01.PNG)


Make sure to add many products to your backend before moving to the next step in this tutorial. After adding a product, click **publish** to publish the product.

#### D. Storing Our Products Under Different Collections
To create different product collections, we will be storing our products in different collection types. *We won’t use single types because single type requests are not retrievable in* [***Jekyll with the Strapi-Jekyll plugin.***](https://github.com/strapi/jekyll-strapi/issues/14)

To create the collection, navigate to **Content-Types Builder** and click **create new collection type**. Add your collection name as the **Display name**, and add the following fields to the collection type:


- products(Text(Short text)):

To connect products to a collection, select the collection and click **Add another field**. Select **Relation**, select `product` on the left menu, and set the **relation** field to `The collection name has and belongs to many products`, ie.

![What your page should look like](https://lh4.googleusercontent.com/laHL0ZGp9MsK2E_Z_6bNYeR8o6CE0mbWpMezA49VyAsYAZRy9uD89MKCUNroXn7JjG6yOj6e6xY_S_9H4yJypVTYmMS394UxEDVIyBlD6yjSP-6rebxkcC1NrnUjA1LSyUiWB-C-=s0)


For this tutorial, I will be using four product collections:

- BestSellers
- Gadgets
- Fashion items
- Weekend deals

Click **Save** to register your changes. Please make sure to create these product collections as they will be needed going forward.

#### E. Adding Products to Your Collections
To add your products to your collections, 

- Click the collection name under **COLLECTION TYPES** eg(BestSellers). Click on **“configure the view”** and click on collection type (BestSeller) then click add new entry to navigate to the collection page.
- Click the **Product** dropdown menu on the left side of the page to reveal your products, and select the products you want to add to the collection.


![A sample screenshot while adding products to collection](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650640360870_strapinew02.PNG)



- Click **Save** to register your changes and **Publish** to publish the collection.

#### F. Allowing Access to Our Backend
The last step in our backend setup is to allow access to our backend by editing user roles and permissions. This is done to enable our frontend to access our backend without the need for a token.

To do this, 

- Navigate settings on the Strapi dashboard. 
- Click **Roles** under **USERS AND PERMISSIONS PLUGIN** and select **Public**. 
- Tick **finds** and **findone** for all collection types and click **Save** to register your changes.

By setting the `find` and `findone` permissions, a user will make GET requests for each collection type from any medium without the server asking for any authorization.

## Conclusion

The backend setup for this part of our tutorial series is complete. You can now add products and categories to the backend. In the next part of this tutorial series, we will start implementing our frontend and create a layout for our eCommerce website. Make sure to add plenty of products to your backend before moving to the next part of the tutorial series.



large_S_7Nc4Ww.jpeg

medium_S_7Nc4Ww.jpeg

small_S_7Nc4Ww.jpeg

thumbnail_S_7Nc4Ww.jpeg

S_7Nc4Ww.jpeg

Building an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS [1 of 5]

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](https://treehouse.github.io/installation-guides/windows/node-windows.html) 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](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html)
- 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](http://ocs.strapi.io/developer-docs/latest/getting-started/introduction.html) 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.
```bash
       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](http://localhost:1337/admin), where you will be prompted to register your details.
![Strapi Welcome Page](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650511264132_new+strapi1.PNG)
- Add your details and click **LET’S START** to access the Strapi dashboard.
![The Strapi Dashboard](https://paper-attachments.dropbox.com/s_26318BFB0DBB8D55A14941CF89BF292237118B44753A4C89AB918929BA1932E8_1650511300559_new+strapi2.PNG)



## 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  

![Content Architecture Screenshot](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659793985637_new-p1.PNG)

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

![Content Type Screenshot](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659794144626_new-p2.PNG)

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.

![Content Type Screenshot](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659940648012_sapper9.PNG)

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.
```bash
     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.

```js
    <script>
      export let segment;
      const handleClick = () => {
        console.log(segment);
      };
    </script>
    <nav>
      <div>
        <h1 on:click={handleClick}>JOB FORAGE</h1>
        <ul>
          <li><a class:current={segment === undefined} href=".">Home</a></li>
          <li><a class:current={segment === "about"} href="about">About</a></li>
          <li>
            <a class:current={segment === "contact"} href="contact">Contact</a>
          </li>
          <li><a class:current={segment === "Jobs"} href="Jobs">Jobs</a></li>
        </ul>
      </div>
    </nav>
    <style> 
      nav {
        background: #fff3ef;
      }
      nav div {
        max-width: 960px;
        padding: 0 10px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
      }
      h1 {
        margin-top: 20px;
        font-size: 30px;
        font-weight: bold;
        /* display:flex; */
        text-align: left;
      }
      ul {
        padding: 0;
        margin: 0;
        text-align: right;
      }
      li {
        display: inline-block;
      }
      a {
        text-decoration: none;
        padding: 1em 0.5em;
        display: block;
      }
      a.current {
        border-bottom: 3px solid #ff3e00;
      }
    </style>
```
 
Click on `src/component/footer.svelte`, and include the code below. 
```html
    <footer>copyright 2022 by Opuama Lucky</footer>
    <style>
      footer {
        color: #bbb;
        text-align: center;
        padding: 20px;
        max-width: 400px;
        margin: 40px auto 0;
        border-top: 1px solid #f2f2f2;
      }
    </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. 
```html
     <svelte:head>
      <title>Begining sapper</title>
    </svelte:head>
    <div>
      <img src="jet.jpg" alt="" />
      <h1>Job Nina</h1>
      <p>find your next assignment right here</p>
      <a href="Jobs" class="btn">View Job</a>
    </div>
    <style>
      h1,
      p {
        text-align: center;
        margin: 0 auto;
      }
      h1 {
        font-size: 2em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0 0.5em 0;
      }
      img {
        width: 200px;
        margin: 0 auto;
        display: block;
      }
      a {
        margin: 40px;
      }
      div {
        margin-top: 60px;
        text-align: center;
      }
      @media (min-width: 480px) {
        h1 {
          font-size: 4em;
        }
      }
    </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.

```js
    <script>
      import Nav from "../components/Nav.svelte";
      import Footer from "../components/Footer.svelte";
      export let segment;
    </script>
    <Nav {segment} />
    <main>
      <slot />
    </main>
    <Footer />
    <style>
      main {
        position: relative;
        max-width: 960px;
        padding: 60px 10px;
        margin: 0 auto;
      }
    </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](https://axios-http.com/docs/intro).

Run the following command on cmd /terminal
```bash
    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`).

```js
    <script>
      import { onMount } from "svelte";
      import axios from "axios";
      let jobs = [];
      let error = null;
      
      const getJobs = () => {
        axios.get("http://localhost:1337/api/Jobs").then((res) => {
          jobs = res.data.data;
          console.log(jobs\["id"\]["attributes"]["Name"]);
          return { jobs };
        });
      };
      onMount(getJobs);
    </script>
    <style>
      ul{
        padding:0px;
      }
      li{
        list-style-type:none;
        padding: 10px;
       
      }
      ol li {
        font-weight: bold;
        font-size: 24px;
      }
        .btn{
        display:block;
        padding:15px;
        border:1px solid #6b3fca;
        border-radius:8px;
        background-color: #6b3fca;
        margin:10px auto;
        text-decoration:none;
      }
       a:hover{
        background-color:#9f43e5;
      }
      div{
        text-align:center;
      }
       ol li ul{
        display:none;
    }
     ol li:hover ul{
        display: block;
    }
    </style>
    <main>
    <div>
      <h1>All Current Jobs</h1>
      <hr />
      </div>
      {#await jobs}
        loading...
      {:then jobs}
        <ol>
          {#each jobs as jobs}
            <li > {jobs\["attributes"\]["Name"]}
              <ul>
                <li>Salary:  ${jobs\["attributes"\]["Salary"]}</li>
                <li>Job Requirement:  {jobs\["attributes"\]["Experience"]}</li>
              </ul>
            </li>
          {/each}
        </ol>
      {:catch error}
        {error}
      {/await}
      <div>
        <a href="/Jobs/create" class="btn" >Add a Job </a>
      </div>
    </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`).

```html
    <style>
    h2{
        text-align: center;
    }
    form{
        max-width: 360px;
        margin:40px auto;
        text-align:center;
    }
    input, textarea{
    display:block;
    width:100%;
    padding:10px;
    font-family:arial;
    margin:10px auto;
    border:1px solid #eee;
    border-radius:8px;
    }
    </style>
    
    
    <script>
        import { onMount } from 'svelte';
        import axios from 'axios'
        
        let allJob_type = [];
        let title = "";
        let salary = "";
        let Jobtype = [];
        let details = "";
        let error = null;
        
        
        async function handleSubmit() {
            try {
                const response = await axios.post("http://localhost:1337/api/Jobs", {
                   data: { Name: title,
                    Salary: salary,
                    Experience: details,
                    Job_types: Jobtype,
                   },
                });
                Jobtype=response.data.data
                
            } catch(e) {
                error = e
            }
        }
        onMount(async () => {
        try {
            const response = await axios.get('http://localhost:1337/api/job-types');
            allJob_type = response.data.data
            console.log(allJob_type);
        } catch(e) {
            error = e
        }
    });
        
        </script>
        
        {#if error !== null}
          {error}
        {:else}
           <h2>Add a Job </h2>
           <form>
            <input type ="text" placeholder="Job Title" bind:value={title} required >
            <input type ="number" placeholder="Amount $" bind:value={salary}  required >
            <textarea type ="text" placeholder="Job Requirement" bind:value={details}  required></textarea> 
             <br />
            Select Job_type
            <br />
            {#each allJob_type as jobtype}
                <label>{jobtype\["attributes"\]["name"]}</label>
              <input type="checkbox" bind:group={Jobtype} value={jobtype} />
            {/each} 
            <input type="submit" value="Submit" on:click={handleSubmit} />
        </form>
        
        {/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.
![Home page](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659934524856_sapper3.PNG)

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

![Available Jobs](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659934586864_sapper5.PNG)

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

![Form](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659934721833_sapper8.PNG)

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

![Form result](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659934780562_sapper6.PNG)

Go to Strapi database and refresh.

![Updated data](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1659934845553_sapper7.PNG)

## 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](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners) and you will be fine. [Click here to sign up](https://github.com/) as well.

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

![push confirmation](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1661983592326_sapper10.PNG)

Let us now deploy to Netlify. If you are new, [sign up and register.](https://app.netlify.com/signup) 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.

![netlify deploy](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1661985866703_sapper11.PNG)

## Testing the Project

Before testing the project, ensure that Strapi app is still running on your system. To run Strapi app,
```bash
    npm run develop   
```
Still on Netlify, click on **open production deploy.** 

![after deploy](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1661986780063_sapper14.PNG)

![screenshot](https://paper-attachments.dropbox.com/s_480CA2CD7567A4F46D7F68D596F156F4E4B52EDCE9074CAEBFF2E800B8E2D5D1_1661986560908_sapper13.PNG)

## 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](https://github.com/lucky4242/sapper) for this tutorial.




This article will show you how to build a job search platform using Sapper with Strapi as database and then deploy it to Netlify.