# News Feed Frontend Tutorial 

By [0rbit](https://paragraph.com/@0rbit-2) · 2024-05-05

---

gm gm gm!!💫f

Today we will be building Frontend for the **News Feed Contract** built with `0rbit` in the last blog. Check it out here:

_Pre-Requisites_
----------------

1.  A basic understanding of `aos`
    
2.  A basic understanding of any frontend framework _In our case, we’ve used a React project with TypeScript using Vite_
    
3.  Understand the previous blog
    

**Now to build the frontend for the News Feed Contract, we’ll do the following:**

Create a React + TypeScript Project with the given template
-----------------------------------------------------------

Let's initialise our frontend project:

Go to the directory where you want to have your project and run:

    git clone URL HERE
    

You can also initialize a React project with TypeScript using Vite yourself for a custom ui! See how [here.](https://vitejs.dev/)

> Yayy!! **🎉** you should now have the ui template set up.

Install the Required Dependencies
---------------------------------

The `@permaweb/aoconnect` package includes all the main tools you need to interact with your Lua programs and the aos network.

    npm install
    npm install @permaweb/aoconnect
    

Add The `contracts` Folder to the Project Setup
-----------------------------------------------

For a clean separation of concerns, place your existing lua code in a new folder named `contracts` at the project root.

For understanding the code written in the contracts folder, feel free to visit here and comeback later. 😉

This is how your Folder Structure should look after following the mentioned steps.

![](https://storage.googleapis.com/papyrus_images/6634108c4ea342909f13740162f4b974f9bc4886386e23a9037ad1b58deaac97.png)

Now inside your `frontend` directory, run:

    npm run dev
    

Great! Now you should have a page that looks like this:

![](https://storage.googleapis.com/papyrus_images/a45b8dc3a5d8e952f6dc19dd81b04a9cc3802db4a6b443296869108688e4ec57.png)

Implement `getNews.ts` :
------------------------

Create a new folder named `utils` in `src` folder and make a new file `getNews.ts` in it.

We will be using DryRun for our call.

> DryRun is the process of sending a message object to a specific process and getting the Result object back, but the memory is not saved, it is perfect to create a read message to return the current value of memory.

We create an asynchronous function `getNews` which calls `GetNews` Handler and returns a `news` Array.

    import { dryrun } from "@permaweb/aoconnect";
    
    const getNews = async () => {
    };
    export default getNews;
    

`DryRun` requires a `process`, to which the request is to be sent. We will also be sending a `tag` of `name= “Action”` and `value = “Get-News”` . This makes a call to `GetNews` Handler.

This returns an object with `Messages`, `Spawns`, `Output` and `Error` . Here, we will read the `Messages` array which is an array of the messages sent by the respective handler.

*   Tip: Make sure to replace the `process` attribute with the Process\_ID where you have loaded the `news-feed.lua` contract.
    

    const result = await dryrun({
        process: YOURPROCESSID, 
        // test on TwH9Qqw8ChJQJrNUxO9-cKzdryLRC8EH17YecaP7Pyc
        tags: [{ name: "Action", value: "Get-News" }],
      });
    };
    

`Messages` array object has another array of `Tags` related to the message, here the first 6 tags give us information on the message sent by the handler and the rest give us our news array.

To access this we access the 1st (0th index) element of `Messages` and get the `Tags` array from it.

Make sure to check the length of the `Tags` array if not more than 6, no news is returned.

    const news = result.Messages[0].Tags;
    if (news.length == 6) {
        return "Error";
    } else {
      return news;
    }
    

> You just completed your first interaction with an AO process using AOConnect! 🥳 You should definitely be proud of yourself!! Your final `getNews.ts` should look like this:

    import { dryrun } from "@permaweb/aoconnect";
    
    const getNews = async () => {
    
      const result = await dryrun({
         process: YOURPROCESSID, 
        // test on TwH9Qqw8ChJQJrNUxO9-cKzdryLRC8EH17YecaP7Pyc
        tags: [{ name: "Action", value: "Get-News" }],
      });
    
      const news = result.Messages[0].Tags;
      
      if (news.length == 6) {
        return "Error";
      } else {
        return news;
      }
      
    };
    
    export default getNews;
    

Modify the `NewsDisplay.tsx` file:
----------------------------------

The final step is to utilize the `getNews` function and display it on the Frontend. You're encouraged to style the component according to your desired aesthetics.

Youll find the NewsDisplay.tsx file in `src/Components` folder. We will be Focussing on the `fetchNewsHandler` function.

Heres how it should look initially:

    const fetchNewsHandler = async () => {
        setIsLoading(true);
        try {
          // FETCH HERE
        } catch (error) {
          setMessage("Error Occured. Please Contact Support on Discord");
          console.error();
          error;
        }
        setIsLoading(false);
      };
    

Right under the FETCH HERE comment lets call our getNews function. Make sure to import it at the top too.

    import getNews from "../utils/getNews";
    

    const fetchNewsHandler = async () => {
        setIsLoading(true);
        try {
          // FETCH HERE
          const news = await getNews();
        } catch (error) {
          setMessage("Error Occured. Please Contact Support on Discord");
          console.error();
          error;
        }
        setIsLoading(false);
      };
    

Now lets set our `newsArr` and `message` to be displayed based on recieved return.

    const fetchNewsHandler = async () => {
        setIsLoading(true);
        try {
          // FETCH HERE
          const news = await getNews();
          
          if (news == "Error") {
            setMessage("Error Occured. Please Contact Support on Discord");
            setIsLoading(false);
            return "Error";
          } else {
            setMessage("Latest News, with 0rbit");
            setNewsArr(news);
          }
          
        } catch (error) {
          setMessage("Error Occured. Please Contact Support on Discord");
          console.error();
          error;
        }
        setIsLoading(false);
      };
    

> Note: make sure when mapping the newsArr to only display tags after 5th index, the ones with the news!

Please visit [http://localhost:5173/](http://localhost:5173/). Upon arrival, the interface should resemble the following image. Click the `"Get News"` button to retrieve the latest news that 0rbit fetched. After clicking, the news headlines and details should become visible!

![](https://storage.googleapis.com/papyrus_images/1bba67b0a6aa4bf1e09b34f168739acb18fff825e4d0e55508bd819e7546d99c.png)

You just built a fullstack dapp on `AO` using `0RBIT`
-----------------------------------------------------

Here is the repo for this project.

[https://github.com/0rbit-co/news-feed-tutorial](https://github.com/0rbit-co/news-feed-tutorial)

If you run into any problems, a good first step is to compare your code to this repo and resolve any differences.

Tweet us @[0rbitco](https://twitter.com/0rbitco) letting us know you just built a dapp using 0rbit, you might get invited to a private group of builders or maybe get alpha on the project, or something 👀.

Need Help?
----------

Get help from the team by posting your question in the [0RBIT Discord Channel.](https://discord.gg/KWPkD96vdv) 💫

---

*Originally published on [0rbit](https://paragraph.com/@0rbit-2/news-feed-frontend-tutorial)*