Forem: nefejames

Troubleshoot faster with Appwrite Cloud's active developer community

nefejames — Tue, 27 Jun 2023 19:34:33 +0000

Developers face several obstacles when developing applications on the cloud. One way they can overcome these challenges is by joining a vibrant and helpful developer community. Developers can significantly improve the cloud development experience and receive support by engaging with such communities.

In this article, we will discuss the common challenges cloud developers encounter and how Appwrite Cloud's active developer community can help us troubleshoot faster and build robust applications.

What is Appwrite Cloud?

Appwrite Cloud is a robust backend solution that simplifies the complexities of managing and scaling cloud infrastructure and allows developers to focus on other critical development needs. It was developed by Appwrite, an open-source end-to-end backend platform for web, cloud, and mobile developers.

Features of Appwrite Cloud

Appwrite Cloud provides the following features to help make cloud development easier.

Serverless architecture for easy scaling
Appwrite Cloud's serverless architecture eliminates the need to manage servers or infrastructure when building applications. Instead, it handles the scaling, maintenance, and management of servers automatically. This allows us to focus on building and writing code while Appwrite Cloud takes care of scaling based on demands.

Built-in user authentication and authorization
Appwrite Cloud's built-in solution handles the complexities of setting up and managing user authentication and authorization for us. This allows us to manage user access and permissions easily. It also helps save time and effort as we won't need to integrate with another system for our security needs.

Secure and scalable cloud storage
Appwrite Cloud provides secure and scalable cloud storage options, allowing us to store and manage large amounts of data without worrying about infrastructure limitations. We can easily scale the storage as needed, and it also offers robust security to help protect sensitive data.

Real-time databases
Real-time databases are another feature that Appwrite Cloud provides, and it allows us to build applications with live data update functionalities. This means that users can access up-to-date information in real time, and the database automatically syncs data across all connected devices. This feature is excellent for applications that require real-time collaboration or require users to have access to the latest information, like chat apps or forums.

Introducing Appwrite's developer cloud community

Appwrite recognizes the importance of a strong and active developer community. Appwrite's community not only fosters collaboration and idea exchange, but it also provides valuable resources and support to developers at every stage of their cloud development journey. We can access Appwrite's cloud community on Discord. Joining the community gives us access to perks like real-time assistance from professionals, code samples, tutorials, learning materials, and information on the latest product updates and announcements. We can also visit Appwrite's GitHub repository to collaborate and engage the community.

Benefits of leveraging Appwrite's cloud community

These are some of the benefits we can enjoy by joining Appwrite's community.

Access to advice and best practices
The first step to overcoming challenges is getting advice from experienced developers who have encountered similar issues. Appwrite's developer community is brimming with skilled individuals who are happy to share their expertise, tips, and best practices.

Engaging in discussions with fellow developers helps us find solutions faster and enables us to learn from their experiences.

Expert feedback and answers to questions
In Appwrite's proactive community, anyone can ask questions or request feedback on their code or architecture. Doing so allows other developers to check for potential issues or improvements we may have missed.

Appwrite's community is known for its friendly, inclusive, and helpful atmosphere.

Real-time problem solving
Appwrite's developer community offers real-time support that allows us to quickly receive the help we need to get our project back on track without unnecessary delays.

Collaborative learning and networking
Being a part of Appwrite's developer community allows us to learn from others and share our expertise. We can build our knowledge and improve our skills by participating in discussions, asking and answering questions, and sharing our experiences. Also, networking with fellow developers can lead to new career opportunities and connections.

A chance to contribute and make an impact
We can give back to the community by sharing our knowledge and insights. This helps solidify our understanding of Appwrite's platform and fosters a supportive environment where everyone can learn and grow together. Appwrite's developer community's strength lies in its members' collective expertise, and our contributions can make a significant difference.

Latest updates on Appwrite news and features
Being a part of Appwrite's community means we will always be in the loop on the latest news, updates, and features. This helps us stay ahead of the curve and ensures we maximize Appwrite's powerful tools and resources to build great applications.

Importance of developer communities in problem-solving

Cloud development comes with its fair share of challenges. Developers are often busy managing complex infrastructures and ensuring high availability. Let's explore the importance of developer communities and how they help address these challenges and speed up the troubleshooting process.

Collaborative problem-solving
A diverse and active developer community means we are never alone when tackling a problem. We can easily collaborate with other developers who have experienced similar issues, share ideas, and brainstorm possible solutions. This collaborative approach to problem-solving can significantly reduce the time spent troubleshooting and help us get back on track quickly.

Access to expertise
Developer communities are often overflowing with experts who have a wealth of knowledge and experience in various aspects of cloud development. These experts are often more than happy to lend a hand and share their insights with others. By tapping into their expertise, we can gain a deeper understanding of cloud technologies and best practices, which can help us troubleshoot issues more efficiently.

Continuous learning and growth
Being part of an active developer community encourages continuous learning and professional growth. Joining a community gives us access to valuable resources, like tutorials, webinars, and blog posts, that can help us stay up-to-date with the latest trends and best practices in cloud development.

Challenges Apwrite's cloud community can help us solve

Developing applications for the cloud comes with its own set of challenges. Here are some challenges developers face and how Appwrite's community and resources help solve them.

Security concerns
Security is a top priority for cloud development, and it comes with its own unique challenges. Joining a developer community can help us learn about best practices and get advice from experienced developers on securing our applications and implementing robust access control measures.

Scalability issues
Ensuring our application can scale efficiently is crucial. A developer community can provide insights into common bottlenecks, share experiences, and recommend tools or strategies to improve scalability.

Performance optimization
Optimal application performance is vital for user satisfaction. We can learn how to identify performance bottlenecks and implement effective solutions by engaging with a developer community.

Deployment and management
Deploying and managing cloud applications can be complex. A developer community can offer guidance on deployment strategies, configuration management, and automation tools to streamline these processes.

Cost optimization
Managing costs is a concern for any cloud developer. A developer community can provide recommendations on cost-effective architectures, share cost-saving tips, and help us make informed decisions about cloud services.

Staying up-to-date with technologies
Cloud development is constantly evolving. By being part of a developer community, we can stay informed about new tools and technologies and learn from the experiences of other developers.

Conclusion

Becoming a part of Appwrite's developer community gives us access to a wealth of knowledge, support, and resources that can help improve our troubleshooting efficiency.

Don't miss out on the opportunity to learn from experienced developers, collaborate, and contribute to the success of others. Join the Appwrite developer community today to get started.

Resources

Explore the following resources to learn more about Appwrite.

How This BaaS Platform Is Pushing the Boundaries of Scalable Data Storage

nefejames — Mon, 13 Mar 2023 13:07:20 +0000

As your company grows, so does the amount of data you need to store and manage. In an era where businesses are expected to grow and expand quickly, working with a scalable data storage solution has never been more important.

To help meet the ever-changing growth demands of your business, you need to select a cloud data storage provider that can grow with you and effectively meet your business requirements. Without scalability, you may experience performance issues and potentially lose customers.

This article will cover scalability, its role in cloud computing, and why you need scalable data storage.

Meaning of Scalability

In terms of cloud computing, Scalability refers to the ability to reduce or increase the number of computing resources in response to changes in demand. Scaling is one of the benefits of working with the cloud as it allows companies to manage their resources better and avoid waste.

With cloud scalability, you can quickly scale your business operations without making significant upfront investments in hardware and other infrastructure. Implementing cloud scalability enables your resources to grow or reduce cost-effectively and in tandem with your traffic. Scalability protects you from future downtime and ensures the quality of your product.

Types of Scalability in Cloud Computing

There are three types of scalability in cloud computing, and they are:

Vertical Scaling: It is the addition of resources to an existing instance or server to increase capacity. No code alterations are required for this type of scaling as you only need to add additional units to expand. Vertical scaling involves increasing and upgrading your server by adding more CPU cores, hard disks, or solid-state drives to improve the server's memory, storage, network speed, and computing power.
Horizontal Scaling: It involves adding several servers or nodes to your existing cloud infrastructure. It is also referred to as scaling out. Where vertical scaling focuses on giving your server stronger CPUs to boost their performance, horizontal scaling deals with increasing the number of servers available. While horizontal scaling is more complex and time-consuming than vertical, it pays off in the long run by allowing you to handle traffic efficiently, connect multiple servers, and execute concurrent workloads.
Diagonal Scaling: It is a combination of vertical and horizontal scaling that is aimed at giving you the best of both worlds. This method handles scaling vertically and horizontally by allowing you to be agile and flexible in scaling up or down. It involves upgrading a single server until it reaches its limit and replicating the server's settings and configurations to a new server.

Cloud Scalability vs Elasticity

While cloud scalability and elasticity both deal with the cloud, they have some distinct differences.

Cloud Scalablilty	Cloud Elasticity
It focuses on adjusting resources to meet the expected increase or decrease in workload.	It deals with meeting a sudden increase or decrease in demand at any given time.
It involves long-term planning and allocation of resources.	It is primarily used in situations where there are unexpected spikes or drops in user demand workload.
It requires the manual allocation of resources.	It is entirely automated to adjust to the sudden change in demand.
It enables you to meet long-term and strategic needs.	It allows you to meet unexpected and short-term.

Why the Need for Scalable Storage?

Scalable storage infrastructures are needed for the following reasons:

Planning: While you may not always be able to account for sudden spikes or drops in demand, with scalable storage, you can stay prepared for every demand outcome.
Resource Management: With scalable storage, you can rest assured knowing that you only use the resources you need. When traffic is low, you can quickly scale down and reduce the amount of computing power.
Saves Cost: Scalable storage solutions are cost-effective and help prevent wastage because you only pay for what you use. Also, you can avoid buying expensive hardware that can become obsolete in a few years.
Improves Performance: By enabling you to react quickly to unexpected spikes in demand, scalable storages help boost performance, offering quick response times.

How do you Achieve Cloud Scalability?

Cloud scalability gives you maximum flexibility and helps your business save time and money while also helping you stay agile and competitive. Cloud architecture's scalability is one reason why more businesses are switching from on-premise.

Here are some strategies and techniques you can deploy to achieve cloud scalability:

Using Virtual Machines (VMs): Cloud scalability is impossible without VMs. You can easily scale and adapt to virtual machines, unlike physical ones. Technological advancements like 5G internet connections boost the efficiency and speed of VMs, making them even more powerful and performant.
Automation: Automating tasks like provisioning servers and deployment helps to scale applications quickly without requiring manual input or intervention. This is particularly important when responding to unexpected changes in demand.
Load Balancing: This deals with efficiently distributing incoming traffic across a group of servers, also known as a server farm or server pool. Splitting computational workload between multiple servers ensures optimal performance and that no single server overloads from too much strain.
Containerization: This is the process of bundling all the components of an application's code into a single package that you can easily scale up or down. Containerized applications don't take up much space, which makes it much easier to scale your deployments.

How to Determine Optimal Cloud Scalability

You may need to frequently change your scalable cloud's setup at different times due to fluctuating business needs and the rise or fall of traffic. The question is, how can you know the amount of storage space and processing capacity required?

This is where continuous performance testing and monitoring come in. Continuously monitoring request volume, response time, memory utilization, and CPU load will help you evaluate your system's current performance. The data gotten back from the test will help you know if you should scale up or down.

Where can you find Scalable Solutions?

There are many great vendors out there that offer scalable data storage solutions and Appwrite is one of them.

Appwrite is an open-source Backend-as-a-Service (BaaS) platform that abstracts and simplifies everyday development tasks behind easy-to-use APIs. It supports web and mobile technologies and Jamstack frameworks like Next.js, Gatsby, and Nuxt.js.

By utilizing Appwrite's data storage capabilities, you can scale up and down to match your business needs. Appwrite provides maximum performance and eliminates physical servers' cost and maintenance implications.

Appwrite also has a cloud service called Appwrite Cloud. It is currently in a closed beta, but you can get early access and cloud credits through the beta program.

Beyond its extensive data storage system, Appwrite also has other valuable features and functionalities, including databases, cloud functions, and user authentication and management.

Conclusion

Cloud architecture and computing are changing the face of the software industry and how businesses store, manage, and process data. More businesses will continue moving to cloud-based solutions due to their cost-effective approaches to increasing storage and performance.

Working with a data storage solution that can scale up or down to meet your needs is important. By building with Appwrite, you can rest assured knowing that your data storage needs will be adequately met in response to the requirements of your product.

As of this writing, Appwrite has over 29,000 stars on GitHub and an active developer community on Discord. These stats are great social proof of why leveraging Appwrite and its capabilities is a great choice.

Appwrite is widely adopted by developers and is an excellent BaaS solution for your data storage needs.

Resources

The following resources can help you get started with Appwrite:

You Can Save this Much by Bootstrapping your Backend

nefejames — Fri, 27 Jan 2023 08:34:01 +0000

So you need to create a backend for your application where you can store sensitive data like passwords and other confidential information and also non-sensitive data like your users' display names.

More often than not, you don't have an unlimited budget to go with an expensive solution right from the start, and even if you did, you would most likely want to reduce the cost and save as much as possible.

While money is not the only factor that comes into play when choosing which route to take, it is one of the most major factors since it ultimately determines the sustainability of your choice.

What are the cost implications of how you build your backend? Is bootstrapping the right choice, or is it cheaper to make it from scratch?

This article will shed some light on and evaluate how bootstrapping a backend by leveraging a BaaS provider can help you save money as you build.

Two Common Approaches to Setting Up a Backend

While there are several ways to create a backend for your application, these two stand out as the most common.

Building a Custom Solution from Scratch
A custom backend is great because it gives you the flexibility and freedom to add as many customizations and features as you desire. The downside of building your backend from scratch is that the responsibility of maintaining and handling the infrastructure rests on you. It also comes with higher development costs and a longer time to market.
Bootstrapping with a Backend as a Service
Backend as a Service (BaaS) allows you to outsource the building, ownership, and maintenance of backend infrastructure to third-party providers, enabling you to focus on the frontend, and other core aspects of your application. Instead of building a custom backend, you get access to APIs and SDKs you can use to integrate the backend functionality you need.

Baas vs Custom Backend: Factors to Consider

There are multiple factors to consider when choosing the appropriate backend solution that fits your product requirements. Here are some of the factors:

Time to Market
Stage of the Product
Ready-to-use Functionalities

Let's explore these factors in detail.

Time to Market
Here's a simple truth: your target audience doesn't know or care if you use a BaaS or a custom backend. What they want is a product that solves their problems and delivers the best value to them. The sooner you launch your product, the better. Building a custom backend can take 1-3 months and that can be a long time to wait, particularly for highly saturated markets with competitors that launch fast, which is every market.
One benefit of BaaS solutions is that they increase the speed of development and enable you to build faster by eliminating the need to set up servers, provision containers, and write boilerplate code. Studies show that using BaaS solutions like Appwrite have the potential to reduce your development time by 50%.
Stage of the Product
When it comes to the proper backend solution for your application, one size doesn't fit all. The stage of your application in the product lifecycle will affect the type of backend infrastructure you choose. Builders often choose BaaS providers like Appwrite when their products are in the early to mid stages of development because they are the appropriate solution. For example, you may not want to allocate resources to set up a custom backend when you have few users and very few features available, particularly for a niche product. Besides helping you launch faster, BaaS solutions are a friendlier option for early and mid-stage products, which is how all great applications begin.
Ready-to-use Functionalities
BaaS solutions come with multiple features and functionalities baked into them. This means you
are unburdened from looking for third-party services and figuring out how to integrate them into your product. With BaaS solutions like Appwrite, you get access to functionalities like storage, databases, authentication, functions, localization, team access management, and more, all in one platform. Leveraging the ready-made functionalities of Baas solutions means you don't have to reinvent the wheel when building innovative products.
Accessing these services from a single platform is also better because it is easier to manage as you scale compared to integrating and managing multiple third-party vendors when working with a custom backend. It also frees you from the pains of responding to several API changes and updates over time.

Cost to Consider when Choosing between Bootstrapping your Backend or Building from Scratch

When it comes to creating a backend, there are some costs you should consider, as they will ultimately help determine which backend development method you choose to work with.

Here are some of the cost considerations you should make:

Development Cost
Setting up a backend infrastructure is beyond coding. It also involves configuring data storage, hosting, server management, purchasing software licenses, and other responsibilities. The underlying tasks involved make the development of a custom backend expensive. Beyond the financial costs attached, there is also the time cost, as it can take weeks to months to complete the development.
BaaS solutions have no development cost because there is no backend to build. Instead, all you have to do is plug into their service the APIs and SDKs they provide.
Manpower Cost
Creating a custom backend requires a lot of resources, regardless of the stage of your product's growth and this includes manpower resources. The fewer features and functionalities you have to code from scratch, the fewer manpower resources you will need.
Since a BaaS system prevents you from reinventing the wheel, fewer hands are needed to build. By limiting the amount of backend work required, BaaS enables you to reduce your manpower cost, which is a good thing because the average global range for a backend developer's salary is $72,484 per year.
Cost of Prototyping
The idea behind a Minimum Viable Product (MVP) is to launch a product as fast as possible while spending little money. BaaS platforms are great for creating proof of concepts and developing MVPs. They give you a lean and efficient setup you can use to launch the initial version of your product. The low-maintenance environment BaaS provides is great for quick prototyping.
Why take months and spend thousands of dollars on your application prototype because you built your backend from scratch when you can achieve the same goal in weeks without spending a dime building with a BaaS provider?
Maintenance Cost
Creating a backend is one thing; maintaining it to ensure optimal performance is another. Many activities go into maintaining a custom backend such as verifying that backups are working, monitoring RAID (Redundant Array of Inexpensive Disks) alarms, updating the OS, and checking for hardware errors and your system's security. These are recurring costs that take time and tons of manpower to handle.
There are no maintenance costs with BaaS solutions because the backend is not your responsibility.

How Much Can You Save by Bootstrapping Your Backend?

Consider a scenario where you need to develop a backend for a SaaS startup with only 100 users. Here are some of the cost implications involved in building the backend from scratch development:

Hiring a backend developer costs a minimum of $72,484, and this can increase depending on the developer’s experience. In some cases, a senior developer’s salary can be as high as $128,332
Buying a physical server will cost between $5,000 to $10,000, and renting a server will cost between $100 to $200 per month. The SaaS startup will most likely go for renting for starters, then eventually switch to a physical server as they expand
After buying the server, an IT technician has to install and set it up. This process can take at least 5 hours and costs at least $660
Carrying out monthly routine server maintenance can cost between $150 to $1,500, depending on how frequently the maintenance occurs

All these costs together add up to a range between $78,284 and $139,142 to set up a backend from scratch.

BaaS solutions eliminate these costs because you don’t have to worry about the following:

Hiring a developer since you have easy-to-use APIs and SDKs for quick integration
Buying or renting a physical server, since
Hiring an IT technician because there are no servers to install
Carry out maintenance because there are no servers to maintain

However, the fact that BaaS platforms are more cost-effective does not mean they do not come with their own cost implications. Most BaaS solutions operate on a pay-as-you-go pricing model where you are charged based on your level of usage. The charge is usually between $0.01 and 0.10 per API call. They also come with generous free tiers ranging from tens of thousands to a million API calls per month, and sometimes, businesses don’t scale beyond that, meaning they pay nothing and get a backend for free.
With 100 users for the SaaS startup, the backend will cost between $5000 to $1000 per month, at $0.10 per API call. This amount depends on the number of monthly API calls generated by user activity.

This means that you stand to save at least $68,284 and as much as $129,142 by bootstrapping your backend with a BaaS provider.

Note that while actual costs may vary from one project to another and between regions, this budget gives you a rough idea of the cost-saving benefits you stand to gain by bootstrapping your backend development.

Conclusion

Creating a great product is complex, and a lot of decision-making goes into the processes involved. Among other things, it is important to consider the nature of your product and the resources available when deciding what backend solution to use.
A great thing about choosing Appwrite as your BaaS provider is that it provides you with the necessary APIs, SDKs, and functionalities to build great web and mobile applications easily. Appwrite is free and easy to set up. It has comprehensive documentation, a simple learning curve, and a large and supportive community to help assist and get you started quickly.

Resources

The following resources can help you get started with bootstrapping your backend with Appwrite:

How to Create a GitHub Profile Application With React and GitHub APIs

nefejames — Mon, 09 Jan 2023 23:15:07 +0000

In this article, we will learn how to create an online portfolio showcasing information available in our GitHub profile by leveraging the GitHub API, React, and Chakra UI.

Prerequisites

Knowledge of React and how to fetch data from APIs is required to follow along in this article. Experience with Chakra UI is a plus but not required.

What We Will Build

The GitHub profile application will have the following features:

A /github-profile route containing basic information about our GitHub account, such as
- The number of repositories available
- The number of followers and following
- A link to our portfolio
- Our location
- Our username
- Our profile picture
A /repos route containing the list of repositories we have on GitHub, and pagination for easier navigation from one set of repositories to another
An error boundary route
A navigation bar with links to the different routes

The images below show a preview of the application we will build.

The hosted version of the complete application is on Vercel, and the source code is available on GitHub.

Getting Started

Run the command below in the terminal to generate a new React app with create-react-app.

npx create-react-app github-profile-app

Next, navigate to the directory and run the server.

cd github-profile-app

npm start

Finally, install Chakra UI into the React app.

Now that the app is ready let’s start building. We will begin with creating the different routes.

Setting up the GitHubUser Context

The GitHubUser context will contain details of our GitHub account that we fetch from the GitHub API.


import { createContext, useContext, useEffect, useState } from "react";
const GitHubUserContext = createContext();
export const useGitHubUserContext = () => useContext(GitHubUserContext);

export default function GitHubUserContextProvider({ children }) {
  const [GitHubUserData, setGitHubUserData] = useState(false);

  async function fetchGitHubUserData() {
    const response = await fetch(`https://api.github.com/users/nefejames`);
    const data = await response.json();
    setGitHubUserData(data);
  }

  useEffect(() => {
    fetchGitHubUserData();
  }, []);

  const data = GitHubUserData;

  return (
    <GitHubUserContext.Provider value={data}>
      {children}
    </GitHubUserContext.Provider>
  );
}

Here, we did the following:

Imported the necessary dependencies from react
Created the GitHubUserData state
Created the fetchGitHubUserData function that fetches the user data from the GitHub API
Set up the fetch functionality in the useEffect
Passed the fetched data as the value of the Context API

Setting up the GitHubRepos Context and Pagination Functionality

The GitHubRepos context will contain information on our GitHub repos and their respective details. We will also set up the pagination functionality here.


import { createContext, useContext, useEffect, useState } from "react";
const GitHubReposContext = createContext();

export const useGitHubReposContext = () => useContext(GitHubReposContext);
export default function GitHubReposContextProvider({ children }) {
  const [GitHubReposData, setGitHubReposData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const totalNoOfPages = 5;

  async function fetchGitHubReposData() {
    setLoading(true);
    const response = await fetch(
      `https://api.github.com/users/nefejames/repos`
    );
    const data = await response.json();
    setGitHubReposData(data);
    setLoading(false);
  }

  useEffect(() => {
    fetchGitHubReposData();
  }, []);

  //start pagination functionality setup
  const getPaginationData = (arr, currentPage = 1, reposPerPage) => {
    const start = currentPage * reposPerPage - reposPerPage;
    const data = [...arr].splice(start, reposPerPage);
    return data;
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const prevPage = () => {
    if (currentPage === 1) {
      return;
    }
    setCurrentPage((prev) => prev - 1);
  };

  const nextPage = () => {
    if (currentPage >= totalNoOfPages) {
      return;
    } else {
      setCurrentPage((prev) => prev + 1);
    }
  };

  const filteredRepos = getPaginationData(GitHubReposData, currentPage, 6);
  //end pagination functionality setup

  const data = {
    filteredRepos,
    prevPage,
    nextPage,
    handlePageChange,
    totalNoOfPages,
    currentPage,
    loading,
  };
  return (
    <GitHubReposContext.Provider value={data}>
      {children}
    </GitHubReposContext.Provider>
  );
}

We did the following to set up the GitHubRepos context:

Imported the necessary dependencies from react
Created the GitHubReposData and the loading states
Created the fetchGitHubReposData function that fetches the repos data from the GitHub API
Set up the fetch functionality in the useEffect
Passed the fetched data as the value of the Context API

Let’s break down the functionality for the pagination:

We created the currentPage state and set its initial value to 1 because that is what we want the first pagination step to be
We set up the totalNoOfPages and set it to 5 because that is the number of steps we want
The prevPage function only reduces the step if the value of currentPage is more than 1
The nextPage function only increases the step if currentPage is greater than or equal to totalNoOfPages
The handlePageChange function updates the currentPage when anyone clicks on the pagination buttons

Creating the Pagination Component

The Pagination component will hold the pagination buttons. To set it up, create a Pagination.js file in the components folder and paste the following code.


import { Button, HStack } from "@chakra-ui/react";

export default function Pagination({
  onPageChange,
  currentPage,
  prevPage,
  nextPage,
  totalNoOfPages,
}) {
  const getPages = () => {
    const pageNumber = [];
    for (let i = 1; i < totalNoOfPages + 1; i++) {
      pageNumber.push(i);
    }
    return pageNumber;
  };
  return (
    <HStack spacing={2} mt={6}>
      <Button
        disabled={currentPage === 1 ? true : false}
        onClick={prevPage}
      >
        &larr;
      </Button>
      {getPages().map((page) => (
        <Button
          key={page}
          onClick={() => onPageChange(page)}
          bg={currentPage === page ? "blue.500" : "gray.200"}
          color={currentPage === page ? "#fff" : "#111"}
          _hover={{
            bg: currentPage === page ? "blue.500" : "",
          }}
        >
          {page}
        </Button>
      ))}
      <Button
        disabled={currentPage === totalNoOfPages ? true : false}
        onClick={nextPage}
      >
        &rarr;
      </Button>
    </HStack>
  );
}

Let’s break down the code above:

The Pagination component takes in onPageChange, currentPage, prevPage, nextPage, and totalNoOfPages as props
The getPages function gets the current step and returns it in the pageNumber variable
We use the values and properties gotten via props to get up the buttons

Creating the GitHub UserProfile Route

Navigate to the src folder, and create a pages folder there. In there, create a GitHubUser.js file, and update it with the following code.


import GitHubUserAnalytics from "../components/GitHubUserAnalytics";
import GitHubUserLinks from "../components/GitHubUserLinks";
import { Link } from "react-router-dom";
import { useGitHubUserContext } from "../context/GitHubUserContext";
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
import PlaceholderImage from "../images/placeholder.jpg";
import SEO from "../components/SEO";

export default function GitHubUser() {
  const data = useGitHubUserContext();
  const ChakraLink = chakra(Link);
  const ChakraLazyLoadImage = chakra(LazyLoadImage);
  if (!data) return <Spinner size="xl" />;

  return (
    <>
      <SEO
        title="nefejames - GitHub profile"
        description="Front end web developer and technical writer - always learning - nefejames"
      />
      <Card>
        <Flex>
          <Box width={["full", "300px"]}>
            <ChakraLazyLoadImage
              src={data.avatar_url}
              placeholderSrc={PlaceholderImage}
            />
            <Text as="span" mt={3} display="inline-block" color="teal.900">
              @{data.login}
            </Text>
          </Box>
          <VStack spacing={7} alignItems="start">
            <VStack spacing={5} alignItems="start">
              <VStack>
                <Text>
                  {data.name}
                </Text>
              </VStack>
              <Text as="p">{data.bio}</Text>
            </VStack>
            <GitHubUserAnalytics
              noOfRepos={data.public_repos}
              noOfFollowers={data.followers}
              noOfFollowing={data.following}
            />
            <GitHubUserLinks webUrl={data.blog} location={data.location} />
            <ChakraLink to="/repos" w="full">
              <Button>View my Repos</Button>
            </ChakraLink>
          </VStack>
        </Flex>
      </Card>
    </>
  );
}

Here, we did the following:

Imported the relevant dependencies and components
Passed the appropriate data to noOfRepos, noOfFollowers, and noOfFollowing properties of the GitHubUserAnalytics component
Passed the appropriate data to the webUrl and location properties of the GitHubUserLinks component

The GitHubUserAnalytics component displays analytics on our account's number of repositories, followers, and following.

Here’s the code snippet for it. It takes in the noOfRepos, noOfFollowers, and noOfFollowing as props from its parent, the GitHubUser component, and displays them in the UI.


import { Flex, Text, VStack } from "@chakra-ui/react";

export default function GitHubUserAnalytics({
  noOfRepos,
  noOfFollowers,
  noOfFollowing,
}) {
  return (
    <Flex>
      <VStack spacing={-1}>
        <Text as="span">Repos</Text>
        <Text as="span" fontWeight="bold" fontSize="xl">
          {noOfRepos}
        </Text>
      </VStack>
      <VStack spacing={-1}>
        <Text as="span">Followers</Text>
        <Text as="span" fontWeight="bold" fontSize="xl">
          {noOfFollowers}
        </Text>
      </VStack>
      <VStack spacing={-1}>
        <Text as="span">Following</Text>
        <Text as="span" fontWeight="bold" fontSize="xl">
          {noOfFollowing}
        </Text>
      </VStack>
    </Flex>
  );
}

The GitHubUserLinks component is responsible for displaying the link to our portfolio and our location.

Here’s the code snippet for it. It takes the webUrl and location as props from GitHubUser and displays them in the UI.


import { HStack, Text } from "@chakra-ui/react";
import { BiLink, BiMap } from "react-icons/bi";

export default function GitHubUserLinks({ webUrl, location }) {
  return (
    <HStack spacing={8}>
      <a href={webUrl} target="_blank" rel="noopener noreferrer">
        <HStack>
          <BiLink />
          <Text as="span">My portfolio</Text>
        </HStack>
      </a>
      <HStack>
        <BiMap />
        <Text as="span">{location}</Text>
      </HStack>
    </HStack>
  );
}

The SEO component uses react-helmet-async to set up some basic SEO optimization for the page. It accepts the title and description as props.


import { Helmet } from "react-helmet-async";

export default function SEO({
  title,
  description = "Front end web developer and technical writer - always learning - nefejames",
}) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta charset="utf-8" />
      <meta name="theme-color" content="#000000" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta property="og:description" content={description} />
    </Helmet>
  );
}

Creating the Repos Route

The Repos route will handle the display of the list of repositories and the pagination buttons. Create a Repos.js file in the pages folder, and copy the code below to set it up.


import { Center, SimpleGrid, Spinner } from "@chakra-ui/react";
import Repo from "../components/Repo";
import { useGitHubReposContext } from "../context/GitHubReposContext";
import SEO from "../components/SEO";
import Pagination from "../components/Pagination";

export default function Repos() {
  const {
    filteredRepos,
    prevPage,
    nextPage,
    handlePageChange,
    totalNoOfPages,
    currentPage,
    loading,
  } = useGitHubReposContext();

  if (loading) return <Spinner size="xl" />;

  return (
    <>
      <SEO title="My Repos" />
      <SimpleGrid columns={[1, 2]} spacingX="10" spacingY="8" pt={10}>
        {filteredRepos.map((repo) => (
          <Repo
            key={repo.name}
            repoName={repo.name}
            progLang={repo.language}
            stars={repo.stargazers_count}
          />
        ))}
      </SimpleGrid>
      <Center mb={10}>
        <Pagination
          onPageChange={handlePageChange}
          currentPage={currentPage}
          prevPage={prevPage}
          nextPage={nextPage}
          totalNoOfPages={totalNoOfPages}
        />
      </Center>
    </>
  );
}

Here, we did the following:

Imported the relevant dependencies and components
Mapped through the filteredRepos, and displayed the repos in the UI
Passed the appropriate properties to the Pagination component

Creating the Error Boundary Route

Error boundaries help us catch errors that occur anywhere in our application. Create an Error.js file in the pages folder, and copy the code below to set it up.


import { Text } from "@chakra-ui/react";

export default function Error() {
  throw new Error("error");
  return <Text as="span">An error route</Text>;
}

Creating the 404 Route

404 routes are instrumental in helping us to catch user-generated navigation errors in our applications. Create a NotFound.js file in the pages folder, and copy the code below to set it up.


import { Button, Center, Text, VStack } from "@chakra-ui/react";
import { Link } from "react-router-dom";

export default function NotFound() {
  return (
    <Center>
      <VStack spacing={5}>
        <Text as="h1">Error. Page not found</Text>
        <Button color="white" bg="green.900" _hover={{ bg: "green.800" }}>
          <Link to="/github-user">View my GitHub profile</Link>
        </Button>
      </VStack>
    </Center>
  );
}

Bringing It All Together

Having created all the necessary components and their respective functionalities, let’s bring them all together in the App.js file.


import { Routes, Route } from "react-router-dom";
import { Flex } from "@chakra-ui/react";
import GitHubUser from "./pages/GitHubUser";
import Home from "./pages/Home";
import NotFound from "./pages/404";
import Header from "./components/Header";
import Repos from "./pages/Repos";
import Error from "./pages/Error";
import SEO from "./components/SEO";
import RepoDetails from "./components/RepoDetails";

function App() {
  return (
    <>
      <SEO title="My GitHub App" />
      <Flex>
        <Routes>
          <Route exact path="/" element={<Home />}>
            <Route path="/github-profile" element={<GitHubUser />} />
            <Route path="repos" element={<Repos />} />
          </Route>
          <Route path="/error" element={<Error />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Flex>
    </>
  );
}

export default App;

Conclusion

With that, we have successfully created the GitHub profile application. This project was part of the second-semester assessment for AltSchool Africa’s Frontend Engineering track.

A Beginner’s Guide To A Successful DevRel Career 🥑

nefejames — Sun, 18 Dec 2022 16:48:41 +0000

Developer Relations, or DevRel for short, is a role that helps foster healthy and mutually beneficial relationships between companies and software developers. It is a field that has grown in popularity in the last few years as more companies pay attention to product advocacy and awareness in the developer community.

This article will cover the genesis and history of DevRel, its current state, mistakes to avoid, and how to build a career in DevRel successfully.

The History of DevRel

The DevRel we know and love today was not a thing a few years ago. As of 2017, what we had were conferences and meetups among tech enthusiasts who shared the same interest and love for specific tools and technologies. Developers arranged local and international meetings and talked about things they've been learning, cool projects they built, the process involved in a problem they solved at work or home, and how they used specific tools, APIs, and resources to solve said problem. This was the genesis of DevRel—community; people gathering together and educating one another.

The Current State of DevRel

The demand for DevRel experts and professionals has increased over time. Sadly, that is not the only change that has come to the DevRel space in recent times.

The focus of DevRel has always been education. In fact, DevRel became successful because people made education their priority. No one was trying to market their company, bring in sales, get signups, drive adoption, or push and promote their company's products into people's faces. Instead, the focus was on sharing challenges and lessons learned while building great products.

DevRel has transitioned from education to marketing, sales, and adoption. Company leadership needs to remember that developers don't spend their time, money, and energy attending conferences to watch or listen to some product promotion. Instead, they come to learn. No one pays money to hear you advertise your company and talk about why your solution and services are the best in the world.

DevRel was a group of enthusiasts coming together to share their joy, and that must become the focus once again.

The Modes of DevRel

As stated earlier in this article, education is the core of DevRel. There are four major modes through which this can be accomplished, and they are:

Speaking
Writing
Video Content Creation
Conducting Workshops

Having experience in at least one of these modes is highly recommended. Also, consider growing in other modes over time as part of your career development goals.

There is no hard rule when it comes to choosing the mode to focus on first. No one is more important than another. A great way to decide is by picking the mode you are highly interested in. For example, if you naturally enjoy writing, consider selecting the writing mode, as you are more likely to deliver stellar results and improve faster with that than with other modes.

Tips To Set Yourself up for Success in DevRel

Participate in Local Meetups
Local meetups are a great way to get your foot wet and gain practical DevRel experience. Often, it is also a great way to beef up your portfolio, carve a niche for yourself, show your talent, and ultimately gain access to international audiences.
Don't Make Relationships Transactional
Avoid transaction relationships; people can often smell opportunists from a mile away. Trying to use people for their followership, connections, network and what you can gain from them is a sin in the DevRel space.
Be Open-minded
Be open to trying new opportunities, attending new conferences, and forming new connections. Great things could come from these moments later in the future.
De-godify People
Don't feel like there are people you can't talk to or be in the same space with. No matter their achievements, they are just humans like you!
Support People
Find out what people are creating and the problems they are trying to solve, then see how you can support them in reaching their goals. This is a great way to form genuine connections.
Have Great Communication Skills
When it comes to DevRel, communication is worth its weight in gold. Great developer advocates put a lot of thought into their communication, and it shows in the materials they put out, whether it's a GitHub readMe, YouTube video, or a 1000-word article. It is important to communicate in a way that anyone who comes across your work will understand.
Have Some Developer Experience
While you don't have to be a 10x developer, some level of developer knowledge and experience is required to truly connect with other developers and speak their language. The more technical expertise and experience you have, the better, which is an advantage that will make you more effective.
Have An Active Online Presence
Constantly publish content to social media platforms (YouTube, Twitter, Hashnode, etc.) via your chosen teaching mode. It's a great way to stay consistent and deliver content to your audience.
The key to having an active presence on any platform is sharing and talking about the things you enjoy doing. Consistency is easier when delight is present in an activity.
Measure Your Growth
Analyze your work overtime to ensure you've been growing. Have the quality of your videos gotten better? Have your oratory skills improved? Is your writing more structured and concise? Tracking these parts of your skillset allows you to spot growth or areas that require improvements.
Remember that it's DevRel, Not DevSell
Always remember that the essence of DevRel is not sales or marketing. Those are the job of the sales and marketing teams. Instead, DevRel is fundamentally about providing value, growing relationships, and educating your audience.

Conclusion

Now you have all you need to succeed in DevRel; have a fruitful and impactful career.

How to Build Applications With Fewer APIs Bundling

nefejames — Tue, 29 Nov 2022 17:34:07 +0000

As a developer, you have many decisions to make when building awesome software products. You have to choose a tech stack, define project scope and restraints, test and deployment strategies, decide on GitHub workflows, define coding style guides, etc.

As important as these decisions are, you must also choose between building every functionality from scratch or leveraging Application Programming Interfaces (APIs) to lighten the load. Most people often choose the latter option because building with existing solutions is better than re-inventing the wheel.

Upon deciding to use APIs, you’ll encounter the challenge of finding the ideal APIs that meet product requirements and provide the functionalities you need. In cases where a single API doesn't meet your needs, you patch and combine multiple APIs to achieve the required result. Not only is this time-consuming, but it is also difficult to maintain and prone to errors and bugs in the long run, particularly when API versions change.

This article will explore factors to consider when choosing the right APIs. You will also learn how Appwrite solves the issue of sourcing for and bundling multiple APIs with the numerous APIs and points of integration they offer.

Factors to Consider When Choosing the Right API Provider

These are some critical factors you should consider when choosing an API service.

Ease of integration
Variety of services
Active developer community
Documentation

Let’s study these factors in detail:

Ease of Integration

Time is invaluable when building projects and an API's ease of integration goes a long way to speed up or delay development. Beyond APIs, you may want to strongly consider third-party services that provide language-specific and environment-specific Software Development Kits (SDKs) for faster integration.

Variety of Services

The more services an API platform provides, the better. One system with all the functionality you need, whether authentication, database, storage, geolocation, etc., is better than using multiple platforms for different functionalities.
A one-system integration means you only need to learn one API platform, making dealing with bugs and version changes easier over time.

Active Developer Community

Since no man is an island, you should consider if the third-party APIs you want to choose has an active developer community that can assist when needed. Platforms like Stack Overflow are invaluable resources to developers, particularly when dealing with bugs and stubborn issues. You can also gain inspiration from other developers in the communities by observing how they build with and integrate the APIs.

Documentation

It won't matter how many APIs a provider has or the number of services available if they have poor documentation. Ensure that the documentation covers how the API works, explains the integration process, and has helpful code snippets and sample projects.
Be careful not to choose a provider with poorly written documentation that does not provide comprehensive information on these core points.

The Better Way to Build

What if a platform had all the necessary APIs for everyday application development tasks, such as user management, file storage, email sending, authentication, and more? Appwrite is that platform, and it is a self-hosted Backend as a Service (BaaS) platform that provides developers with all the core APIs you need to build any application.

Appwrite provides ready-to-use APIs that make life easier for developers and end the hunt for reliable and efficient API services.

Appwrite's API Offerings

Appwrite provides the following REST APIs:

Account API

The Account API enables you to register and manage new user accounts. You can also use this service to update user information, retrieve user sessions across multiple devices, perform phone verification, and more.

Teams API

The Teams API allows you to manage and group users in your project. You can share read and write access to project resources like database documents or storage files. It gives you authorization control by enabling you to decide the access privileges of every user.

Database API

You can use the Database API to create a structured collection of documents to manage, filter, apply advanced queries, and set permissions. The Databases service returns data as structured JSON documents and you can have as many databases as you need.

Storage API

Integrating with the Storage API allows you to add file management functionality to your applications, like uploading, viewing, downloading, and querying files. This API has a preview endpoint which you can use to generate preview images for your files.

Functions API

You can extend the functionality of Appwrite by creating custom cloud functions with the Functions API. Appwrite will trigger these functions when events like account creations, user logins, file uploads, etc., occur. The functions can be executed synchronously and asynchronously. Read more about the latest updates and how you can use the Functions API.

Localization API

The Locale API gives you information on your user's location, IP address, list of countries and continents names, phone codes, currencies, and more. You can then utilize this data to create a customized experience for your users, like welcoming or sending emails in different languages, displaying weather forecasts, or creating a currency converter.

Avatars API

The Avatars API handles images, icons, and avatars in applications. You can use it to fetch country flags, display browser icons, show credit card logos, display name credentials as user profile icons, and more.

Health API

The Health API lets you check and monitor that your Appwrite server instance and its internal components are up and responsive.

Appwrite's documentation covers the client-side and server-side implementation of their APIs, with multiple code snippets and use cases available.

Appwrite's SDKs - A Richer Developer Experience

Appwrite is an incredible platform that has provided several APIs covering many use cases and development scenarios.
However, they didn't stop there. They decided to improve the developer experience by providing SDKs for faster integration. The SDKs are grouped into client and server SDKs and cover different platforms and programming languages.

The client SDKs are:

Web SDK
Flutter SDK
Apple SDK
Android SDK

The server SDKs are:

Node
Deno
PHP
Python
Ruby
Dart
Kotlin
Swift

Learn more about the SDKs.

Why You Should Use Appwrite's APIs

These are some reasons why you should build with Appwrite's APIs:

They are free and easy to use
They are reliable, as Appwrite has a very high uptime
They have a low learning curve
Access to a large and supportive developer community for assistance
There are APIs and SDKs for several programming languages and environments

Conclusion

Appwrite is a developer-friendly platform that empowers web, mobile, and Flutter developers to build with ease. Appwrite ends the problems and inefficiencies of sourcing for and bundling different third-party APIs services by providing numerous API offerings and SDKs for seamless integration.

With Appwrite, you can focus on building instead of spending time struggling with APIs.

Resources

Appwrite’s SDKs
Appwrite’s Documentation
Appwrite’s Discord community

All You Need to Know About Serverless Functions and the Edge

nefejames — Fri, 25 Nov 2022 21:59:43 +0000

The technological advancements and digital revolutions of the last century have completely transformed customers' appetites. They expect digital services and platforms to provide them with blazing-fast services and a seamless user experience. Hence, it is essential to build software applications in a way that allows us to meet the expectations and requirements of today’s fast-paced society.

It is vital to utilize today's innovations to build products for the people of today. Serverless functions and the Edge are powerful technologies we can harness to build speed and scale into our applications and software products. They enable us to deliver content and services to people in a fast and cost-effective manner.

In this article, we will learn more about serverless functions and the Edge, their benefits, and how to work with them.

What are Serverless Functions?

Serverless functions are specific and modular pieces of logic that run on the cloud and are designed to perform a single action. With serverless functions, we can use global data centers to run backend code without needing to configure or maintain servers ourselves, hence the term ‘serverless’ functions.

Having said that, technically speaking, servers are still involved, just not ours. Some businesses provide the cloud computing infrastructure that makes this possible, but more on that later. We can deploy serverless functions to multiple regions across the globe to improve latency and availability.

With serverless functions, we can add all kinds of functionality to applications, such as database queries, form submissions, authentication, and more.

What are the Edge and Edge Functions?

The Edge refers to the CDN server or data center closest to the user. We can take serverless functions to the next step by combining them with the Edge to create “Edge functions,” which are serverless functions that run at the Edge.

Edge functions allow us to modify network requests and serve content from the CDN server that is closest to the users who made the requests, no matter where they are around the globe. We can leverage edge functions to bring unique and personalized experiences to users, like showing localized content, displaying relevant ads, and more.

Edge functions enable us to deliver functions not within a broad area but in the location closest to the user. By running at the Edge, edge functions boost the performance of applications by providing blazingly fast execution times and low latency.

Benefits of Serverless Functions

Here are some benefits of serverless functions:

No infrastructure to manage:
Serverless functions eliminate the complexity behind setting up and managing server infrastructure since we don’t need to do that ourselves.
Greater productivity
Serverless functions enable us to focus on what matters, writing code and building awesome products. They eliminate the hassle of setting up servers ourselves, meaning we don’t have to spend time picking the right operating system, configuring networks, packing dependencies, handling hardware upgrades, provisioning capacity to run at scale, or any form of DevOps activity. The cloud takes care of that for us behind the scenes, meaning we are free to spend time on priority activities.
Easier to scale
As traffic increases or decreases, serverless functions automatically scale up and demand to adjust to the ever-changing rate of usage and avoid downtime.
Lower cost
A server-based approach requires tons of manpower, specialized knowledge, and servers to set up, which are expensive, particularly when making provision for high-traffic usage. Serverless functions cost less to operate because we are charged per request platforms charge customers per request and only pay for the resources we consume to run the functions. It also eliminates the costs of idle CPU time or unused storage space because we don’t own any of that infrastructure.
Less Code
Since we don’t need to set up the servers ourselves, we also don’t need to write any server-side or backend code. This makes the barrier of entry low for developers because we can add full-stack functionality to applications without needing to know the backend or server side of things.
Faster time to market
The serverless approach means we can develop applications and add functionalities faster. This translates to fewer errors, bug fixes, legacy code, and a faster time to market.

Platforms that Support Serverless Functions

As we saw earlier, serverless functions are not truly serverless. They do need servers to function, just not ours, and there are platforms that provide the infrastructure where we can deploy these functions.

These are some frameworks that support serverless functions.

Vercel exports Next.js API routes as serverless functions. Beyond those, Vercel also supports edge functions.
With Netlify functions, we can deploy server-side code as API endpoints. It supports functions created with JavaScript, TypeScript, and Go. Like Vercel, Netlify also supports edge functions.
AWS Lambda is Amazon Web Services’ serverless functions offering, and it is widely adopted by companies. It also has its Edge offering tagged AWS Lambda@Edge. - Microsoft Azure Functions is a serverless environment on Azure. It supports programming languages like C#, JavaScript, Java, Python, TypeScript, etc.
Google Cloud Functions is Google’s serverless environment. It supports programming languages like JavaScript, Python, and Go.
IBM Cloud Functions is a Functions-as-a-Service (FaaS) platform for developing lightweight code that executes at scale and on demand.
Supabase functions can be distributed to 29 geographic region globally, and it is written in TypeScript.
CloudFlare Workers is Cloudflare’s serverless offering, and it runs on Chrome’s V8 engine under the hood.
Oracle Cloud Functions supports Python, Go, Java, Node, and other languages.

Frameworks That Support Serverless Functions

These are some frameworks that support serverless functions.

Next.js provides API routes that we can deploy as serverless functions on Vercel and other platforms. Also, it’s built by Vercel, so it fully supports serverless functions.
SvelteKit comes with an Endpoints feature for creating serverless functions, and it also has Netlify adapter. With Rich Harris, the creator of Svelte and SvelteKit, being part of the Vercel team, we can hope that SvelteKit will begin to support Vercel functions.
Remix was recently made an open-source project, and it supports edge and serverless functions.
Deno deploy enables the deployment of JavaScript, TypeScript, and WebAssembly code at the Edge. In fact, Supabase Functions and Netlify Edge are built with Deno. Also, Deno supports Azure functions.

The Anatomy of a Serverless Function

We’ve looked at a lot of the theoretical aspects surrounding serverless functions. However, let’s also take a brief glimpse of how an edge function looks.

We’ll create a function that adds a record to a Xata database.

import { getXataClient } from "@utils/xata";
const xata = getXataClient();

const handler = async (req, res) => {
  const { name, price, imgUrl } = req.body;
  await xata.db.Products.create({
    name: name,
    price: price,
    img: imgUrl,
  });
  res.end();
};

export default handler;

Serverless functions make HTTP requests and then send a response back. They have two arguments, a request (req), and a response (res). Basically, we write a function, deploy it to a serverless provider, then we can call that function just like any API using HTTP methods, the fetch API, or our preferred method of fetching data.

Note that the structure of edge functions may look slightly different depending on the platform and provider we use. However, they will generally have little differences and similar functions and behaviors.

Conclusion

Serverless functions and the Edge have had a positive impact on builders and consumers alike. Builders can build faster, more effectively, and cheaper, and consumers can get the best experience no matter where they live.
However, ingenuity is never-ending, and progress is not static, so who knows what next technological innovation will transform the experience of the web and how we build with it
However, ingenuity is never-ending, and progress is not static, so who knows what next technological innovation will transformation the experience of the web and how we build with it.

Create an Ecommerce Admin App with Xata and Cloudinary

nefejames — Wed, 23 Nov 2022 09:26:04 +0000

Content is king, and behind every content is the CMS (Content Management System), which is the queen. CMSs revolutionalized how we store, produce, and share content. Today, there are a variety of content management solutions, whether traditional, headless or hybrid.

In this article, we‘ll learn how to create a dummy ecommerce store CMS admin with Next.js, Cloudinary's Upload widget, and Xata.

Source Code

Access the source code for the application on GitHub.

Prerequisites

To follow along with this article, we need to have:

Knowledge of React and Next.js
A Cloudinary account
A Xata account
Understanding of Chakra UI is advantageous but not required

What Is Xata?

Xata is a serverless database built on top of PostgreSQL and Elasticsearch. It comes with useful integrations with popular frameworks and technologies like Next.js, Netlify, Nuxt.js, Vercel, Remix, and SvelteKit.

What is Cloudinary?

Cloudinary is a cloud-based and end-to-end platform with tools and functionalities for storing, processing, editing, managing, delivering, and transforming media assets.

What We Will Create

The screenshots below shows the application we will create.
Users can add new products by filling in the name, price and image of the products. They can also delete products or update the products’ details.

Getting Started

Download, clone, or fork this starter template that contains the code for the UI of the ecommerce admin.

    npx create-next-app xata-cloudinary-chat-app -e https://github.com/nefejames/hackmamba-ecom-admin-app-ui
    or
    yarn create next-app xata-cloudinary-chat-app -e https://github.com/nefejames/hackmamba-ecom-admin-app-ui

Next, navigate to the project directory, install the necessary dependencies, then run the application

The starter template consists of the following files:

components/AddProductForm.js: responsible for adding a new product to the shop
components/ProductCard.js: displays a product’s details
components/ProductModal.js: the modal that holds the form
components/UpdateProductForm.js: responsible for updating a product’s details
layout/index.js: the layout for the application
utils: will hold the Xata instance, and the logic for the product image upload and product deletion

Setting up Xata Database

We start by creating a new database called chat-app on our Xata account.

Next, create a Products table that will contain the data of different products. Each record will have name, price, img, and id properties; the id is automatically generated by Xata.
We got the images from the media filesuploads in our Cloudinary account.

The database schema is ready, so let’s set up the Xata instance next, and integrate it into the application.

Setting up Xata Instance

Run the command below to install the CLI globally.

    npm install @xata.io/cli -g

Next, run xata auth login, which will prompt you to Create a new API key in the browser or use an existing one; we’ll go with the first option.

Once in the browser, give the API a name and click the Create API key button.

Back on the dashboard, click on the Get Code Snippet button at the top right corner and copy the second command. We will use it to initialize the project locally with the aid of the CLI.

Run the command in the terminal and choose from the configuration options. The screenshot below shows the configurations for this application.

The CLI will automatically create a xata.js file that contains the XataClient instance we need; let’s move on to the coding aspects of the application.

Setting up the API Routse

We need to set up these 3 API (Application Programming Interface) routes for the app:

api/add-product.js: contains the logic for adding a product to the Products database
api/update-product.js: contains the logic for updating the information of a product on the Products database
api/delete-prduct.js: contains the logic for deleting a product on the Products database

The code for the add-product.js API route:

    import { getXataClient } from "@utils/xata";
    const xata = getXataClient();

    const handler = async (req, res) => {
      const { name, price, imgUrl } = req.body;
      await xata.db.Products.create({
        name: name,
        price: price,
        img: imgUrl,
      });
      res.end();
    };

    export default handler;

It takes the name, price, and URL of the uploaded image and passes them as arguments to Xata’s create method to add a new product to the Products db.

The code for the update-product.js API route:

    import { getXataClient } from "@utils/xata";
    const xata = getXataClient();

    const handler = async (req, res) => {
      const { id, name, price } = req.body;
      await xata.db.Products.update(id, {
        name: name,
        price: price,
      });
      res.end();
    };

    export default handler;

It takes the name, price, and id of a specific product and passes them as arguments to Xata’s update method to update the product’s information.

The code for the delete-product.js API route:

    import { getXataClient } from "@utils/xata";
    const xata = getXataClient();

    const handler = async (req, res) => {
      const { id } = req.body;
      await xata.db.Products.delete(id);
      res.end();
    };

    export default handler;

It takes the id of a specific product and passes it as a parameter to Xata’s delete method to delete the product from the Products db.

Having set up the API routes, let’s proceed with other parts of the application.

Fetching and Displaying the Products in the Database

We’ll start by fetching and displaying the products that are currently in the database. Update the pages/shop.js file with the following code:

    import { Box, Flex, Heading, VStack } from "@chakra-ui/react";
    import ProductCard from "@components/ProductCard";
    import { getXataClient } from "utils/xata";
    import ProductModal from "@components/ProductModal";
    import AddProductForm from "@components/AddProductForm";

    export default function Shop({ data }) {
      return (
        <Box>
          <Flex justify="space-between" align="">
            <Heading as="h1" mb={5}>
              Products
            </Heading>
            <ProductModal modalTitle="Add product" modalBtnTitle="Add Product">
              <AddProductForm />
            </ProductModal>
          </Flex>
          <VStack spacing="2em">
            {data.map(({ id, img, name, price }) => (
              <ProductCard id={id} img={img} name={name} price={price} key={id} />
            ))}
          </VStack>
        </Box>
      );
    }

    export async function getServerSideProps() {
      const xata = getXataClient();
      const data = await xata.db.Products.getAll();
      return { props: { data } };
    }

Here, we did the following:

Imported the getXataClient utility and initialized a new instance
Queried the Products table and fetched all records with getServerSideProps
Passed the fetched data to the ProductCard component to render

Adding a Product

Update the components/AddProductForm.js file with the code below to set up the product addition functionality.

    import { useState } from "react";
    import { Button, Box, Image, Input, VStack, useToast } from "@chakra-ui/react";
    import ShowImageUploadWidget from "@utils/upload";

    export default function AddProductForm() {
      const [imgUrl, setImgUrl] = useState(null);
      const toast = useToast();

      const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        const name = data.name;
        const price = data.price;
        fetch("/api/add-product", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ name, price, imgUrl }),
        });
        e.target.reset();
        toast();
      };
      return (
        <form onSubmit={handleSubmit}>
          //insert form fields here
          <Button
            onClick={() => ShowImageUploadWidget(setImgUrl)}>
            Upload Image
          </Button>
        </form>
      );
    }

Here, we did the following:

Created a handleSubmit function that takes the form data and passes it to the add-product route, which will handle pushing the form data to the Products db
Set up an imgUrl state that will contain the URL of the product’s image users upload to Cloudinary
Imported a ShowImageUploadWidget function from the utils directory
Passed ShowImageUploadWidget to the Upload Image button’s onClick event handler
Used the toast method to display a message upon successful form submission
Passed handleSubmit to the form’s onSubmit event handler

Here’s the code for the ShowImageUploadWidget function. Create a utils/upload.js file and update it with the code. The product image upload is handled by Cloudinary’s Upload Widget.

    function ShowImageUploadWidget(setImgUrl) {
      window.cloudinary
        .createUploadWidget(
          {
            cloudName: "your-cloud-name",
            uploadPreset: "ml_default",
          },
          (error, result) => {
            if (!error && result && result.event === "success") {
              setImgUrl(result.info.thumbnail_url);
            }
            if (error) {
              console.log(error);
            }
          }
        )
        .open();
    }

    export default ShowImageUploadWidget;

Let’s breakdown the snippet above:

ShowImageUploadWidget calls the createUploadWidget that exists in the cloudinary object
createUploadWidget takes in our cloudname as part of its config
ShowImageUploadWidget accepts the setImgUrl function as an argument. If an avatar is uploaded successfully, the imgUrl state will be updated with the URL of the avatar a user uploads

We have to load the widget’s script in order for it to work. Next.js provides a [Script](https://nextjs.org/docs/basic-features/script) component that we can use to load third-party scripts in our application.

Update the _app.js file with the following code:

    import { ChakraProvider } from "@chakra-ui/react";
    import Wrapper from "@layout/index";
    import Script from "next/script";

    function MyApp({ Component, pageProps }) {
      return (
        <ChakraProvider>
          <Script
            src="https://upload-widget.cloudinary.com/global/all.js"
            type="text/javascript"
            strategy="beforeInteractive"
          />
          <Wrapper>
            <Component {...pageProps} />
          </Wrapper>
        </ChakraProvider>
      );
    }
    export default MyApp;

Here, we imported the Script component from Next.js and used it to load the widget’s script.

Updating a Product

Update the components/UpdateProductForm.js file with the code below to set up the product update functionality.

    import { useRouter } from "next/router";
    import { Button, Input, VStack, useToast } from "@chakra-ui/react";

    export default function UpdateProductForm({ product }) {
      const toast = useToast();
      const router = useRouter();

      const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        const name = data.name;
        const price = data.price;
        fetch("/api/update-product", {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ id: product.id, name, price }),
        });
        toast();
        router.push("/shop");
      };

      return (
        <form onSubmit={handleSubmit}>
          //insert form fields here
        </form>
      );
    }

Here, we did the following:

Created a handleSubmit function that takes the form data and passes it to the update-productroute, which will update the product’s data in the Products db
Used the toast method to display a message upon successful form submission
Redirected the user to the /shop route after form submission
Passed handleSubmit to the form’s onSubmit event handler

Deleting a Product

Update the pages/product/[id].js file with the code below to set up the product deletion functionality.

    import Head from "next/head";
    import Image from "next/image";
    import { useRouter } from "next/router";
    import { Box, Button, Flex, Heading, HStack, Text } from "@chakra-ui/react";
    import { getXataClient } from "@utils/xata";
    import ProductModal from "@components/ProductModal";
    import UpdateProductForm from "@components/UpdateProductForm";

    const xata = getXataClient();

    export default function Product({ product }) {
      const router = useRouter();

      function deleteProduct(id) {
        fetch("/api/delete-product", {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ id }),
        });
        router.push("/shop");
      }
      return (
        <Box>
          //insert ui code here 
        </Box>
      );
    }

    export async function getStaticProps({ params }) {
      try {
        const data = await xata.db.Products.filter({
          id: params.id,
        }).getMany();
        return {
          props: { product: data[0] },
        };
      } catch (error) {
        return {
          props: {},
        };
      }
    }

    export async function getStaticPaths() {
      const products = await xata.db.Products.getAll();
      return {
        paths: products.map((product) => ({
          params: { id: product.id },
        })),
        fallback: true,
      };
    }

Here, we did the following:

Used getStaticPaths and getStaticProps to dynamically render the paths for each product
Created a deleteProduct function that takes in a product’s id and passes it to the delete-product route, which will delete the product from the db
Redirected the user to the /shop route after form submission

With that, we have successfully set up the functionality for the application, and it is good to go.

Conclusion

In this article, we learned how to create an ecommerce admin application with Xata and Cloudinary.

Resources

Build a Chat App with Cloudinary and Xata

nefejames — Wed, 23 Nov 2022 09:13:54 +0000

One common thing with platforms like WhatsApp, Telegram, Twitter, and Instagram is that they all offer great chat functionality via their mobile and web applications. The ability to communicate swiftly with people across the globe has never been more important.

In this article, we‘ll learn how to create a chat application with Next.js, Cloudinary's Upload widget, and Xata.

Demo and Source Code

View the live demo via this link and access the source code on GitHub.

Prerequisites

To follow along with this article, we need to have:

Knowledge of React and Next.js
A Cloudinary account
A Xata account
Understanding of Chakra UI is advantageous but not required

What Is Xata?

What is Cloudinary?

Cloudinary is a cloud-based and end-to-end platform with tools and functionalities for storing, processing, editing, managing, delivering, and transforming media assets.

What We Will Create

The screenshot below shows the application we will create.
Users can fill in their name, provide a message and upload their avatar through the form on the right. Upon clicking the Send button, the data gets saved to Xata’s database. We fetch the chats from the database and display them on the left side of the application.
The avatar image upload is handled by Cloudinary’s Upload Widget.

Getting Started

Download, clone, or fork this starter template that contains the UI for the chat app.

    npx create-next-app xata-cloudinary-chat-app -e https://github.com/nefejames/hackmamba-xata-chat-app-ui
    or
    yarn create next-app xata-cloudinary-chat-app -e https://github.com/nefejames/hackmamba-xata-chat-app-ui

Next, navigate to the project directory, and run the command below to install Chakra UI, Next.js, Xata’s SDK, and every other necessary dependency, then run the application.

    npm i

The starter template consists of the following files:

components/ChatContainer.js: the container that holds the chats
components/ChatInput.js: where users can input and submit new chats
components/ChatProfile.js: holds each user’s name, avatar, and chat message
layout/index.js: the layout for the application
utils: will hold the Xata instance and avatar upload logic, which we will set up later

Setting up the Xata Database

We start by creating a new database called chat-app on our Xata account.

Next, create a messages table that will contain the records of the chat messages that users submit. Each record will have message, author, img, and id properties; the id is automatically generated by Xata.
We got the images from the media uploads in our Cloudinary account.

The database schema is ready, so let’s set up the Xata instance next, and integrate it into the application.

Setting up the Xata Instance

Run the command below to install the CLI globally.

    npm install @xata.io/cli -g

Next, run xata auth login, which will prompt you to Create a new API key in the browser or use an existing one; we’ll go with the first option.

Once in the browser, give the API a name and click the Create API key button.

Back on the dashboard, click on the Get Code Snippet button at the top right corner and copy the second command. We will use it to initialize the project locally with the aid of the CLI.

Run the command in the terminal and choose from the configuration options. The screenshot below shows the configurations for this application.

The CLI will automatically create a xata.js file that contains the XataClient instance we need; let’s move on to the coding aspects of the application.

Fetching the Messages in the Database

We’ll start by fetching the messages that already exist in the database. Update the index.js file with the following code:

    import { Box, Flex, Heading } from "@chakra-ui/react";
    import ChatContainer from "@components/ChatContainer";
    import ChatInput from "@components/ChatInput";
    import { getXataClient } from "@utils/xata";

    export default function Home({ data }) {
      return (
        <div>
          <Heading as="h1" mb={5}>
            Xata Chat App
          </Heading>
          <Flex flexDir={["column", "row"]} justifyContent="space-between">
            <ChatContainer chats={data} />
            <Box>
              <ChatInput />
            </Box>
          </Flex>
        </div>
      );
    }

    export async function getServerSideProps() {
      const xata = getXataClient();
      const data = await xata.db.messages.getAll();
      return { props: { data } };
    }

Here, we did the following:

Imported the getXataClient utility and initialized a new instance
Queried the messages table and fetched all records with getServerSideProps
Passed the fetched data to the ChatContainer component through props

Displaying the Messages in the ChatContainer Component

Here, we then loop through the data and display the individual messages in the UI.

    import { Box, VStack } from "@chakra-ui/react";
    import ChatProfile from "./ChatProfile";

    export default function ChatContainer({ chats }) {
      return (
        <Box>
          <VStack spacing={5}>
            {chats.map((chat) => (
              <ChatProfile
                key={chat.id}
                author={chat.author}
                img={chat.img}
                message={chat.message}
              />
            ))}
          </VStack>
        </Box>
      );
    }

Setting up the Avatar Upload Functionality in the ChatInput Component

When a user clicks on the Upload Avatar button, Cloudinary’s Upload Widget will open, enabling the user to upload a picture; let’s set it up. Update the ChatInput.js file with the following code:

    import { useState } from "react";
    import { Box, Button, Input, Flex } from "@chakra-ui/react";
    import ShowImageUploadWidget from "@utils/upload";

    export default function ChatInput() {
      const [imgUrl, setImgUrl] = useState(null);

      return (
        <Box w={["full", "400px"]}>
          <form>
            <Flex flexDir="column">
              <Input name="author" placeholder="Author" />
              <Input name="newMessage" placeholder="Message" />
              <Button
                onClick={() => ShowImageUploadWidget(setImgUrl)}
              >
                Upload Avatar
              </Button>
              <Button type="submit">Send</Button>
            </Flex>
          </form>
        </Box>
      );
    }

Here, we did the following:

Set up an imgUrl state that will contain the URL of the avatar users upload to Cloudinary
Imported a ShowImageUploadWidget function from the utils directory
Passed ShowImageUploadWidget to the Upload Avatar button’s onClick event handler

The ShowImageUploadWidget function is responsible for the upload functionality. Create a upload.js file and paste the following code to set up ShowImageUploadWidget.

    function ShowImageUploadWidget(setImgUrl) {
      window.cloudinary
        .createUploadWidget(
          {
            cloudName: "your-cloud-name",
            uploadPreset: "ml_default",
          },
          (error, result) => {
            if (!error && result && result.event === "success") {
              setImgUrl(result.info.thumbnail_url);
            }
            if (error) {
              console.log(error);
            }
          }
        )
        .open();
    }

    export default ShowImageUploadWidget;

JavaScript

Let’s breakdown the snippet above:

ShowImageUploadWidget calls the createUploadWidget that exists in the cloudinary object
createUploadWidget takes in our cloudname as part of its config
ShowImageUploadWidget accepts the setImgUrl function as an argument. If an avatar is uploaded successfully, the imgUrl state will be updated with the URL of the avatar a user uploads

Update the _app.js file with the following code:

    import { ChakraProvider } from "@chakra-ui/react";
    import Wrapper from "@layout/index";
    import Script from "next/script";

    function MyApp({ Component, pageProps }) {
      return (
        <ChakraProvider>
          <Script
            src="https://upload-widget.cloudinary.com/global/all.js"
            type="text/javascript"
            strategy="beforeInteractive"
          />
          <Wrapper>
            <Component {...pageProps} />
          </Wrapper>
        </ChakraProvider>
      );
    }

    export default MyApp;

Here, we imported the Script component from Next.js and used it to load the widget’s script.

Setting up the Form Submission Functionality in the ChatInput Component

The form submission functionality is the last thing we need to set up. Update the ChatInput component with the following code:

    import { useState } from "react";
    import { Box, Button, Input, Flex, useToast } from "@chakra-ui/react";
    import ShowImageUploadWidget from "@utils/upload";

    export default function ChatInput() {
      const toast = useToast();
      const [imgUrl, setImgUrl] = useState(null);

      const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        const author = data.author;
        const newMessage = data.newMessage;
        fetch("/api/add-message", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            author,
            newMessage,
            imgUrl,
          }),
        });
        e.target.reset();
        toast({
          title: "Message created.",
          description: "Message sent to chat db.",
        });
      };

      return (
        <Box w={["full", "400px"]}>
          <form onSubmit={handleSubmit}>
            <Flex flexDir="column">
              <Input name="author" placeholder="Author" />
              <Input name="newMessage" placeholder="Message" />
              <Button>
                Upload Avatar
              </Button>
              <Button type="submit">Send</Button>
            </Flex>
          </form>
        </Box>
      );
    }

Here, we did the following:

Created a handleSubmit function that takes the form data and passes it on the add-messages route. The add-messages will handle pushing the form data to the Xata database; we will set up the route next
Used the toast method to display a message upon successful form submission
Passed handleSubmit to the form’s onSubmit event handler

For the API route, create a api/add-message.js file and paste the following code:

    import { getXataClient } from "@utils/xata";
    const xata = getXataClient();

    const handler = async (req, res) => {
      const { author, newMessage, imgUrl } = req.body;
      await xata.db.messages.create({
        author: author,
        message: newMessage,
        img: imgUrl,
      });
      res.end();
    };

    export default handler;

Here, we did the following:

Imported the getXataClient utility and initialized a new instance
Accessed the author, newMessage, and imgUrl from the request’s body
Saved the new chat data to the messages table on Xata

Conclusion

With that, we have successfully created a chat application with Cloudinary and Xata. The purpose of this simple is to give a brief overview of the features of these awesome technologies. We can take the project to the next step by validating the form fields during submission and adding user authentication and real-time functionality to the application.

Resources

How to Authenticate a Next.js app with Okta

nefejames — Tue, 16 Aug 2022 11:07:08 +0000

Ensuring that only authenticated users have access to specific parts of an application is an important aspect of web development.

In this article, we will learn how to authenticate a Next.js application using Appwrite’s Okta OAuth2 provider.

The source code is also available on GitHub.

Prerequisites

To get the most out of this project, the following are required:

Basic understanding of React and Next.js
Docker installation
An Appwrite instance; check out this article on how to set up an instance
An Okta developer account (sign up here)

Getting Started

Create a Next.js project by running the command below in our terminal:



npx create-next-app okta-auth-app

Next, navigate into the project directory.



cd okta-auth-app

Then, run the command below to start the application:



 npm run dev

Installing Appwrite

Appwrite is an open-source, end-to-end development platform that allows developers to build applications faster. Run the command below to install it:



npm i appwrite

Creating a New Appwrite Project

To create a new project, start up the Appwrite instance on your machine and navigate to the specified hostname and port http://localhost:80. Next, we need to log in to our account or create an account if we don’t have one.

On the console, click the Create Project button, give the project a name, and then click Create.

The project dashboard will appear on the console. Next, click on the Settings tab and copy the Project ID and API Endpoint.

Creating an Appwrite Instance in the Next.js App

Create a utils.js file in the root of the application and in there, paste the code below:



import { Appwrite } from "appwrite";
const appwrite = new Appwrite();
appwrite
  .setEndpoint("http://localhost/v1")
  .setProject("your-project-id");
export default appwrite;

We used the Appwrite Project ID and API Endpoint to set up the instance in our application.

Activating Okta Auth Method on Appwrite

Navigate to the Users menu, select the Settings tab, and enable the Okta OAuth2 provider:

Upon enabling the Okta provider, we will be required to fill in the App ID and App Secret. We will fill them in shortly.

Copy Appwrite’s callback URI below, as we will need it to configure the Okta authentication later.

Setting up an Okta Application

We need to set up a new integration on our Okta account. Go to the Applications page on the sidebar menu and click the Create App Integration button.

Select OIDC - OpenID Connect as the Sign-in method and Web Application as the Application type.

We need to configure the new app integration to work with Appwrite. Add the callback URI we copied earlier as one of the Sign-in redirect URIs, then save the application.

We also need to copy the Okta domain, Client ID, and Client Secret and paste them into our Appwrite configuration. Then, click Update.

Integrating Appwrite Authentication into Next.js

The application will contain two pages; a page to log in and another page to show logged-in user details.

Creating the login page Update the index.js file inside the pages folder with the snippet below:



import Head from "next/head";
import { Button, Center } from "@chakra-ui/react";
import appwrite from "utils";

export default function Home() {

  const loginWithOkta = async () => {
    try {
      await appwrite.account.createOAuth2Session(
        "okta",
        "http://localhost:3000/user"
      );
    } catch (error) {
      throw error;
    }
  };

  return (
    <Center>
      <Button onClick={loginWithOkta}>Login with Okta</Button>
    </Center>
  );
}

Here, we did the following:

Imported the required dependencies
Created a loginWithOkta asynchronous function that uses the Appwrite dk we initialized earlier to authenticate using Okta as the provider and http://localhost:3000/user as the URL it redirects to when the authentication is successful; we will create the user page in the next section
Passed the loginWithOkta function to the button’s onClick handler

Creating the User Page
Create a user.js file in the pages directory and update it with the snippet below:



import { Button, Center, Text, Heading, Stack } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import appwrite from "utils";

export default function User() {
  const [loggedInUser, setLoggedInUser] = useState(null);
  const router = useRouter();

  const getLoggedInUser = async () => {
    const data = (await appwrite) && appwrite.account.get();
    data
      .then((res) => setLoggedInUser(res))
      .catch((err) => {
        router.push("/");
        console.log(err);
      });
  };

  useEffect(() => {
    getLoggedInUser();
  }, []);

  const logOut = async () => {
    await appwrite.account.deleteSession("current");
    alert("logout successful");
    router.push("/");
  };

  return (
    loggedInUser && (
      <Center>
        <Stack>
          <Heading>You logged-in successfully</Heading>
          <Text>User: {loggedInUser.name}</Text>
          <p>Email: {loggedInUser.email}</p>
          <Button onClick={logOut} mt={20}>
            Logout
          </Button>
        </Stack>
      </Center>
    )
  );
}


```javascript

Here, we did the following:

-   Imported the required dependencies

-   Created state and route variables to manage logged-in user sessions and route accordingly

-   Created a `getLoggedInUser` function to get the logged-in user session and re-route to the login page if the session is empty and also called the function upon page load using the `useEffect` hook

-   Created a `logOut` function to log the user out and passed it to the button’s `onClick` handler

With that, we have successfully authenticated a Next.js app application with Okta.

![Demo](https://paper-attachments.dropbox.com/s_1638054D4FB2873BD3F938D25C75E763BFF13000BF29E067143C7C912818FACD_1656544770916_ezgif.com-gif-maker2.gif)

Conclusion
----------

This post discussed how to authenticate a Next.js application using Appwrite’s Okta OAuth2 provider.

Resources
---------

These resources might be helpful:

-   [Set up Appwrite instance locally](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) 

-   [Appwrite OAuth2 documentation](https://appwrite.io/docs/client/account?sdk=web-default#accountCreateOAuth2Session)

-   [Appwrite - Getting Started for Web](https://appwrite.io/docs/getting-started-for-web)

Build an Ecommerce Store with Next.js, Auth0 and Cloudinary

nefejames — Mon, 18 Oct 2021 08:14:51 +0000

Multimedia content optimization is the process of delivering high-quality media files in the right dimension, size, and format without sacrificing quality.

When poorly optimized, the images and videos in your websites can lead to a poor user experience, loss of traffic, and low SEO rankings.

In this article, we will learn how Cloudinary enables us to serve fast-loading images and videos through their CDN. We will also learn to set up user authentication with Auth0 and create responsive components with Chakra UI. We will combine these technologies to develop an eCommerce application.

We completed the project demo in a codesandbox.

You can find the deployed version here and the codebase in this Github repo.

Prerequisites/Installation

Having some knowledge of and experience with, React.js and Chakra UI are required to follow the steps in this article. We will use the images and videos hosted on Cloudinary so you will need a Cloudinary account. Auth0 will handle the user authentication through their universal login service, so you must create an account.

As I mentioned earlier, we will be using Next.js in this project, so we need to scaffold a new Next.js application.

We will also use the following packages in the application:

cloudinary-react’s Video component to display videos.
Auth0’s Next.js SDK to handle the user authentication.
Chakra UI to create the user interface.

We install the required packages in our application using the CLI command:

npm i chakra-ui cloudinary-react auth0/nextjs-auth0

Creating the Homepage

The homepage consists of a header and a hero section; the header consists of the logo and a login/sign-in button, and the hero consists of the website copy on the left and an image on the right.

We can see the appearance of the homepage in the image below.

Let’s begin by creating the layout for the homepage.

    import { Box, Container } from "@chakra-ui/react";
    import HomeHeader from "@components/Headers/Home";

    export default function HomeLayout({ children }) {
      return (
        <Box>
          <Container maxW={"7xl"}>
            <HomeHeader />

            {children}
          </Container>
        </Box>
      );
    }

For the homepage layout, we create a component, HomeLayout. HomeLayout consists of a HomeHeader component and the children we will pass into it later. HomeLayout is where the hero section will sit.

Creating the Homepage Header
Next, we create the homepage header.

    import NextLink from "next/link";
    import { Box, Flex, Button } from "@chakra-ui/react";
    import Logo from "@svgs/Logo";

    export default function HomeHeader() {
      return (
        <Box>
          <Flex>
            <NextLink href="/" rel="noopener noreferrer" target="_blank">
              <a>
                <Logo />
              </a>
            </NextLink>
          </Flex>      
        </Box>
      );
    }

The HomeHeader component is made up of the Logo. We will add a login button later in the article.

Creating the Hero Section
Now, we move on to the hero section.

    import { Stack, Flex, Box, Heading, Text, Image } from "@chakra-ui/react";
    import HomeLayout from "@layout/Home";

    export default function Home() {
      return (
        <HomeLayout>
          <Stack>
            <Stack flex={1} spacing={{ base: 5, md: 10 }}>
              <Heading lineHeight={1.1} fontWeight={600} fontSize={["3xl", "4xl", "6xl"]}
              >
                Get your perfect companion{" "}
                <Text as="span" color="blue.500">
                  today!
                </Text>
              </Heading>
              <Text color="gray.200" fontSize={["lg"]}>
                Buyng a pet is a big decision, and we are here to help you through
                the process. It's time to add a new love to your family. Discover
                the right pet for you. It's time to find your new best friend.
              </Text>
            </Stack>
            <Flex>
              <Box>
                <Image alt="Hero Image" fit="cover" align="center" w="100%" h="100%"
                  src=" https://res.cloudinary.com/nefejames/image/upload/q_auto,f_auto,w_auto/v1632501665/Hackmamba/Images/hero.jpg"
                />
              </Box>
            </Flex>
          </Stack>
        </HomeLayout>
      );
    }

The hero image is gotten from our Cloudinary media repository. Let’s breakdown the URL of the image:

q_auto: produces a high quality image with a minimal the file size.
f_auto: delivers the image in the best format supported by the browser.
w_auto: serves images proportional to users’ device resolution and screen sizes.

Creating the Dashboard

The dashboard consists of a header, sidebar, and dashboard view that contains the products.
The header consists of the logo and a button to toggle the sidebar.
The sidebar consists of a link to illustrate how a dashboard looks in a full-scale application.

Let’s start by creating the layout of the dashboard.

    import { useMediaQuery, Box, Stack } from "@chakra-ui/react";
    import Header from "@components/Headers/Dashboard/";
    import Page from "./Page";
    import { DesktopSidebar, MobileSidebar } from "@components/DashboardSidebar";

    export default function DashboardLayout({ children }) {
      const [isSmallScreen] = useMediaQuery("(max-width: 768px)");

      return (
        <Box w="full">
          <Header />
          <Box pos="relative" h="max-content">
            <Stack direction="row" spacing={{ md: 5 }}>
              <DesktopSidebar />
              {isSmallScreen && <MobileSidebar />}
              <Page>{children}</Page>
            </Stack>
          </Box>
        </Box>
      );
    }

The dashboard layout consists of two dashboards, a mobile dashboard, and another for desktops.
We create a DashboardLayout component and use Chakra’s [useMediaQuery](https://chakra-ui.com/docs/hooks/use-media-query) hook to set up a isSmallScreen boolean. We show the mobile sidebar when isSmallScreen is true - when the max-width is 768px.

The Dashboard Context and Interactivity Flow
Before we continue building the dashboard, we need to understand its flow. We want to add some interactivity to the dashboard to boost the user experience.

We want to be able to toggle the width of the desktop sidebar. We also want the mobile sidebar to slide in and out when toggled.

A core aspect of this functionality is a sidebar context, which we will create. The value of the sidebar context is gotten from Chakra UI’s [useDisclosure](https://chakra-ui.com/docs/hooks/use-disclosure) hook. useDisclosure is a custom hook used to help handle common open, close, or toggle scenarios.

When setting up the sidebar, we will create and export a useSidebarAuth hook that consumes the sidebar context and makes its values accessible throughout the application.

We will pass the useSidebarAuth hook to a SidebarToggleButton component which we will create later. SidebarToggleButton will enable us to toggle the sidebar context’s isOpen value when clicked. We will pass SidebarToggleButton to the dashboard header later.
Whenever a user clicks the SidebarToggleButton, we alter the behavior of the desktop or mobile sidebars based on the current value of isOpen.

The flow chart image below shows us how the sidebar context works with the dashboard components and how we will set up the interactivity.

Creating the Sidebar Context

Now that we understand the sidebar context and how it is used in the dashboard, let us set up the context.

    import { createContext, useContext } from "react";
    import { useDisclosure } from "@chakra-ui/react";

    const SidebarContext = createContext(null);
    export const useSidebarAuth = () => useContext(SidebarContext);

    export default function SidebarContextProvider({ children }) {
      const sidebarState = useDisclosure();

      return (
        <SidebarContext.Provider value={sidebarState}>
          {children}
        </SidebarContext.Provider>
      );
    }

As stated earlier, we use the useDisclosure hook to set up the context and export a useSidebarAuth hook that consumes the context.

Creating the Sidebar Toggle Button
The next thing we need to do is create the SidebarToggleButton component.

    import { Icon, IconButton } from "@chakra-ui/react";
    import { CgClose, CgMenu } from "react-icons/cg";
    import { useSidebarAuth } from "@context/sidebarContext";

    export default function SidebarToggleButton() {
      const { onToggle, isOpen } = useSidebarAuth();
      const icon = isOpen ? CgClose : CgMenu;
      return (
        <IconButton
          size="sm"
          fontSize="lg"
          variant="ghost"
          onClick={onToggle}
          icon={<Icon as={icon} />}
          aria-label="Toggle Actions"
          transition="all .4s ease-in-out"
        />
      );
    }

As explained earlier, when SidebarToggleButton is clicked, the isOpen value of the context is toggled.

Creating the Dashboard Header
Next we set up the dashboard header.

    import NextLink from "next/link";
    import { Flex, Spacer, Stack, Button, Link } from "@chakra-ui/react";
    import SidebarToggleButton from "./components/SidebarToggleButton";
    import Logo from "@svgs/Logo";

    export default function DashboardHeader() {
      return (
        <Flex
          h="10vh"
          minH="70px"
          pos="sticky"
          top="0"
          zIndex="2"
        >
          <Stack direction="row" w="full" alignItems="center" spacing="8">
            <NextLink href="/" rel="noopener noreferrer" target="_blank">
              <a>
                <Logo />
              </a>
            </NextLink>
            <SidebarToggleButton />

          </Stack>
        </Flex>
      );
    }

As I explained with the flow chart, we add the SidebarToggleButton component to the dashboard header.

Creating the Desktop Sidebar
The dashboard has two sidebars, one for mobile devices, and another for desktop devices. Let’s start with the desktop sidebar.

    import { useRouter } from "next/router";
    import { useSidebarAuth } from "@context/sidebarContext";

    export default function Sidebar() {
      const router = useRouter();

      return (
        <Stack
          minH="full"
          h="90vh"
          pos="sticky"
          top="10vh"
          display={["none", , "initial"]}
          transition="width .4s ease-in-out"
        >
          <NavLink
            active={router.pathname === "/"}
            name="Home"
            href="/"
            icon={IoHomeSharp}
          />
        </Stack>
      );
    }

We want the desktop sidebar to be hidden on mobile, so we set the display to none.

Creating the Mobile Sidebar
We make use of Chakra’s [Drawer](https://chakra-ui.com/docs/overlay/drawe) component to set up the mobile sidebar.

    import { useEffect } from "react";
    import { useRouter } from "next/router";
    import {
      Drawer,
      DrawerCloseButton,
      DrawerContent,
      DrawerOverlay,
    } from "@chakra-ui/react";
    import { useSidebarAuth } from "@context/sidebarContext";
    import FullNavLink from "./FullNavLink";

    export default function MobileSidebar() {
      const router = useRouter();
      const { isOpen, onClose } = useSidebarAuth();

      useEffect(() => {
        router.events.on("routeChangeComplete", onClose);
        return () => {
          router.events.off("routeChangeComplete", onClose);
        };
      }, []);
      return (
        <Drawer isOpen={isOpen} onClose={onClose} placement="left">
          <DrawerOverlay display={["initial", , "none"]}>
            <DrawerContent layerStyle="neutral" py={12} bg="gray.900">
              <Stack spacing={2} fontSize="sm">
                <DrawerCloseButton />
                <FullNavLink
                  active={router.pathname === "/"}
                  name="Home"
                  href="/"
                  icon={IoHomeSharp}
                />
              </Stack>
            </DrawerContent>
          </DrawerOverlay>
        </Drawer>
      );
    }

Next.js provides a router event, routeChangeComplete, which we use to toggle the mobile sidebar when a link is clicked.

The Dashboard View
Before we proceed, we need to break down the dashboard view. The dashboard view consists of the DashboardLayout component we set up earlier, a grid of products in a ProductCard component, and a ModalProduct component.

Let’s set up the dashboard view.

    import { useState } from "react";
    import { Box, SimpleGrid } from "@chakra-ui/react";
    import { motion } from "framer-motion";
    import ProductCard from "@components/ProductCard";
    import DashboardLayout from "@layout/Dashboard";
    import ModalProduct from "@components/ModalProduct";
    import data from "@root/data";
    const MotionSimpleGrid = motion(SimpleGrid);
    const MotionBox = motion(Box);

    export default function Dashboard() {
      const [modalData, setModalData] = useState(null);
      return (
        <DashboardLayout>
          <Box>
            <MotionSimpleGrid>
              {data.map((product) => (
                <MotionBox variants={cardVariant} key={product.id}>
                  <ProductCard product={product} setModalData={setModalData} />
                </MotionBox>
              ))}
            </MotionSimpleGrid>
            <ModalProduct
              isOpen={modalData ? true : false}
              onClose={() => setModalData(null)}
              modalData={modalData}
            />
          </Box>
        </DashboardLayout>
      );
    }

Let’s breakdown the snippet above:

We define a modalData state where the data of the clicked product will be stored.
We pass setModalData and the product data to the ProductCard component. We will use this to update the modalData state with the data from the current product being clicked.
We pass an isOpen boolean, an onClose method and and the modalData state to the ModalProduct component. The value of isOpen depends on the value of modalData. If modalData is null, then isOpen is false.

When ProductCard is clicked, it triggers ModalProduct and causes ModalProduct to pop up.

Here’s a sample of the data we map through and pass to ProductCard.

    const data = [
      {
        title: "First Pet",
        price: 250,
        img: "https://res.cloudinary.com/nefejames/image/upload/q_auto,f_auto,w_auto/Hackmamba/Images/pet1.jpg",
        video: "/Hackmamba/Videos/pet1",
      },
      {
        title: "Second Pet",
        price: 250,
        img: "https://res.cloudinary.com/nefejames/image/upload/q_auto,f_auto,w_auto/Hackmamba/Images/pet2.jpg",
        video: "/Hackmamba/Videos/pet2",
      },
      // other data objects below
    ]

Creating the **ProductCard** and **ModalProduct** Component
Now that we understand how ProductCard and ModalProduct work, let’s create them.

Let’s start with setting up ProductCard.

    import Image from "next/image";
    import { Box, Flex } from "@chakra-ui/react";
    import { StarIcon } from "@chakra-ui/icons";

    export default function ProductCard({ product, setModalData }) {
      const { img, beds, baths, title, price } = product;
      const score = Math.floor(Math.random(5) * 5);
      const reviewCount = Math.floor(Math.random(50) * 50);

      return (
        <Flex>
          <Box onClick={() => setModalData(product)}>
            <Box>
              <Image
                src={img}
                objectFit="cover"
                alt="picture of an animal"
                layout="fill"
                objectFit="cover"
              />
            </Box>

            <Box p="6">
              <Box> {title} </Box>
              <Box>${price}</Box>

              <Box d="flex" mt="3" alignItems="center">
                {Array(5)
                  .fill("")
                  .map((_, i) => (
                    <StarIcon key={i} color={i < score ? "teal.500" : "gray.300"} />
                  ))}
                <Box as="span" ml="2" color="gray.600" fontSize="sm">
                  {reviewCount} reviews
                </Box>
              </Box>
            </Box>
          </Box>
        </Flex>
      );
    }

As stated earlier, we pass setModalData to ProductCard. When ProductCard is clicked, the modalData state is updated with the data of the product card that was clicked.

Next, let’s set up ModalProduct. To do that we use Chakra UI’s Modal component.

    import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody,
      ModalCloseButton, Button, useToast } from "@chakra-ui/react";
    import { Video } from "cloudinary-react";

    export default function ModalProduct({ isOpen, onClose, modalData }) {
      const { title, price, video } = modalData || {};
      const toast = useToast();

      const handleModalClose = () => {
        toast({
          title: "Purchase successsful.",
          description: "One more happy pet.",
          status: "success",
          duration: 3000,
          isClosable: true,
        });
        setTimeout(() => {
          onClose();
        }, 1000);
      };

      return (
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent>
            <ModalCloseButton />
            <ModalHeader>Pet Details</ModalHeader>
            <ModalBody>
              <Box w="full" h="full">
                <Video controls publicId={video} width={300} crop="scale" />

                <Box pt="3">
                  <Box> {title} </Box>
                  ${price}
                </Box>
              </Box>
            </ModalBody>
            <ModalFooter>
              <Button onClick={handleModalClose}>
                Purchase
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      );
    }

Earlier, we passed isOpen, onClose, and modalData to ModalProduct from the dashboard view. In the snippet above, we access them through props. We use isOpen and onClose to set up the modal and pass the data from modalData to the appropriate parts of ModalProduct.

We also define a function, handleModalClose, and pass it to the modal’s purchase button. The handleModalClose function displays a success toast and closes the modal when it is called.

User Authentication

As stated earlier, we will use Auth0 to handle the user authentication in this application. Auth0 has provided a guide on how to work with their Next.js SDK.
The useUser hook exports two objects, user and error, and an isLoading boolean.

user contains information about the authenticated user.
We use isLoading to check if the SDK has completed loading.
We use the error object to check if there were any authentication errors.

We will use the logged-in user profile in the following parts of our application:

the index.js page
the homepage header
the dashboard header

The Index.js Page
When the user logs in from the homepage, we want to redirect them to the dashboard route. We set up a useEffect and check if user exists. If it does, we redirect the user to the app route.

    import { useEffect } from "react";
    import HomePage from "@views/Home";
    import { useUser } from "@auth0/nextjs-auth0";
    import { useRouter } from "next/router";

    export default function Home() {
      const { user } = useUser();
      const router = useRouter();

      useEffect(() => {
        if (user) {
          router.push("/app");
        }
      }, [user, router]);

      return (
        <div>
          <Head>
            <title>Hackmamba PetShop</title>
          </Head>

          <HomePage />
        </div>
      );
    }

The Homepage Header
Here, we conditionally show the logout and login buttons. We show the login button if there is no user and the logout button if there is a logged-in user.

    import NextLink from "next/link";
    import { Box, Flex, Button } from "@chakra-ui/react";
    import Logo from "@svgs/Logo";
    import { useUser } from "@auth0/nextjs-auth0";

    export default function HomeHeader() {
      const { user, isLoading } = useUser();

      return (
        <Box>
          <Flex>
            <NextLink href="/" rel="noopener noreferrer" target="_blank">
              <a>
                <Logo />
              </a>
            </NextLink>

            {!isLoading && !user && (
              <NextLink href="/api/auth/login" passHref>
                <Button as="a" bg="blue.700" _hover={{ bg: "blue.900" }}>
                  Sign In/Log in
                </Button>
              </NextLink>
            )}

            {user && (
              <NextLink href="/api/auth/logout" passHref>
                <Button as="a" bg="blue.700" _hover={{ bg: "blue.900" }}>
                  Logout
                </Button>
              </NextLink>
            )}
          </Flex>
        </Box>
      );
    }

The Dashboard Header
Here, we show the logout button when a user is logged in.

    import NextLink from "next/link";
    import { Flex, Spacer, Stack, Button, Link } from "@chakra-ui/react";
    import SidebarToggleButton from "./components/SidebarToggleButton";
    import { useUser } from "@auth0/nextjs-auth0";
    import Logo from "@svgs/Logo";

    export default function DashboardHeader() {
      const { user } = useUser();

      return (
        <Flex>
          <Stack direction="row" w="full" alignItems="center" spacing="8">
            <NextLink href="/" rel="noopener noreferrer" target="_blank">
              <a>
                <Logo />
              </a>
            </NextLink>
            <SidebarToggleButton />

            <Spacer />

            {user && (
              <Link href="/api/auth/logout">
                <Button bg="blue.700" _hover={{ bg: "blue.900" }}>Logout</Button>
              </Link>
            )}
          </Stack>
        </Flex>
      );
    }

Conclusion

We learned how to use Auth0, Next.js, Chakra UI, and Cloudinary to create an eCommerce application. We also learned how to add interactivity to our applications and make them responsive with Chakra UI’s useDisclosure and useMediaQuery hooks.