# News Feed Frontend Tutorial By [0rbit](https://paragraph.com/@0rbit) · 2024-05-13 --- 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/2c43ba9e156ea8ea1caf5f0a373f69b3.png) Now inside your `frontend` directory, run: `npm run dev` Great! Now you should have a page that looks like this: ![](https://images.mirror-media.xyz/publication-images/Z4mBJulSTdPaEd1qICsCu.png?height=800&width=1600 "null") 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://images.mirror-media.xyz/publication-images/BLNqHa1y1Yuy_zW6_Pkq3.png?height=800&width=1600 "null") 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/news-feed-frontend-tutorial)*