diff --git a/data/blogs/api-architectural-style.mdx b/data/blogs/api-architectural-style.mdx
index 0d90892..532141d 100644
--- a/data/blogs/api-architectural-style.mdx
+++ b/data/blogs/api-architectural-style.mdx
@@ -1,8 +1,8 @@
---
title: "API Architectural Styles"
date: "March 23, 2023"
-excerpt: "What are the API architectural styles"
-cover_image: "/images/api.jpg"
+subtitle: "What are the API architectural styles"
+cover_image: "/images/api-architectural-style.png"
href: "/blogs/api-architectural-style"
tags: "Open Source, API, GraphQL, WebHooks, Web Sockets, REST, API Development, Protocol, JavaScript, gRPC"
url: "https://ayushsoni1010.hashnode.dev/api-architectural-styles"
diff --git a/data/blogs/build-an-api-with-serverless-functions-in-nextjs.mdx b/data/blogs/build-an-api-with-serverless-functions-in-nextjs.mdx
new file mode 100644
index 0000000..361bcbf
--- /dev/null
+++ b/data/blogs/build-an-api-with-serverless-functions-in-nextjs.mdx
@@ -0,0 +1,279 @@
+---
+title: "Build an API with Serverless Functions in Next.js"
+date: "April 01, 2023"
+subtitle: "Creating Efficient and Scalable Serverless APIs"
+cover_image: "/images/build-an-api-with-serverless-functions-in-nextjs.png"
+href: "/blogs/build-an-api-with-serverless-functions-in-nextjs"
+tags: "Open Source, JavaScript, Node.js, API, Network, Routing, Request, Response, Server, Client, React, Next.js, Hooks, Serverless Functions, Vercel"
+url: "https://ayushsoni1010.hashnode.dev/build-an-api-with-serverless-functions-in-nextjs"
+---
+
+Next.js is a React framework that provides two ways of rendering React components into HTML pages - **server-side rendering(SSR)** and **static site generation(SSG).**
+
+In SSR, React components are rendered into HTML pages on the server after a page request comes from the browser, while in SSG, React components are rendered into HTML pages at build time.
+
+Regardless of which method is used, the rendered HTML pages are sent to the browser, making the app behave like a single-page application(SPA). This is in contrast to client-side rendering, where components are rendered in the browser. With Next.js, you can enjoy the benefits of both SSG and SSR, such as improved performance and better SEO. In addition to these features, Next.js also offers Serverless Functions, which we’ll be covering in this article.
+
+We'll cover the Next.js page and dynamic routes and learn about Next.js API and dynamic API routes, all while running Serverless Functions on Vercel, a platform designed specifically for Next.js applications.
+
+### **💎Introduction to Serverless Functions in Next.js**
+
+The term “serverless functions” is just a naming convention. AWS calls it Lambda Functions, but Vercel calls them their Serverless Functions, they are the same thing.
+
+Serverless Functions are not directly a part of the Next.js API. However, Next.js provides developers with API routes that can be deployed as Vercel Serverless Functions and this is the crux of this article.
+
+### **💎Pre-requisites**
+
+To benefit the most from this article, the following pre-requisites are required:
+
+- Basic understanding of JavaScript
+- Basic understanding of Next.js
+- Basic understanding of API design
+- The latest Node version is installed on your system.
+
+### **💎Setting up our application**
+
+We will start by bootstrapping the Next.js application and using `create-next-app` to automatically set everything up. To create a Next.js project, run the following command:
+
+```jsx
+yarn create-next-app
+```
+
+After the installation is complete, start your app by running `yarn dev`. When you visit [localhost:3000](http://localhost:3000) you will get:
+
+
+
+### **💎Page routes in Next.js**
+
+In Next.js, each page is driven by a component. For example, an “About” page will have an `About` component. Each page component has a file inside a `page` folder, thus, the file name and location of each page component are tied up to the particular page’s route.
+
+To elaborate on this, navigate your browser to [localhost:3000/about](http://localhost:3000/about) and you will get:
+
+
+
+The `404` page shown above simply shows that Next.js cannot find a component in the `page` folder called `about`. This is because we have not created an `About` component in the `pages` folder.
+
+To resolve this, create an `about.js` file inside the `pages` directory and add the following code:
+
+```jsx
+const About = () => {
+ return (
+
+
Hello World!
+
+ );
+};
+export default About;
+```
+
+Now, revisit to [localhost:3000/about](http://localhost:3000/about) and you get:
+
+
+
+When we created the `About` component in the `pages` folder, Next.js automatically created a route to server the `About` component. Thus, the route name is tied to the filename.
+
+### **💎Dynamic routes in Next.js**
+
+Next.js pages support [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes). This is useful because complex applications require more than just defining routes by using predefined paths.
+
+In Next.js, you can add brackets to a page component name, `[param.js]` to create a dynamic route for example. The page can be accessed via its dynamic route: `pages/users/[param].js`. Here, `[param]` is the page’s id, slug, pretty URLs, etc. Any route like `/users/1` or `/users/abcdef` can be matched.
+
+Next.js will send the matched path parameter as a query parameter to the page and if there are other query parameters, Next.js will link the matched path parameter with them.
+
+To elaborate on this, the matched route `/users/abcdef` of dynamic route `pages/users/[param].js`, will have the query object:
+
+```jsx
+{
+ "param":"abcdef"
+}
+```
+
+Similarly, the matched route `/users/abcdef?foo=bar` of a dynamic route, `pages/users[param].js`, will have the following query object:
+
+```jsx
+{
+ "foo":"bar",
+ "param":"abcdef"
+}
+```
+
+In your application, create a `user` folder, and inside it create a component named `[username].js`. Add the following code:
+
+```jsx
+import { useRouter } from "next/router";
+const User = () => {
+ const router = useRouter();
+ const username = router.query["username"];
+ return (
+
+
Hello! Welcome {username}
+
+ );
+};
+export default User;
+```
+
+Now, when you visit [http://localhost:3000/users/ayushsoni1010](http://localhost:3000/users/ayushsoni1010), you get the display content would be `Hello! Welcome ayushsoni1010`.
+
+
+
+From the above demonstration, you see that Next.js matched `/users/ayushsoni1010` with the dynamic route `pages/users/[username].js`. Thus whatever `username` is passed in the route will be displayed on the page. You can try out different usernames.
+
+In addition to it, creating and serving pages with the page routes, Next.js can create APIs with the API routes. Based on our knowledge gained so far, let’s learn about Next.js API routes in the next section.
+
+### **💎 API Routing with Next.js Serverless Functions**
+
+[API routes were introduced in Next.js v9](https://nextjs.org/blog/next-9). They enable us to build backend application endpoints, leveraging hot reloading, and a unified build pipeline in the process.
+
+What this means is that Next>v9 encapsulates both the frontend and backend. We can rapidly develop full-stack React and Node.js applications that scale effortlessly.
+
+While the page routes serve Next.js pages as web pages, Next.js API routes are treated as an endpoint. The API routes live inside the `/pages/api` folder and Next.js maps any file inside the folder to `/api/*` as an endpoint.
+
+This feature is very interesting because it enables Next.js to render data on the frontend that is sorted in the Next.js app or render data that is fetched using Next.js API routes.
+
+By bootstrapping your application with `creat-next-app`, Next.js automatically creates an example API route, the `/pages/api/hello.js` file, for you. Inside `/pages/api/hello.js`, Next.js creates and exports a function named `handler` that returns a JSON object.
+
+You can access this endpoint via the browser by navigating to [http://localhost:3000/api/hello](http://localhost:3000/api/hello) and the following JSON is returned:
+
+```jsx
+{
+ "name": "John Doe"
+}
+```
+
+### **💎The request handler function**
+
+As seen above, to create a Next.js API route, you need to export a request handler function as default. The request handler function receives two parameters:
+
+- `req`: an object that is an instance of `http.IncomingMessage`, and some [prebuilt middlewares](https://nextjs.org/docs/api-routes/request-helpers).
+- `res`: an object that is an instance of `http.ServerResponse`, and some [helper functions](https://nextjs.org/docs/api-routes/response-helpers).
+
+To build an API with the API route, create a folder called `data` in the root directory. Create a `post.json` file inside the data folder with the following code:
+
+```jsx
+[
+ {
+ id: 1,
+ title: "I am title 1",
+ body: "Hello from post 1",
+ },
+ {
+ id: 2,
+ title: "I am title 2",
+ body: "Hello from post 2",
+ },
+ {
+ id: 3,
+ title: "I am title 3",
+ body: "Hello from post 3",
+ },
+ {
+ id: 4,
+ title: "I am title 4",
+ body: "Hello from post 4",
+ },
+ {
+ id: 5,
+ title: "I am title 5",
+ body: "Hello from post 5",
+ },
+];
+```
+
+Now, in the `pages/api` folder, create a new file called posts.js with the following code:
+
+```jsx
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import posts from "../../data/posts.json";
+export default function handler(req, res) {
+ res.status(200).json(posts);
+}
+```
+
+In the API route above, the handler function imports the JSON data posts and returns them as a response to a `GET` request. When you query for this data by visiting [http://localhost:3000/api/posts](http://localhost:3000/api/posts) from the browser, you get:
+
+
+
+You can use the `request.method` object as seen below to handle other HTTP requests:
+
+```jsx
+export default (req, res) => {
+ switch (req.method) {
+ case "GET":
+ //...
+ break;
+ case "POST":
+ //...
+ break;
+ case "PUT":
+ //...
+ break;
+ case "DELETE":
+ //...
+ break;
+ default: // Method not allowed
+ res.status(405).end();
+ break;
+ }
+};
+```
+
+### **💎Dynamic API routes**
+
+Like page routes, Next.js API routes support dynamic routes and dynamic API routes follows the same file naming conventions and rules as page routes.
+
+To elaborate more on this, create a `posts` folder inside the `pages/api` folder. Create a file named `[postid].js` inside the `posts` folder and paste the following code to it:
+
+```jsx
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import posts from "../../../data/posts.json";
+export default function handler(req, res) {
+ const { postid } = req.query;
+ const post = posts.find((post) => post.id === parseInt(postid));
+ res.status(200).json(post);
+}
+```
+
+In the above code, Next.js automatically matched the `/posts/2` with the dynamic route `pages/api/posts/[postid].js`. Whichever post `id` is passed to the route `/posts/[postid]`: `/post/2`, `/post/3`, `/post/4`, etc. will be available in the `req.query` object.
+
+The request handler function above retrieves the passed post `id` from the `req.query` object, finds the post in the `posts` array, and sends it to the client.
+
+So to get the post with an `id` of `2`, navigate your browser to [`http://localhost:3000/api/posts/2`](http://localhost:3000/api/posts/2). You will get:
+
+
+
+### 💎Advantages of API routes
+
+Next.js API routes are deployed as Serverless Functions in Vercel. This means they can be deployed to many regions across the world to improve latency and availability.
+
+Also, as Serverless Functions, they are cost-effective and enable you to run your code on demand. This removes the need to manage infrastructure, provision servers, or upgrade hardware.
+
+Another benefit of API routes is that they scale very well. Finally, they do not specify CORS by default because they are `same-origin`, however, you can customize this behavior by using the [CORS request helper](https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts).
+
+### 💎Over to you
+
+Which APIs have you built with Next.js API routes?
+
+### 💎Conclusion
+
+In this article, we learned about an interesting and powerful Next.js feature — API routes. We began by learning about the Next.js page route and delved into API routes. We also learned how to build an API using Next API routes, deployed as Vercel’s Serverless Functions.
+
+I do hope that at the end of this article, you can build APIs using Next.js APIs Route.
+
+
+
+
+---
+
+
+
+
+That's all for today.
+
+If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.
+
+New to my profile? 🎉
+
+Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.
+
+Follow [@ayushsoni1010](https://twitter.com/ayushsoni1010) for more content like this🔥😉.
diff --git a/data/blogs/crafting-effective-chaos-error-messages.mdx b/data/blogs/crafting-effective-chaos-error-messages.mdx
index 98cd73b..5c9602a 100644
--- a/data/blogs/crafting-effective-chaos-error-messages.mdx
+++ b/data/blogs/crafting-effective-chaos-error-messages.mdx
@@ -1,8 +1,8 @@
---
title: "Crafting Effective Chaos Error Messages"
date: "March 26, 2023"
-excerpt: "Communicating Complexity with Clarity"
-cover_image: "/images/error.png"
+subtitle: "Communicating Complexity with Clarity"
+cover_image: "/images/crafting-effective-chaos-error-messages.png"
href: "/blogs/crafting-effective-chaos-error-messages"
tags: "API, GraphQL, WebHooks, Web Sockets, REST, API Development, Server, JavaScript, Content, Chaos Engineering, UX Writing"
url: "https://ayushsoni1010.hashnode.dev/crafting-effective-chaos-error-messages"
diff --git a/data/blogs/hacking-at-mlh-hackcon.mdx b/data/blogs/hacking-at-mlh-hackcon.mdx
index 8c99d05..9b806b2 100644
--- a/data/blogs/hacking-at-mlh-hackcon.mdx
+++ b/data/blogs/hacking-at-mlh-hackcon.mdx
@@ -1,8 +1,8 @@
---
title: "Hacking at MLH HackCon"
date: "December 17, 2022"
-excerpt: "A beautiful journey to HackCon India"
-cover_image: "/images/hackcon.png"
+subtitle: "A beautiful journey to HackCon India"
+cover_image: "/images/hacking-at-mlh-hackcon.png"
href: "/blogs/hacking-at-mlh-hackcon"
tags: "MLH, Open Source, Community, Hackathons, GitHub, Conference, GitHub Global Campus, Meetup, MLH Fellowship, Open Source Program, Major League Hacking, GitHub Education, GitHub Campus Experts, Community Leaders"
url: "https://ayushsoni1010.hashnode.dev/hacking-at-mlh-hackcon"
diff --git a/data/blogs/how-to-deploy-the-headless-cms-strapi-app-on-heroku.mdx b/data/blogs/how-to-deploy-the-headless-cms-strapi-app-on-heroku.mdx
index 7951274..9caf171 100644
--- a/data/blogs/how-to-deploy-the-headless-cms-strapi-app-on-heroku.mdx
+++ b/data/blogs/how-to-deploy-the-headless-cms-strapi-app-on-heroku.mdx
@@ -1,8 +1,8 @@
---
title: "How to deploy the Headless CMS Strapi app on Heroku"
date: "December 15, 2021"
-excerpt: "Get started with the Strapi headless CMS"
-cover_image: "/images/strapi.png"
+subtitle: "Get started with the Strapi headless CMS"
+cover_image: "/images/how-to-deploy-the-headless-cms-strapi-app-on-heroku.png"
href: "/blogs/how-to-deploy-the-headless-cms-strapi-app-on-heroku"
tags: "Open Source, Headless CMS, Strapi, Node.js, Heroku, PostgreSQL, Community"
url: "https://ayushsoni1010.hashnode.dev/how-to-deploy-the-headless-cms-strapi-app-on-heroku"
diff --git a/data/blogs/http-status-codes.mdx b/data/blogs/http-status-codes.mdx
index 595cd3a..d33f615 100644
--- a/data/blogs/http-status-codes.mdx
+++ b/data/blogs/http-status-codes.mdx
@@ -1,8 +1,8 @@
---
title: "HTTP Status Codes"
date: "March 25, 2023"
-excerpt: "Understanding the Meaning and Significance of HTTP Status Codes"
-cover_image: "/images/status-code.png"
+subtitle: "Understanding the Meaning and Significance of HTTP Status Codes"
+cover_image: "/images/http-status-codes.png"
href: "/blogs/http-status-codes"
tags: "Network, HTTP, Status, Errors, Codes, Protocol, Server"
url: "https://ayushsoni1010.hashnode.dev/http-status-codes"
diff --git a/data/blogs/lets-grow-with-letsgrowmore.mdx b/data/blogs/lets-grow-with-letsgrowmore.mdx
index fa75ec2..3e83f13 100644
--- a/data/blogs/lets-grow-with-letsgrowmore.mdx
+++ b/data/blogs/lets-grow-with-letsgrowmore.mdx
@@ -1,8 +1,8 @@
---
title: "Lets Grow with LetsGrowMore"
date: "September 23, 2021"
-excerpt: "A constructive blog on open source contribution program and other opportunities"
-cover_image: "/images/letsgrowmore.webp"
+subtitle: "A constructive blog on open source contribution program and other opportunities"
+cover_image: "/images/lets-grow-with-letsgrowmore.png"
href: "/blogs/lets-grow-with-letsgrowmore"
tags: "Open Source, LetsGrowMore, Community, Open Source Program, LGMSOC'21"
url: "https://ayushsoni1010.hashnode.dev/lets-grow-with-letsgrowmore"
diff --git a/data/blogs/mvc-architecture-patterns.mdx b/data/blogs/mvc-architecture-patterns.mdx
index 8ae3759..e62f5a5 100644
--- a/data/blogs/mvc-architecture-patterns.mdx
+++ b/data/blogs/mvc-architecture-patterns.mdx
@@ -1,8 +1,8 @@
---
title: "MVC, MVP, MVVM, MVVM-C, and VIPER architecture patterns"
date: "March 24, 2023"
-excerpt: "Software architectural patterns"
-cover_image: "/images/mvc.jpg"
+subtitle: "Software architectural patterns"
+cover_image: "/images/mvc-architecture-patterns.png"
href: "/blogs/mvc-architecture-patterns"
tags: "Software, MVC, Architecture, App development, iOS, Andriod, API Development, Patterns, Networking, Router"
url: "https://ayushsoni1010.hashnode.dev/mvc-architecture-patterns"
diff --git a/data/blogs/supercharge-your-react-app-with-useswr.mdx b/data/blogs/supercharge-your-react-app-with-useswr.mdx
new file mode 100644
index 0000000..dab95e5
--- /dev/null
+++ b/data/blogs/supercharge-your-react-app-with-useswr.mdx
@@ -0,0 +1,256 @@
+---
+title: "Supercharge your React app with useSWR"
+date: "March 29, 2023"
+subtitle: "Saves You the Stress of Writing Your Own Logic"
+cover_image: "/images/supercharge-your-react-app-with-useswr.png"
+href: "/blogs/supercharge-your-react-app-with-useswr"
+tags: "JavaScript, Open Source, API, Error, Client, Request, Response, React, Hooks, Next.js, Frontend"
+url: "https://ayushsoni1010.hashnode.dev/supercharge-your-react-app-with-useswr"
+---
+
+### 🚩Introduction
+
+As a developer, you might find it challenging to handle error cases while writing code. Fetching and caching data efficiently is essential for improving app performance and reducing loading time. Whether you are working with APIs, remote data fetching, or from other sources, getting data into your app quickly and reliably can be a major challenge. In this blog, we will explore how to use **useSWR**, compare its existing hooks, and show why it's better.
+
+### 🚩Pre-requisites
+
+This article assumes that you are familiar with JavaScript, React, and Next.js. It would be helpful to have a good understanding of hooks, asynchronous JavaScript, and creating custom hooks. Let's dive straight in!
+
+### 🚩How useSWR works
+
+The **useSWR**
+hook takes two parameters: key and fetcher. The key is something that uniquely identifies the data to be fetched, usually the API URL, while the fetcher is a function that returns the data. The hook returns two values: data and error, representing the request's status. These two values can be used to set a loading state and an error fallback, respectively. The significant perk of the **useSWR**
+hook offers is how it simplifies the data fetching logic, delivering API data or returning an error response with just two lines of code. Furthermore, for each request made, a cached version is first returned while the server revalidates the request and returns updated data immediately after revalidation, helping optimize the web app and improve speed.
+
+### 🚩Getting started with useSWR
+
+The name **SWR** is derived from the concept called "stale-while-revalidate," which is an HTTP cache invalidation strategy popularized by HTTP RFC 5861. It performs data fetching in 3 steps:
+
+- Returns cached data first (stale)
+- Sends the fetch request (revalidate)
+- Returns the up-to-date data
+
+The hook comes with a display of benefits which includes:
+
+- Simplicity of Logic
+- Lightweight
+- Offers revalidation
+- Easy pagination
+- Supports TypeScript and a host of other perks.
+
+To get started with **useSWR,** you first need to install it as a dependency in your React or Next project:
+
+```jsx
+yarn add swr
+or
+npm install swr
+```
+
+Once installed, you can import the **useSWR** hook and use it in your components to fetch and cache data.
+
+Let’s understand it through an example:
+
+```jsx
+import useSWR from "swr";
+
+function MyComponent() {
+ const { data, error } = useSWR("/api/data");
+
+ if (error) return
Error fetching data
;
+ if (!data) return
Loading data...
;
+
+ return (
+
+
{data.title}
+
{data.description}
+
+ );
+}
+```
+
+As you can see, useSWR provides a more straightforward and concise way to fetch and cache data in React. It handles caching and error handling automatically and provides options for polling and deduplication.
+
+### 🚩Pagination
+
+Pagination is a crucial feature of modern web applications. It helps users to navigate through large amounts of data with ease. In React, the SWR library provides an API called useSWRInfinite for implementing complex pagination patterns. However, for common pagination patterns, useSWR is sufficient.
+
+Let’s take an example below:
+
+```jsx
+function Page({ index }) {
+ const { data, error } = useSWR(`/api/data?page=${index}`, fetcher);
+
+ // ... handle loading and error states
+
+ return data.map((item) =>
{item.name}
);
+}
+
+function Pagination() {
+ const [pageIndex, setPageIndex] = useState(0);
+
+ // The API URL includes the page index, which is a React state.
+ const { data, error } = useSWR(`/api/data?page=${pageIndex}`, fetcher);
+
+ // ... handle loading and error states
+
+ return (
+
+ {data.map((item) => (
+
{item.name}
+ ))}
+
+
+
+ );
+}
+```
+
+Of course, this works if the API has a provision for pagination. Also, since SWR provides caching, the preceding and previous pages are pre-fetched or preloaded when rendered in the abstracted div element. Other types of pagination such as Infinite Loading can also be achieved easily using SWR.
+
+### 🚩Comparing useSWR and existing hooks
+
+One common approach to fetching and caching remote data in React and Next is to use **useEffect** and **useState** hooks.
+
+Let’s understand it through an example:
+
+```jsx
+import { useEffect, useState } from "react";
+
+function MyComponent() {
+ const [data, setData] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ fetch("/api/data")
+ .then((response) => response.json())
+ .then(setData)
+ .catch(setError);
+ }, []);
+
+ if (error) return
Error fetching data
;
+ if (!data) return
Loading data...
;
+
+ return (
+
+
{data.title}
+
{data.description}
+
+ );
+}
+```
+
+While this approach works, it has some limitations. For example, it requires more code to handle caching and error handling. It also doesn't provide options for polling or deduplication.
+
+Now let’s compare this with **useSWR**:
+
+```jsx
+import useSWR from "swr";
+
+function MyComponent() {
+ const { data, error } = useSWR("/api/data");
+
+ if (error) return
Error fetching data
;
+ if (!data) return
Loading data...
;
+
+ return (
+
+
{data.title}
+
{data.description}
+
+ );
+}
+```
+
+As you can see that useSWR provides a simpler and more concise way to fetch and cache data in React or Next. It handles caching and error handling automatically and provides options for polling and deduplication.
+
+### 🚩Performance comparison
+
+To compare the performance of UseSWR with `useEffect` and `useState`, we'll use the same API endpoint for both approaches: **[jsonplaceholder.typicode.com/todos](https://jsonplaceholder.typicode.com/todos)**. We'll measure the time it takes to fetch and display 100 to-do items from the API.
+
+Here's the code for fetching and displaying todo items using `useEffect` and `useState`:
+
+```jsx
+import { useEffect, useState } from "react";
+
+function TodoList() {
+ const [todos, setTodos] = useState([]);
+
+ useEffect(() => {
+ fetch("https://jsonplaceholder.typicode.com/todos")
+ .then((response) => response.json())
+ .then((data) => setTodos(data.slice(0, 100)))
+ .catch((error) => console.error(error));
+ }, []);
+
+ return (
+
+ {todos.map((todo) => (
+
+
+ {todo.title}
+
+ ))}
+
+ );
+}
+```
+
+Using this approach, it took an average of 150-200 milliseconds to fetch and display the 100 to-do items.
+
+Now let's compare this with UseSWR:
+
+```jsx
+import useSWR from "swr";
+
+function TodoList() {
+ const { data, error } = useSWR("https://jsonplaceholder.typicode.com/todos");
+
+ if (error) return