DEV Community: Fatima Olasunkanmi-Ojo

Top 5 Technical Writing Communities of 2024

Fatima Olasunkanmi-Ojo — Tue, 19 Mar 2024 11:02:07 +0000

“Alone, we can do so little; together, we can do so much” – Helen Keller

This post was originally published on Hackmamba.

Technical writing communities are essential for your professional growth and development. They provide a platform for knowledge exchange, where you can discuss challenges and share insights with other members. These communities help you stay up-to-date on trends, best practices, and industry updates. In addition to being support systems, they expose you to diverse industry perspectives, help you develop new skills, and offer spaces for networking and building professional relationships.

I have been a beneficiary of technical writing communities as a member, a technical writer, and a community manager. In this article, I will show you the best technical writing communities in 2024 and how they can propel you to becoming a more skilled, connected, and informed technical writer.

Write the Docs

Write the Docs is a renowned global community that unites professionals from diverse backgrounds. The community values effective communication, comprehensive documentation, and user satisfaction, considering anyone who shares these concerns as a valued member.

Key features

Platforms:

The community is hosted on Slack, providing a centralized platform for members to connect, collaborate, and discuss documentation, communication, and user experiences with software.

Membership size and diversity:

Write the Docs is a large and growing community with over 21,000 members actively engaging in documentation discussions and interactions. The diverse group includes programmers, tech writers, developer advocates, customer support, marketers, and anyone who wants people to have great experiences using software.

Activities and resources

Activities:

Write the Docs hosts yearly physical and virtual global conferences, allowing members to share information, discuss ideas, and collaborate on advancing the art and science of documentation. Additionally, monthly meetups in various cities enable members to join local communities or explore alternatives based on their time zone.

The community has a dedicated channel on Slack for a book club called learn-tech-writing, where members exchange ideas about the book they read.

Community members are spotlighted and interviewed, creating resources for new documentarians to gain insight into the work of technical writing. Each interview narrates the story of a community member, sharing their career experiences and offering practical advice for new documentarians.

Resources: Write the Docs has an ever-increasing set of talk videos, articles, links, and learning resources on their blog, podcast, and newsletter. They provide novice and expert writers with a best practice handbook for building, structuring, and writing software documentation on their documentation guide page.

The community has a live list of books on technical writing and related topics, like content strategy and information architecture. They have a growing set of resources for those who want to hire or be hired as a documentarian with a job board to find a documentarian job.

Success stories and achievements

It’s great to be around people who care about the same stuff you do. As soon as somebody gets exposed to something like Write the Docs, their whole world expands, and they’ll learn about opportunities they may have never been aware of- Aaron Thayer
I was getting advice from a lot of people. I would say the career-advice channel is really helpful if you’re trying to get help in software engineering or technical writing. But it’s also helpful to pick someone and establish camaraderie with them. - Christian Bahnweg

Why it's a top community

Write the Docs, a top community with 21,000+ global members, offers conferences, meetups, and valuable resources, fostering growth in technical writing as seen in success stories like Aaron's and Christian's.

Hackmamba Creators

Hackmamba Creators community is a technical writing community created by Hackmamba to bring together technology enthusiasts with varying backgrounds to the field of technical writing. Members of this community learn technical writing concepts, participate in writing sprints and hackathons, and network with peers in order to consistently produce high-quality technical content.

Key features

Platforms:

Hackmamba Creators maintain an active presence on Discord, where members interact in real time and access resources to advance their technical writing skills. The community utilizes a dedicated website to share blog posts and events. Additionally, Hackmamba has an organization account on DEV community with 67 members and 300 posts, exclusively for publishing members' challenges and sprints' content.

Membership size and diversity:

With over 1000 active members, Hackmamba Creators embraces individuals of all backgrounds, from beginners to experienced professionals. The community's diversity enhances the richness of discussions, ensuring a comprehensive learning environment with a broad spectrum of experiences and insights.

Activities and resources

Activities:

Hackmamba Creators organizes bi-weekly challenges on the Discord server for participants to learn, build, and write about software tools. Collaborating with companies like Neon, they hosted a month-long sprint challenge where members created content to address real-world challenges, fostering collaboration, innovation, and rewarding contributions to active members.

Every month, the community holds a workshop on Discord, discussing different writing topics. Past events covered crafting compelling narratives and mastering research skills. Authors share articles in a dedicated channel, creating a central learning hub. Hackmamba Creator spotlights contributors weekly, boosting visibility and creating networking opportunities for featured members. In addition, Hackmamba broadcasts its weekly "Everything Outside Code" livestream on YouTube every Wednesday to share insights from creators, entrepreneurs, and developer advocates.

Resources:

Once a week, Hackmamba Creators share guides, resources, and links in Discord, accompanied by thought-provoking questions. Members engage in discussions, creating an engaging learning experience. The collablearning hub channel focuses on weekly learning with designated resources, fostering active participation, feedback sharing, and concept discussions. Additionally, the community posts up to three job opportunities weekly in the opportunities channel, enhancing the overall learning and professional growth atmosphere.

Success stories and achievements

Being part of the Hackmamba technical writing community significantly impacted my growth and knowledge in the technical writing field. The community offers an excellent platform for knowledge sharing, networking, and collaboration with fellow technical writers, enriching my understanding of various technical writing concepts and best practices. - Okafor Peace Ngozi
I wanted to give up because I thought I didn’t have a flair for writing, but joining the Hackmamba community took that thought away. I am now very confident in myself. Now, I could have little to no knowledge about a subject matter but still produce a good article - Esther Idabor

Why it's a top community

Hackmamba Creators has over 1000 members and offers learning, interaction, and a blog to showcase members' work. Inclusion is its strength: it welcomes people from various backgrounds to have comprehensive discussions. Members learn together by collaborating on challenges and workshops. With weekly resource sharing and a special collablearning hub, the community fosters a dynamic and growing learning environment.

WriteTech Hub

WriteTech Hub is an IT services and consulting organization with a hub for creating clear and engaging technical writing. The organization aims to empower businesses and individuals by crafting clear, concise, and captivating technical content that resonates with various audiences. The organization runs a community for technical writers to connect with like minds, discuss challenges, share experiences, and seek advice from peers and mentors.

Key features

Platforms:

WriteTech Hub serves as a gathering place for technical writing enthusiasts and experts, cultivating interaction and providing opportunities for mentorship, career development, and job prospects through Slack.

Membership size and diversity:

WriteTech Hub is a vibrant community for technical writing enthusiasts and experts, promoting interaction and offering mentorship and career development opportunities via Slack. While specific membership numbers are unknown, the community prioritizes inclusivity and diverse discussions.

Activities and resources

Activities:

WriteTech Hub offers training programs for technical writers to enhance their skills and knowledge. The training covers audience analysis, creating effective visuals, and using documentation tools efficiently. One of the training programs is the WriteTech Bootcamp, designed to help aspiring technical writers gain practical skills and experience in technical writing through hands-on projects and training. It is conducted twice annually.

Resources:

WriteTech Hub has a helpful blog to explore and learn about different technologies, technical writing, and open-source. It is easy to stay informed about upcoming and past events on their events page to join community activities and workshops quickly.

Success stories and achievements:

WriteTech Hub made the learning process fun and simple. I'm super grateful to have been part of the first cohort and highly recommend it to anyone interested. - Precious Okafor
The WriteTech Bootcamp was fantastic! The instructors were knowledgeable, the content was practical, and the overall experience was enriching. Highly recommended! - Okafor Johnson

Why it's a top community

WriteTech Hub is one of the top Slack communities for technical writers and experts alike. In addition to interaction, it offers mentorship opportunities, career development, and job prospects. The community's blog covers various technologies and technical writing. A notable accomplishment of WriteTech Hub is the development of skills through its Bootcamp program.

TechWriters

TechWriters is a community for folks semi-seriously writing or creating tech-related content. If you're a frequent blogger, working on a book, or publishing a newsletter, then the community is a perfect place for you to be.

Key features

Platforms:

The community exists on Discord; you’ll have to fill out a form and share a bit of your background before getting an invite. The community communicates and interacts on the Discord channel.

Membership size and diversity:

The TechWriters community is made up of 346 members as of now, and it's a wonderfully diverse group. People from various backgrounds and experiences come together, creating a vibrant and inclusive community where everyone's perspective is valued.

Activities and resources

Activities:

In the TechWriters Discord, lots of exciting things happen! Members use a writing-goals channel to set writing goals and keep each other accountable. There's also a meta-blogging channel called the blog channel where members can discuss why they blog, how they find blog topics, how they distribute their blogs, and so on. Someone working on a project or book can create a channel to track progress and get feedback. Many members have used this to write a book and launch it successfully! It's a friendly and helpful community where members support each other in various activities.

Resources:

TechWriter has a dedicated Discord channel where members freely share their published work, including blog posts and YouTube videos. Additionally, the community maintains a directory in an Excel sheet showcasing Twitter handles and tech blog details of its members. This convenient directory lets members quickly discover and connect with other interesting community members on Twitter and explore their insightful blogs. Importantly, the directory operates on an opt-in basis, allowing members to include their information but respecting the privacy of others.

Success story and achievement:

Why it's a top community

TechWriters is a standout community for those actively creating tech-related content. With 346 diverse members on Discord, it offers an inclusive space where everyone's perspective is valued. Engaging activities include goal-setting, meta-blogging discussions, and project collaboration, fostering a friendly and supportive environment. The community's resources, including a dedicated channel for sharing works and a member directory, contribute to its top status by facilitating easy connections and exploration of insightful blogs.

DocNext

DocNext brings together technical writers, documentation engineers, and enthusiasts with the shared goal of evolving into better technical writers. Beyond refining your skills in crafting impactful documentation, DocNext aims to deepen your understanding of technical documentation as a whole. Whether you're a newbie technical writer or a seasoned documentation engineer, the community is a great place to learn, collaborate, and grow.

Key features

Platforms:

The DocNext community is hosted on Slack, providing an interactive and user-friendly platform for individuals interested in tech-related content creation. As a newly established community, DocNext on Slack offers a fresh and accessible space for individuals passionate about technical and API documentation.

Membership size and diversity:

As of today, the community has a membership of 76 individuals. While it may be a relatively smaller group, the focus is creating a space and inclusive environment for budding technical writers and experienced documentation engineers.

Activities and resources

Activities:

Activities in the community include an interactive community hour on Twitter and Twitter spaces for real-time discussions. Bi-weekly Google Meet sessions to dive deep into technical documentation, allowing members to ask questions. DocNext members actively participate in these sessions to stay informed and engaged in the evolving field of technical writing.

Resources:

The community has a dedicated channel on Slack for sharing resources every week so members can learn. Additionally, a separate channel is dedicated to sharing job opportunities, providing a platform for members to explore potential career advancements.

Success story and achievement:

While DocNext may be a newer community, its success is evident in the well-received learning sessions hosted on Twitter and Google Meet. Despite being in the early stages, the community has effectively organized and facilitated sessions, providing valuable opportunities for members to enhance their understanding of various technical writing concepts. This accomplishment underscores DocNext's commitment to creating a meaningful learning experience for its members, setting a promising foundation for future successes in the dynamic field of technical documentation.

Why it's a top community

DocNext rises as a top community by offering an interactive Slack platform for tech enthusiasts. With 76 members, it emphasizes inclusivity, welcoming both novices and seasoned professionals. The community's engaging activities, including Twitter hours and Google Meet sessions, ensure active participation, fostering continuous learning. DocNext's commitment to knowledge-sharing through dedicated Slack channels cements its status as a promising hub for technical writers and documentation engineers, even in its early stages.

Conclusion

These vibrant technical writing communities—Hackmamba Creators, Write the Docs, WriteTech Hub, TechWriters, and DocNext—provide rich environments for learning and collaboration. With more than 1000 members to connect with, Hackmamba Creators provides a worldwide reach. Write the Docs offers a global reach and diverse resources. WriteTech Hub seamlessly integrates IT services with community engagement, and TechWriters, thriving on Discord, fosters diversity and engagement. Despite its newer status, DocNext excels in nurturing learning through Twitter sessions and Slack interactions.

Exploring and joining these communities presents an opportunity to elevate your technical writing journey significantly. Each community offers a global network, mentorship opportunities, career development prospects, and a friendly, supportive environment. Embrace these vibrant communities to grow, learn, and thrive in the ever-evolving landscape of technical documentation.

Mastering React's useEffect Hook: A Comprehensive Guide

Fatima Olasunkanmi-Ojo — Thu, 30 Mar 2023 01:14:27 +0000

Introduction of useEffect Hook

The useEffect hook is a powerful tool that was introduced in React 16.8 as a part of the Hooks API. It allows developers to perform side effects, such as updating the DOM, fetching data, and subscribing to events in function components. Prior to useEffect, class components were used to handle such side effects, but with Hooks, developers can achieve the same functionality without having to write a class. The useEffect hook is versatile and can be used for a wide range of tasks, making it a popular and important feature in React development.

In this article, you will learn about the useEffect hook and how you can use it in your React Application. You will use a function component because React Hooks don't work inside classes.

Prerequisites

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript and React

Get Started

Use yarn create vite <project-name> to create a new React project. Vite is used because it is fast in development and build times of React applications.

Start the application by running the following command:

cd project-name
yarn run dev

UseEffect Hook syntax and default behaviour

useEffect is a function which accepts two parameters, a callback function and a dependency array. To create a side effect with useEffect hook in your project, import the hook inside the functional component to access the states and props without writing additional code.
useEffect by default runs after every render. It runs both after the first render and also after every update.
Here is an example of how to declare a useEffect hook in a functional component:

// App.js

import React, {useState, useEffect} from 'react'

const App =()=> {
  const [count, setCount] = useState(0)

  useEffect(()=>{
    console.log(count);
  })

  return (
    <div style={{textAlign: "center", marginTop: "90px"}}> 
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment Counter       </button>
      <h1>This is {count} </h1>
    </div>
  )
}
export default App;

The code snippet above does the following:

Imports useEffect and useState from React
Creates a state variable with its corresponding set function and initiates the state with 0 as a value
Add a button with a click handler to increment the count by passing in a function to update the previous state whenever the button is clicked
Call the useEffect function within the component and pass in the function, which is executed after every render of the components

Preventing infinite loops in useEffect Hook

useEffect runs after every render and can cause an infinite loop when it renders, which in some cases, could lead to performance issues. To prevent this, you need to conditionally run the useEffect Hook from a functional component and provide the second parameter called "the dependency array" when you call the useEffect function.
The dependency array usually contains values that, if the value changes from one render to the next, it will cause the useEffect to run. This helps limit the number of times the effect runs and determines when it will run instead of running after every render.

// App.js
... 
  useEffect(()=>{
    console.log(count);
  }, [])
...

In the code above, the useEffect function contains an array as its second parameter, called a dependency array.

An empty dependency array denotes that the function will run first for once when the components load, and there is no dependency to watch and trigger the effect to run again.

You can run the useEffect function every time count changes by adding count to the dependency array, as shown below:

// App.js
... 
  useEffect(()=>{
    console.log(count);
  }, [count])
...

In the code above, when the component runs for the first time, the state starts at an initial value of 0, and anywhere the count is called, the value is replaced with 0, including the dependency array. Clicking the Increment Counter button manually triggers a re-render of the component and updates the state count from 0 to 1, and all the count values are updated to 1 wherever it is used in the function

In the code snippet below, you will fetch meme images from the meme API and display a new image whenever a button clicks. You can use useEffect to fetch data from a server and display it without problems. Once the component is rendered, it will fetch and render the data.

// Meme.js

import React, { useState, useEffect } from "react";

const Meme = () => {
  const [memeData, setMemeData] = useState({randomImage: "http://i.imgflip.com/1bij.jpg"});
  const [allMemeImages, setAllMemeImages] = useState([]);

  useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
      .then((res) => res.json())
      .then((data) => setAllMemeImages(data.data.memes));
  }, []);

  const handleClick = () => {
    const randomNum = Math.floor(Math.random() * allMemeImages.length);
    const url = allMemeImages[randomNum].url;
    setMemeData((prevState) => {
      return {
        ...prevState,
        randomImage: url,
      };
    });
  };

  return (
      <div style={{ textAlign: "center", marginTop: "90px" }}>
        <button onClick={handleClick}>Get a new meme image</button>
        <div style={{ textAlign: "center", marginTop: "90px" }}>
          <img
            src={memeData.randomImage}
            alt='meme-images'
            style={{ width: "300px", height: "300px" }}
          />
        </div>
      </div>
  );
};
export default Meme;

The code above does the following:

Import useEffect and useState from React
Declares the initial state for metadata to display an image on the first render of the component with setMemeData as the set function
Declares the initial state for allMemeImages to store all the images from the meme API endpoint
useEffect hook is called, and the fetch function is used to make a call to the meme API and store all the data using the setAllMemeImages. An empty dependency array indicates that the meme API is called once with the useEffect hook
Declares handleClick function to get a new image when the button is clicked. This function randomly generates a URL from the list of all the image URL gotten from the meme API and stored in the allMemeImages state. In this function, setMemeData is used to re-render the component on every click, which makes the image change to another image on the screen

To display the application on the browser, import the Meme.js file inside the App.js file, as shown below.

//App.js

import React from 'react'
import Meme from './Meme.js';
const App =()=> {
  return (
   <Meme />
  )
}
export default App;

At this point, your application should look like the following:

Conclusion

This article discusses useEffect hook and how you can use it in your React Application to call API endpoints. It explained the default behaviour of useEffect and how you can prevent infinite loops while using useEffect hook.
Follow the resources below to learn more about useEffect hooks.

Resources

Unlocking the Power of Creative Sourcing for Content Ideas

Fatima Olasunkanmi-Ojo — Sun, 05 Feb 2023 11:10:07 +0000

Developing engaging and relevant content is essential for building a solid brand and establishing thought leadership in your industry. However, finding content ideas that engage and inform your audience can be challenging as a technical writer. It takes a variety of approaches to identify the technology-related problem, find content ideas surrounding it, attempt to write, examine client feedback, and keep up with industry trends.

This guide will examine various practical methods for sourcing content ideas, helping you consistently create content your audience will enjoy. If you're just getting started or looking to expand your content marketing strategy, this guide will help you get there. Using these tactics, you can consistently generate content ideas that align with your brand goals and connect with your target audience.

Keep a list of ideas

Keeping a list of content ideas can help you to organize and prioritize your content creation efforts. You can create this list using a Notion, a Trello board or a notepad. When searching for content ideas, add fresh ones to your list regularly and sort them by topic, format, and audience. This will help you quickly identify the most relevant ideas for your next piece of content.

Additionally, keeping a list of ideas allows you to track the success of each piece of content, making it easier to refine your strategy over time. So, start building your list of content ideas today and watch your content marketing efforts grow and succeed.

Blog about something you think you can solve

Writing a blog post on a problem you can solve is a great way to strengthen your problem-solving skills and knowledge retention while also assisting others who might experience the same difficulties.
If you see people discussing something they find challenging, and you think you can solve it, add it to your list of ideas and blog about it.

Identify the most talked-about technology problem

Joining online developer communities and participating in discussion forums is an excellent way to remain informed on current difficulties and trends in the tech sector. This will expose you to technical concerns, problems individuals confront, and the most-talked-about technical issues in the tech space. Researching and blogging about the answers may benefit you and others while honing your technical skills and writing abilities.

Some of the online developer communities to join as a software developer are Stack Overflow, Freecodecamp, and Reddit, and you can follow subreddits like r/AskProgramming, r/LearnProgramming, and r/Coding.

Blog about the challenges you faced while building a project

One of the experiences of being a developer who builds solutions is encountering obstacles when developing a solution to a problem. You overcome impediments, find solutions to problems, and make the application work. You can turn the challenges you face into blog posts to write about, and sharing those experiences can be valuable for others in the tech community.

By outlining your difficulties and the solutions you came up with, you might offer guidance to those dealing with the same problems. Writing a blog post is a great opportunity to reflect on your growth as a developer and track your advancement over time.

Turn relevant StackOverflow answers into blog posts

Stack Overflow is a question-and-answer website for professional and enthusiast programmers. It helps people discover answers to technical problems. Other popular platforms include Reddit, Quora, etc. but Stack Overflow caters specifically to developers.

Writing your findings as blog posts is a great chance to communicate your knowledge and perspectives with a larger audience.

By doing this, you assist those struggling with a similar problem, establish your expertise, and build your brand. Just be sure to give due credit to Stack Overflow and any other sources you used to discover the answer and indicate that the information is based on your experience and understanding. Writing blog posts allows you to elaborate on the answer, offer more context and examples, clarify any trade-offs or limitations, and more.

Social media

Developers frequently use social media, particularly Twitter, to discuss their experiences and request help with technical issues. Observing these chats and spotting significant problems might help you develop blog post ideas that will benefit others going through similar issues. It also helps you to become more proficient at problem-solving and writing.

Sharing your blog entries on social media may also help your content get more exposure and reach. It can also be a fantastic opportunity to interact with other tech community members.

Google Trends and Google Search

It might be useful to use Google Trends and Google Search to find prominent topics for which there may be a shortage of information. You can tell whether or not people are having trouble understanding a certain concept or type of technology by looking at the number of search results for a given query or term. If you discover few clear and detailed resources on the topic, creating a blog post on it might be a great way to fill that gap and assist others who might be dealing with related difficulties.

Make sure to conduct thorough research and provide accurate and up-to-date information in your blog post. Consider sharing your blog post on relevant online communities and forums to reach a wider audience and engage with others in the tech industry.

Conclusion

Every blog entry is unique. Your viewpoint may be all someone needs to learn something new. Even if a blog post has the same content as an older one, Google will always favor the most current version.

If you intend to grow and develop your technical writing skills, you can join the Hackmamba community. They are currently running a bi-weekly technical writing challenge.

Resources

How to Source Content Titles and Write Consistency
Creative Tips for Sourcing Fresh Content Ideas

Build Contact Phone Directory with NextJS using Xata and Cloudinary

Fatima Olasunkanmi-Ojo — Tue, 29 Nov 2022 06:57:34 +0000

You can manage and store your connections' names, addresses, and phone numbers using a contact phone directory. Telephone directories save callers time and energy by making it easier to find a specific contact.

This article discusses how to create a contact phone directory application with Next.js, Cloudinary, and Xata. Cloudinary is a cloud-based video and image management platform which provides services for maintaining and converting uploaded media for web applications. Xata is a Serverless Data platform that simplifies how developers work with data by providing the power of a traditional database with built-in powerful search and analytics.

Demo and Source Code

Check out the complete source code here and access the live demo here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Knowledge of JavaScript and React.js
A Cloudinary account(sign up here)
A Xata account(sign up here)
Understanding of Tailwind CSS for styling

Installation and Setup

Run this command on your terminal to create a Next app.

npx create-next-app <app-name>

After successful installation, navigate to the folder created and start the server on port 3000 with the command below:

cd <app-name>
npm run dev

Creating a Xata Database

After creating an account and logging in to Xata, create a new database called contact-phone-directory by clicking on the add database plus icon.

Next, create a table called contacts as shown in the schema section below, which will contain the following fields: location, firstName, lastName, phoneNumber, email, imageUrl, and id - which is auto-generated by Xata.

Setup Xata Instance

To use Xata in your project, you must first install the Xata Software Development Kit (SDK) globally to use all of the Xata commands. Install the Xata CLI globally with the command below:

npm i -g @xata.io/cli

Next, run the command below to authenticate:

xata auth login

The command above presents you with two choices via a prompt in your terminal, you should go for creating a new existing API key by opening a browser, this will redirect you to another browser, give the API a name and click the Create API key button.

Next, initialize your project with Xata using the command below. The command provides you with a series of prompts to successfully complete the Xata setup.

xata init

Tailwind Setup

Install Tailwind CSS in your project with the command below:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The commands will create two files in the root directory of your project, tailwind.config.js, and postcss.config.js.

In your tailwind.config.js, add the paths to all your template files with the code below.

 module.exports = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
 }

Next, add the @tailwind directives for each of Tailwind’s layers to your styles/global.css file.

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

Cloudinary Setup

Add Cloudinary dependencies to your project with the command below:

npm i @cloudinary/url-gen @cloudinary/react

The Cloudinary upload widget is an interactive user interface that enables users to upload files from a variety of sources to your application. You will use the upload widget to add images to your Xata database. To use the widget, you must include the Cloudinary widget JavaScript file in the Head section of your pages/contact/add-new-contact.js file.

//pages/contact/add-new-contact.js
import Head from "next/head";
<Head>
    <script
      src='https://upload-widget.cloudinary.com/global/all.js'
      type='text/javascript'
    />
</Head>

Setup upload widget into your app using upload preset
Upload presets enable you to centrally define a set of asset upload options instead of specifying them in each upload call. To create an upload preset, navigate to your Cloudinary Console and click on the Settings tab.
Next, click on the Upload tab and scroll down to the Upload presets section of the page.

Click on Add upload preset or use the upload preset name by Cloudinary, you need to rename the upload preset and change the Signing Mode to 'Unsigned' by clicking on Edit to change the option and Save button to effect the change.

Next, copy the upload preset name and add it to your code. Create an openupWidget() function to add and open up widgets. In your pages/contact/add-new-contact.js file, paste the code below:

//pages/contact/add-new-contact.js 

const openupWidget = () => {
    window.cloudinary
      .openUploadWidget(
        { cloud_name: "Your Cloud Name", upload_preset: "ml_default" },
        (error, result) => {
          if (!error && result && result.event === "success") {
            setImageUrl(result.info.url);
          }
        }
      )
      .open();
  };

In the code block above:

The openUploadWidget() method receives two parameters, your cloud_name and your upload preset. To get your cloud_name, check the Cloudinary Dashboard
Depending on whether the upload was successful or not, the picture URL or the error detected is logged into the console

On your "Upload Image" button, add the openupWidget() code to an onClick event listener. When you click the button, the onClick event listener launches your openupWidget() function.

<button
  className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
  type='button'
  onClick={openupWidget}
>
  Upload Image
</button>

Saving New Contacts to the Phone Directory

Create a form to collect contact information and add a new contact to your directory inside pages/contact/add-new-contact.js file.


/* eslint-disable @next/next/no-sync-scripts */
...
import Link from "next/link";
import { useRouter } from "next/router";
...

const AddContact = () => {
  const router = useRouter();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [phoneNumber, setPhoneNumber] = useState();
  const [location, setLocation] = useState("");
  const [email, setEmail] = useState("");
  const [imageUrl, setImageUrl] = useState("");

 //open openupWidget function

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch("/api/add-contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        firstName,
        lastName,
        phoneNumber,
        location,
        email,
        imageUrl: imageUrl,
      }),
    }).then(() => router.push("/"));
  };


  return (
    <>
      ...
      <section className='mx-auto w-[50%]'>
        <form>
          <p className='mt-[30px] mb-[30px] font-medium'>Add New Contact</p>
          <div className='mb-5'>
            <label htmlFor='firstName' className='block'>
              First Name
            </label>
            <input
              type='text'
              name='firstName'
              onChange={(e) => setFirstName(e.target.value)}
              required
              className='border-2 p-1 w-full mt-1'
            />
          </div>
          <div className='mb-5'>
            <label htmlFor='lastName' className='block'>
              Last Name
            </label>
            <input
              type='text'
              name='lastName'
              id='lastName'
              required
              onChange={(e) => setLastName(e.target.value)}
              className='border-2 p-1 w-full mt-1'
            />
          </div>
          <div className='mb-5'>
            <label htmlFor='phoneNumber' className='block'>
              Phone Number
            </label>
            <input
              type='text'
              name='phoneNumber'
              id='phoneNumber'
              required
              onChange={(e) => setPhoneNumber(e.target.value)}
              className='border-2 p-1 w-full mt-1'
            />
          </div>
          <div className='mb-5'>
            <label htmlFor='location' className='block'>
              Location
            </label>
            <input
              type='text'
              name='location'
              id='location'
              required
              onChange={(e) => setLocation(e.target.value)}
              className='border-2 p-1 w-full mt-1'
            />
          </div>
          <div className='mb-5'>
            <label htmlFor='email' className='block'>
              Email Address
            </label>
            <input
              type='email'
              name='email'
              id='email'
              required
              onChange={(e) => setEmail(e.target.value)}
              className='border-2 p-1 w-full mt-1'
            />
          </div>
          <div className='mb-5'>
            <button
              className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
              type='button'
              onClick={openupWidget}
            >
              Upload Image
            </button>
          </div>
          <div className="flex justify-end">
          <button
            type='submit'
            onClick={handleSubmit}
            className='bg-blue-600 text-gray-50 py-2 px-6 tracking-wide whitespace-nowrap  mb-10'
          >
            Submit
          </button>
          </div>

        </form>
      </section>
       ...
    </>
  );
};
export default AddContact;

In the code above, you did the following:

Imported the necessary dependencies and components
Created initial variables for the input on lines 9-14
Created the input fields for First Name, Last Name, Phone Number, Location, Email Address, Upload Image button, and Submit button on lines 46-121
Submitted all input values to the Xata database and redirect to the home page with lines 18-34

Adding Contact Information to the Database

Inside pages/api/add-contact.js paste the code below:

//pages/api/add-contact.js 
import { getXataClient } from "../../src/xata";
const xata = getXataClient();
const handler = async (req, res) => {
  const { firstName, lastName, phoneNumber, location, email, imageUrl } =
    req.body;
  await xata.db.contacts.create({
    firstName,
    lastName,
    phoneNumber,
    location,
    email,
    imageUrl,
  });
  res.end();
};
export default handler;

In the code block above, you did the following:

Imported the getXataClient from the xata file that was created during initialization and also created a new instance with the getXataClient object
Got the firstName, lastName, phoneNumber, location, email, imageUrl variables from the body of your request to add to the database
Added the variables in the Xata create method to create data on your database. When passing the variables in as a parameter, it is important to note these things:
- The create() is on the contacts object because your database's name is contacts
- The variables are the same as the tables on your database
Send the resulting data to the client side after saving the data in your database

Fetching Contact Information from the Database

To display all contacts information on the home page, first create your components/LandingPage.js file and add the following code snippet:

//components/LandingPage.js
import Footer from "./Footer";
import Header from "./Header";
const LandingPage = ({ children }) => {
  return (
    <div className='min-h-screen flex flex-col'>
      <div className='border-b border-gray-100'>
        <Header />
      </div>
      <main className='flex-grow   md:max-w-7xl md:mx-auto md:w-4/5 my-5 '>
        {children}
      </main>
      <div className='border-t border-gray-100'>
        <Footer />
      </div>
    </div>
  );
};
export default LandingPage;

You need to import the getXataClient from the src/xata.js file. Create a pages/index.js file and add the following code:

//pages/index.js

import Head from "next/head";
import { useState } from "react";
import LandingPage from "../components/LandingPage";
import { getXataClient } from "../src/xata";
import SearchList from "../components/SearchList/SearchList";
import AllContactsList from "../components/AllContactsLists/AllContactsLists";

export default function Home({ phoneBooks }) {
  const [searchWord, setSearchWord] = useState();
  const [searchContacts, setSearchContacts] = useState();

  const handleSearch = async (e) => {
    e.preventDefault();
  };
  return (
    <div>
      <Head>
        <title>Contacts Phone Directory</title>
        <meta name='description' content='Job board app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <LandingPage>
        <div className='flex justify-center mb-4'>
          <input
            className='placeholder:italic placeholder:text-slate-400 block bg-white w-[50%] border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm'
            placeholder='Search for contact...'
            type='text'
            onChange={(e) => setSearchWord(e.target.value)}
          />
          <button
            className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
            type='submit'
            onClick={handleSearch}
          >
            Search
          </button>
        </div>
        {searchContacts ? <SearchList allContacts={searchContacts} /> : ""}
        {searchContacts ? "" : <AllContactsList allContacts={phoneBooks} />}
      </LandingPage>
    </div>
  );
}
export async function getServerSideProps() {
  const xata = getXataClient();
  const phoneBooks = await xata.db.contacts.getAll();
  return { props: { phoneBooks } };
}

In the code block above, you did the following:

Imported the getXataClient from the src/xata.js file inside pages/index.js file to query all records from Xata and returned the data as phoneBooks prop to AllContactsList and SearchList
Used a conditional statement to render AllContactsList and SearchList as children props of LandingPage inside pages/index.js file
Created input search field for searching contact information
Declared variable to store the initial state for searchWord and searchContacts
Passed the landing page component to components/LandingPage.js file

Searching for Contact Information in Database

Update the handleSearch () searchWord function in pages/index.js file with the code below.

//pages/index.js  
const handleSearch = async (e) => {
    e.preventDefault();
    const result = await fetch("/api/search-contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        searchWord,
      }),
    }).then((r) => r.json());
    setSearchContacts(result);
  };

In the code above, you did the following:

Make a search request using Xata’s REST API
Retrieved the input value in the search field and pass it to the body of the request.
Updated the searchContacts with the result of the searched word coming from xata database

Next, create search-contact.js file inside pages/api folder. Make sure the name of the created file tallies with the API endpoint used to make search request on line 3 ("pages/api/search-contact.js")
Copy and paste the code below to pages/api/search-contact.js file

//pages/api/search-contact.js
import { getXataClient } from '../../src/xata';
const xata = getXataClient();
const handler = async (req, res) => {
  const { searchWord } = req.body;
  const results = await xata.search.all(searchWord);
  res.send(results);
};
export default handler;

In the code block above, you did the following:

Imported the getXataClient from the xata file and also created a new instance with the getXataClient object
Got the searchWord variable from the input field and used it to search the Xata database if it exists or not.
Send the resulting data to the client side after saving the data in your database

Next, copy and paste the code in the github gist inside your components/SearchList/SearcList.js

https://gist.github.com/fatima-ola/00541b18715247fc7d7b23b84d4b5914

In the code block above, you did the following:

Retrieved the allContacts props passed to the SearchList components
Extracted it into an array of objects
Map through the contactInfo array and display the searched information

Single Contact List Creation

To get more information about individual contact displayed on the landing page when it is clicked, Create a new file, [id].js, in a folder called contact within the pages directory. Paste the following code:

//pages/contact/[id].js
import { getXataClient } from "../../src/xata";
import Footer from "../../components/Footer";
import Header from "../../components/Header";
import Image from "next/image";
import { useRouter } from "next/router";
import { MdWifiCalling3 } from "react-icons/md";
import { BiMessageDetail } from "react-icons/bi";
import { BiVideo } from "react-icons/bi";
const Contact = ({ data }) => {
  const router = useRouter();

  const deleteContact = (id) => {
    });
  };
  function getFirstLetter(character) {
    return character.charAt(0).toUpperCase();
  }

  return (
    <div className='min-h-screen flex flex-col'>
      <div className='border-b border-gray-100 mb-6'>
        <Header />
      </div>
      <section className='mx-auto w-[30%] sm:w-[50%] xs:w-[60%] p-8 shadow-sm border-2 hover:shadow-lg rounded-lg'>
        <div className='flex justify-center'>
          {data.imageUrl === "" ? (
            <p className='self-center bg-pink-200 font-bold py-2 px-4 mr-2 rounded-full'>
              {getFirstLetter(data.firstName)}
            </p>
          ) : (
            <Image
            width={80}
            height={20}
            className='h-20 w-30 rounded-full'
            src={data.imageUrl}
            alt=''
          />
          )}
        </div>
        <div className='text-center font-semibold'>
          <p>{`${data.firstName} ${data.lastName}`}</p>
        </div>
        <div className='flex justify-center'>
          <ul className='list-none flex m-4'>
            <li className='p-3 text-blue-600 text-[22px]'>
              <MdWifiCalling3 className='cursor-pointer' />
            </li>
            <li className='p-3  text-red-400 text-[22px]'>
              <BiMessageDetail className='cursor-pointer' />
            </li>
            <li className='p-3 text-purple-400 text-[22px]'>
              <BiVideo className='cursor-pointer' />
            </li>
          </ul>
        </div>
        <div className=''>
          <div className='my-3'>
            <p className='font-semibold'>Mobile:</p>
            <p>{data.phoneNumber}</p>
          </div>
          <div className='my-3'>
            <p className='font-semibold'>Location:</p>
            <p>{data.location}</p>
          </div>
          <div className='my-3'>
            <p className='font-semibold'>Email:</p>
            <p className="">{data.email}</p>
          </div>
        </div>
        <div className='flex justify-center my-6'>
          <button
            type='submit'
            className=' bg-red-300 text-gray-50 hover:bg-red-600 py-2 px-6 rounded-full'
            onClick={() => deleteContact(data.id)}
          >
            Delete
          </button>
        </div>
      </section>
      <div className='border-t border-gray-100 mt-6'>
        <Footer />
      </div>
    </div>
  );
};
export default Contact;
export async function getServerSideProps(context) {
  const { id } = context.query;
  const xata = await getXataClient();
  const contact = await xata.db.contacts.read(id);
  return {
    props: {
      data: contact,
    },
  };
}

The code above makes use of the getServerSideProps with the context parameter, and this object results in using the query string. After which, the function returns props reading the dynamic route of the id and getting one record from Xata using the read().
Clicking on one of the contacts listings opens a new page with the contact URL with an id like this:http://localhost:3000/contact/rec_cdt5k7ft80rj82cd2kpg.

Deleting Contact Information from Database

Create a pages/api/delete-contact.js file and add this code below to delete a contact from your database using the id you got from the request body:

import { getXataClient } from '../../src/xata';
const xata = getXataClient();
const handler = async (req, res) => {
  const { id } = req.body;
  await xata.db.contacts.delete(id);
  res.end();
};
export default handler;

Next, update the deleteContact() function in pages/contact/[id].js file with the code below.

const deleteContact = (id) => {
    fetch("/api/delete-contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ id: id }),
    }).then(() => {
      router.push("/");
    });
  };

In the code above, you did the following

Created a function to query your /api/delete-product endpoint.
Passed the id of the product you want to delete as parameter. The /api/delete-product handler needs the id to find and successfully delete a contact. After deleting the product, you route back to landing page.

In the end, this is how your final application should look like:

https://www.loom.com/share/9546ccd0a23c4a02ad6c22bb681a2cfe

Conclusion

In this article, you learned how to use Xata and Cloudinary to build a contact phone directory that can add a new contact to the directory, view individual contacts, search for contact and delete the contact.

Resources
- Xata Documentation
- Cloudinary Upload Preset
- Setup Upload Widget