DEV Community: Catalin Pit

I Landed 4 Jobs and Earned $25K+ with Technical Writing

Catalin Pit — Thu, 10 Oct 2024 15:09:37 +0000

My Technical Writing Journey
The Results of Technical Writing
You Can Learn It Too

My Technical Writing Journey

As a final-year university student preparing to enter the industry, I knew I had to differentiate myself from other candidates in a competitive job market. That's when the idea struck me: what if I combined two activities I enjoy, programming and writing?

Combining programming and writing would bring three significant benefits. First of all, publishing my code online would help me consolidate the information in my brain. They say that "to teach is to learn twice". Secondly, others can find my code and hopefully learn something from it (or give me feedback to improve my skills). Lastly, it would showcase my thinking process and soft skills, such as communication skills, to prospective employers.

With this goal and benefits in mind, I began my journey into technical writing by launching this website catalins.tech. The image from the Internet Archive shows the very first posts that I published.

As an aside, the excerpt from the bottom of my blog validates the things I've been saying about my passion for coding and writing:

Before commenting

This blog serves as my online notebook. Its purpose is not to teach other people because my solutions might not be the best ones, as I am a Computer Science student.

I use this blog to explain my solutions to programming challenges. Occasionally, I am writing how I have developed/added different features in my projects. The blog allows me to come at a later time and see why I did things the way I did. It also helps me to track my programming progress.

Thus, I combine two things I like: to write and to code.

Initially, my goal was to share my solutions to interview questions and coding challenges.

But as I continued publishing content, I increasingly enjoyed the dopamine rush of pressing the "publish" button. This made me go beyond coding challenges and interview questions. I began writing about:

My software development career, including topics like interview preparation and dealing with impostor syndrome, for example
The side projects I built in my free time
Career guidance for fellow developers
Useful resources for developers

I kept writing about everything related to technology and a career in this industry. As I published more articles, my work started gaining traction and getting noticed.

Tech publications like FreeCodeCamp and SitePoint, to name a few, invited me to publish on their platforms. These opportunities marked an important milestone in my technical writing journey. When I started writing, it was to stand out in job applications and reinforce the concepts I was learning. I never thought I'd publish on sites with hundreds of thousands, maybe even millions, of monthly readers, especially considering that English is my second language. It felt good and validated my writing skills.

Collaborating with these publications changed the trajectory of my journey. It helped me expand my reach, build credibility within the tech community, and level up my writing skills. Having to adapt to various style guides and working alongside other talented writers helped me improve my writing tenfold.

The Results of Technical Writing

But it gets even better.

Consistently publishing on my site and contributing to popular tech publications eventually led to my first paid technical writing gigs. I went from a random guy publishing on the internet to being paid to write technical articles.

According to my memory, these were my first earnings from technical writing. As far as I can recall, the $1,170 represents the total amount for four articles. When the money hit my bank account, I was over the moon!

After landing my first paid technical articles, finding these opportunities became easier and easier. Companies and publications started reaching out to me after discovering my work online, and people began recommending me to others. At one point, I earned more from these side gigs than my regular salary. Fast forward to today, and technical writing has helped me earn more than $25,000.

Don't get me wrong. I'm not trying to brag or show off here. I want to show that technical writing can be a lucrative and beneficial skill. I had no idea until I got into it myself.

But that's not at all. Sure, earning a generous income on the side is nice, but technical writing has also played a huge role in landing jobs. No exaggeration. It played a big part in landing 2 Developer Relations (DevRel) jobs and 2 engineering roles.

I'm not going to talk about all those roles, but here's an example with the interview assignment for my DevRel role at Hasura.

Similarly, here's the announcement from when I joined Hashnode, where my writing played a bigger role since it is a blogging platform, and I am a big advocate for writing as a developer.

You may say that technical writing is relevant for Developer Relations (DevRel) roles since they involve creating and publishing content online. However, my experience has shown that technical writing also played an important role in helping me land engineering roles.

Many developers tend to focus only on their coding skills while neglecting soft skills such as communication. However, coding is just one aspect of software development. In reality, you likely spend a good percentage of your working hours communicating with various stakeholders, including clients, team members, managers, and others. You also document your code and processes, write changelogs, and create documentation, among other tasks.

Communication is a very important skill, yet many engineers often overlook it. You know this is true if you've worked in a team of more than a few people.

Having understood that, I took a different route than most engineers. Instead of focusing solely on my technical skills, I split my time and priorities in a way that allowed me to work on my soft skills. I started this site and published articles about the projects I was working on, the technologies and concepts I was learning, and the challenges I faced as an engineer. I also shared my experiences, insights, and lessons learned. In fewer words, I wrote about anything and everything related to tech and my tech career.

When it came to finding new jobs and interviewing with companies, my technical writing skills and portfolio helped me stand out from the other candidates. They not only showcased my technical expertise but also my ability to communicate. They served as concrete examples of my thought process, work ethic, ability to articulate ideas and expertise. Instead of having to "sell" myself to potential employers, they did most of the work for me.

I'm not trying to show off or brag, and I'll stop here so I don't become annoying. The bottom line is that my technical writing skills, and this site subsequently, opened doors to many opportunities, propelled my career forward, and helped me grow as an engineer.

These experiences made me realize the potential writing can have in one's career.

You Can Learn It Too

One of the best things about technical writing is that it has a low entry barrier and is also a low-friction activity. You can start a website like this and begin publishing articles right away.

You can write about the projects you're working on, the technologies and concepts you're learning, or the challenges you're facing as an engineer. The idea is to start writing and keep writing consistently. As you write more, you'll naturally improve your writing skills and find your voice.

Here are a few tips to help you get started:

Pick a domain: The first step is buying a domain. By having a personal domain, you maintain complete ownership and control over your content, reap the full SEO benefits of your work, and build and promote your brand.
Choose a platform: There are many platforms available for starting a website or blog, such as WordPress, Medium, GitHub Pages, and Ghost, to name just a few. Or you can even build a custom site. Pick one that suits your needs and allows you to use your personal domain.
- Personally, I have used Ghost for a while, and it's one of the best solutions for a personal site. I wrote about how to get started with Ghost by self-hosting it on DigitalOcean.
Identify your topics: List topics you're passionate about or have experience with. These could be specific technologies, programming languages, tools, or even soft skills related to your career in tech. You can write about:
- Your learnings. Did you learn something new? Write about it.
- Your expertise. Are you an expert in a specific area? Write about it.
- The issues you solve. Did you solve an issue? Write about it.
- Your experiences. Have you gone through an interview, got a job, or got promoted? Write about it.
Write, edit, and publish: Set aside dedicated time for writing. Start writing, and don't worry about anything else. Your main priority is to dump the ideas from your brain. Then, revise and edit your article until you're satisfied with the content. Finally, hit the publish button.

It's important to remember that technical writing is a skill that improves with practice. The more you write, the better you'll become at writing. As you consistently publish articles, you'll build a valuable portfolio that showcases your technical writing skills.

Regularly writing about technical topics will deepen your understanding of those topics. The process of researching, organizing, and articulating your ideas will reinforce your knowledge and help you identify and fill knowledge gaps.

In addition to that, it will also improve your communication abilities. As you practice conveying and breaking down complex concepts, you'll become more effective at communication, which is an underrated and valuable skill in the tech industry.

Lastly, a portfolio of technical articles can open doors to new opportunities. Your writing serves as concrete examples of your abilities and expertise. Potential employers or clients can discover your work and understand the value you can bring. Your articles can also establish you as a thought leader in your field, attracting invitations to speak at conferences or contribute to publications.

The benefits you reap from technical writing will compound over time, propelling your career forward and opening up new opportunities.

If you want to explore technical writing more in-depth, I recently released a technical writing course for developers. This course teaches you the technical writing basics, including how to structure your writing effectively, use appropriate language and tone, and incorporate visuals to enhance your message. You'll also learn various techniques for generating unlimited content ideas and establishing a solid reputation by publishing your content on high-quality, high-authority platforms and gaining exposure and credibility. But that's not all. The course explores many more topics, such as making money with technical writing and translating your articles into videos, to name a few.

You may say, "Did I read until now just to have you sell me a course?". The answer is no. I've been writing about technical writing and blogging long before having a course.

What you can learn from my 2023

Catalin Pit — Fri, 29 Dec 2023 07:21:50 +0000

When we plan for the future, we always prepare and hope for the best scenario. We never think about what could go wrong, so we never prepare for that.

At the end of each year, we spend our time and energy setting grandiose objectives for the new year. We believe that in the next year, we'll be somehow different and achieve all our goals.

And in December 2022, I did precisely that. I set objectives for 2023 and planned to do lots of big things. "2023 will be my year" - I told myself. And that's what you probably told yourself as well.

But that's not how life works, and 2023 drove that point home. This year was a damn roller coaster!

So, in this post, I'll talk about my turbulent 2023 and:

the main events from the year
how things turned around
what I learned

Read it through to the end because I guarantee that it will entertain you, at the very least. At best, it motivates you to face life's difficulties and pursue your goals.

Starting the year with a bang

2023 didn't take long to show me the first glimpse of what it would bring.

It only took one month. In February, I received the dreaded message from my then-manager - "we need to talk," and a meeting was scheduled in my calendar. For some reason, I knew what was coming. Seeing the news in tech and some things that happened in the company, I felt it.

And I was right about it. I was laid off right then and there. After that meeting, all my access and permissions were revoked. I was jobless.

I felt a mix of emotions - relief and anxiety.

I was relieved because I wanted to transition from DevRel to an engineering role anyway. But I didn't have the courage to take the leap.

Anxiety because that means no income with a dependent family and 6 months' worth of savings. It was also my first time being laid off, and this situation made me super anxious with the uncertainty that came with it.

However, looking back at the situation, I'm glad it happened the way it happened. I learned many things, which also resulted in me getting back into software development. But more on that later.

Anyway, the year continued to go from bad to worse. My health anxiety came back in full force, among other things that happened. But I'll keep those private.

By the start of the spring, I had no job, and my health had deteriorated. That is no good combo.

The turnaround

Up to this point, you saw the "shitastic" part of my 2023. But, thankfully, there is also the "shit*astic*" part because things turned around wonderfully.

As I mentioned, I wanted to make a change and transition back to an engineering role. After 2 years and a bit in DevRel, it was super tricky. I only received DevRel offers because companies were not keen on taking chances on someone who was out for such a long time.

👀
I wrote a post about <a href="https://catalins.tech/why-i-switched-back-from-devrel-to-engineering/">why I switched back from DevRel to Engineering</a>.

So, I knew I had to do something different and get out of my comfort zone. That's when I decided to volunteer as a developer. Thankfully, there was an opportunity that doesn't come often.

My good friend, Florin, is the founder of iCodeThis, a platform for people to learn coding or improve their existing skills.

Since it was a new company, I knew they would need all the help possible. But I also knew there was no way they could pay me. First because of my salary expectations and second because they weren't making money at that point.

Then I thought - what if I ask them to allow me to contribute to the platform? It's a win-win situation. They get free work, and I get to practice and gain experience in a real-world company environment.

Thankfully, Florin and the rest of the team accepted, and I started the "job". Even though I wasn't employed, I treated it like my full-time job. I knew it was an opportunity I couldn't miss or screw. My future depended on it, more or less (no exaggeration).

On 15 March, I opened my first pull request for iCodeThis. I continued volunteering until the beginning of September when I started my job as a full-stack developer at Documenso.

If it weren't for iCodeThis, I wouldn't be here or have the job at Documenso. I improved my technical skills in 8 months, more than in the past 2 and a half years. That experience allowed me to revive my passion for coding and get my developer career back on track.

In the end, getting laid off led here, so I'm glad everything happened the way it happened.

What about the other problems?

Besides getting a developer job, I managed to solve most of my problems. Most notably, I learned a lot about managing my anxiety and got it under control.

We could say that I managed to turn things around 180 degrees.

⚠️
If you deal with any type of problems, especially mental health ones, I strongly advise you to seek professional help.

Not Only Doom and Gloom

Although unpleasant events happened in my life, this period was also great. It allowed me to spend more time with my family, relax, and try different things and ventures.

Content Creation

One such example is content creation.

Ever since I started creating content on the internet, I wanted to become a full-time creator. I imagined it would allow me to have the perfect life - make good money, work on my own terms, and so on.

However, I quickly learned during this period that being a full-time creator is not for me. At least, not at this stage in my life. For one, relying on income from sponsored content didn't feel right. I'm no hypocrite and do sponsorships, especially for companies and products I like. However, depending on these sponsorships for my livelihood and potentially being forced to do them so I could put food on the table wasn't very appealing to me.

Besides that, I still need to get more experience as a developer and content creator before I can do it full-time. Although, I don't want to do it anymore in the foreseeable future.

Time Off

These 8 months without a job allowed me to take a much-needed break from full-time commitments. I welcomed it with open hands because my past years were all about grinding after work to build my YouTube channel, my blog, and my social media profile.

Even better, I was able to spend a lot of time with my wife and travel to different places. We could never do that since I always worked full-time and was grinding to build side things.

In hindsight, this period of 8 months without full-time commitments really did me well. As I said, it allowed me to relax, spend time with my wife, and try different venues.

What I Learnt

The most important thing I learned during this period is that both good and bad periods eventually pass. Knowing that, it helps me to stay grounded when going through either period - don't get cocky when things go well, and don't despair when going through a rough period.

I also learned that your dreams don't always translate well to reality. I always wanted to be a full-time content creator. But after I tried it this year, I decided it was not what I wanted to do. At least for the time being. I still have a lot of skills to improve and learn before jumping to full-time content creation again.

Losing my job also opened my eyes to the privilege and blessings I had. I always appreciated what I had, but I was also a bit superficial at the same time. Maybe you could even say I was feeling a bit entitled. However, getting laid off woke me up to the reality. And I'm forever grateful for that. I'm now 100% thankful for everything I have - my job, opportunities, and so on - and I'm making the most of every opportunity.

Having all this free time also allowed me to work on myself as a person as well. I had the opportunity to work on my health anxiety and learn ways to manage it and keep it under control.

Lastly, this experience taught me that events might feel disastrous initially, but they can be a blessing in disguise. Losing a job while having a family depending on you surely doesn't feel like a blessing. But looking back, it was one big blessing because it allowed me to jump back to the field I love - engineering. If I hadn't lost my job, I don't know if I would have had the guts to transition back.

I would say that I learned important lessons the hard way this year. What looked like a disastrous year in the beginning turned out to be a great year.

Conclusion

I've said anything that needs to be said in the post. But if there are 2 things that I'd like you to remember from this post, are these:

1) All periods pass eventually - both the good and bad ones.
2) Things can look ugly at first, but they can turn out to be good for you.

Keep them in mind!

If you enjoyed this post, subscribe to the blog to receive the articles straight to your inbox.

Build A Stunning Generative AI App with a React IDE

Catalin Pit — Mon, 20 Nov 2023 09:04:36 +0000

If you've ever wondered how AI applications generate images from user prompts, you've come to the right place.

In this article, you will learn how these tools work by building an AI application to generate images.

Create the application

We'll start by creating a React + TypeScript application using Vite. Run the following command in your terminal:

npm create vite@latest

You'll then have to answer three questions so Vite understands how to configure your project.

✔ Project name: aimages
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Lastly, you need to install and configure TailwindCSS.

Run the 2 commands below (in that order). The first command installs tailwindcss and its peer dependencies. The second command generates the tailwind.config.js and postcss.config.js files.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Now open the tailwind.config.js file and modify the code as follows:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The above code configures TailwindCSS, specifying which files the framework should scan for class usage. It's set to check the index.html file and any JavaScript or TypeScript files in the src directory. It also lets you customize the theme, colors, fonts, and many other things.

Lastly, open /src/styles.css and add the TailwindCSS directives at the top of the file:

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

You're done with the project configuration! Now, upload the project on GitHub before proceeding to the next stage. You'll see later why!

The problem with building user interfaces

Before going further, let's highlight the main issues with building user interfaces.

One of the main issues with building user interfaces is that you don't have live visual feedback when building them. You make the changes in your editor, save them, and preview them in the browser. Then, if you're not happy with the changes, you have to repeat the process.

That results in a lot of switching between the IDE and the browser. While it might seem like a minor inconvenience, those seconds of waiting for the browser to refresh, plus the mental shift required, add up over time. Over the course of a day, this switching results in a substantial amount of wasted time.

It also results in a break of flow. Every disruption (like switching between applications) breaks the flow, leading to longer task completion times and possibly more errors.

On top of that, collaborating with others can be tedious and time-consuming. The usual way of collaborating involves working on the app, pushing the changes to GitHub, and deploying them. Only after that can the other collaborators check your work. That results in a substantial amount of time lost on unproductive things, such as waiting for the changes to deploy. So, the traditional approach can be quite cumbersome and inefficient.

In this article, you'll see a complementary tool you can use with your favorite IDE to build user interfaces better and faster.

A visual React IDE

Codux is a free visual IDE for React + TypeScript applications. It enables you to work on the projects in real-time through a visual editor. All the changes you make to the component's properties, styles, and structure (JSX) are reflected automatically on the screen.

Important mention: Codux is not meant to replace your favourite IDE. It's a complementary tool that you can use alongside your IDE.

You can build and modify your interfaces using the panels and controllers provided by Codux. As the image shows, you can set CSS properties & classes and different element states, for example.

And, of course, you also have the code editor at the bottom if you want to make specific changes by writing code.

Note: Whether you make the changes using the visual editor, the built-in code editor, or your usual IDE, they will always be in sync!

Codux also supports all the popular styling solutions such as CSS, Sass, CSS/Sass modules, Stylable, and TailwindCSS. The application we're building uses TailwindCSS, for example.

Component playground

Another cool feature of Codux is the playground feature that enables you to share your work (components) with others.

In the playground mode, people can view and edit your components without setting up a local development environment and the other prerequisites.

Let's see it in action. At the beginning of the article, I mentioned that you must upload the project on GitHub. The reason is that the Playground requires your project to be hosted on GitHub.

To share your board (or component), click the "Share" button on the right.

Mention: The shared board is public, which means anyone with the link can see it. Be careful.

Codux will then ask you to create a link name for the board. Choose a name and click the button "Create Link" (the first time you do it) and "Publish" (afterwards).

Mention: Each time you make a change, you need to click the "Update Link" button before sharing the board. Otherwise, your changes won't be applied & visible on the shared board.

You can now copy the link and share it with other people. When they access the link, they'll see the online version of Codux (see the picture below).

Anyone with the link to the shared board can see it and make changes, including the text, colors, images, and even the code. That makes it an ideal tool for collaborating, where everyone can share & apply their feedback in a simple and direct way.

This way, developers can focus on the work that matters rather than wasting valuable time pushing and pulling changes to/from each other.

It's important to mention, though, that the changes on the shared board don't affect the original board and won't be applied to it. That would be a cool feature, though!

Add the project to Codux

Let's continue by importing the project we created earlier into Codux. Click on the "Open Local Project" option and select the project folder.

After that, Codux prompts you to run the configuration scripts, which install the required package to work on the project in this IDE.

Once the installation is done, click "Scan for components" so Codux imports all the components.

Then, you can see all the available components in the sidebar. In our case, we only have one - App - since it's a new project.

You can create new components by clicking the "+ New Component" button, but more on that later.

As you might've observed, there are "components" and "boards". A "Board" is a concept introduced by Codux, and it represents a fixture for your components so that Codux can automatically render it and allow you to edit it visually.

To create a "board", click on the component and then click the button "+ Create Board". That'll open a menu where you can set the starting point, the board name, and the board path.

You can leave the default options and click "Create".

And this is the board view, where you can edit the components visually.

Configure TailwindCSS

For TailwindCSS to work in Codux, you need to perform some customizations in addition to the Tailwind setup process you did at the beginning of the article.

Create the codux.config.js in the root folder of the project, and add the following object:

{
  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
  "boardGlobalSetup": "./src/_codux/board-global-setup.ts"
}

Then, create the board-global-setup.ts in the ./src/_codux folder and add the following import:

import "../index.css";

Done! Now, you can see the TailwindCSS classes in the Codux IDE.

For more information about this configuration, check this link.

Build the app

In the following sections, we'll start building the application.

Create the `components` folder

Let's start by creating a component folder for all the components. You can either do it from your IDE, terminal, or Codux. This is how you can do it from Codux:

Click the highlighted icon to see the project files. After that, create the folder as you would create it on your machine. Right-click on the src folder and click New Folder.

Creating components from Codux

If you want to create components using the interactive process from Codux, you need to set the components path. You can do that by adding this code in codux.config.json:

{
  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
  "boardGlobalSetup": "./src/_codux/board-global-setup.ts",
  "newComponent": {
    "componentsPath": "src/components"
  }
}

Now, you can create components using the visual interface.

Layout component

Create the Layout component in the components folder. We'll use the layout on all the pages.

You can follow the next steps using your usual IDE or Codux.

Tip 💡: You're fine either way because the code is automatically in sync between the two. Whether you use Codux or your editor, both will contain the same code without you having to do anything. That's neat!

Now open the Layout component and add the following code:

type LayoutProps = {
  children: React.ReactNode;
};

export default function Layout({ children }: LayoutProps) {
  return (
    <>
      <main>{children}</main>
    </>
  );
}

Refactor `App.tsx`

Then go to the App.tsx file and replace the content with the following code:

import Layout from "./components/Layout";
import "./App.css";
import { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [imageURL, setImageURL] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<null | string>(null);

  const fetchImage = async (prompt: string) => {
    const response = await fetch("http://localhost:3000/api/genimg", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ value: prompt }),
    });

    if (response.ok) {
      const data = await response.json();

      if (Array.isArray(data) && data.length > 0) {
        return data[0];
      }

      throw new Error("Unexpected server response");
    } else {
      throw new Error(response.statusText);
    }
  };

  const onInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const url = await fetchImage(inputValue);
      setImageURL(url);
    } catch (err) {
      if (err instanceof Error) {
        setError(err.message);
      } else {
        setError("An unexpected error occurred");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Layout>
        <section>
          <div>
            <div>
              <h1>PromptPix AI</h1>
              <p>
                Dive into the world of AI-driven creativity with PromptPix AI,
                where your words become vivid visuals. Simply input your idea,
                and watch as our advanced algorithms craft the image you
                envisioned.
              </p>
            </div>
            <form onSubmit={handleSubmit}>
              <div>
                <label htmlFor="prompt">Image prompt</label>
                <textarea
                  id="prompt"
                  placeholder="Enter your prompt"
                  value={inputValue}
                  onChange={onInputChange}
                />
              </div>
              <button type="submit" disabled={inputValue.length === 0}>
                Generate
              </button>
            </form>
          </div>
          <div>
            {loading && (
              <div>
                <p>Your image is being generated...</p>
                <div>
                  <div>
                    <div>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="44"
                        height="44"
                        viewBox="0 0 24 24"
                        strokeWidth="2"
                        stroke="currentColor"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path
                          stroke="none"
                          d="M0 0h24v24H0z"
                          fill="none"
                        ></path>
                        <path d="M12 6l0 -3"></path>
                        <path d="M16.25 7.75l2.15 -2.15"></path>
                        <path d="M18 12l3 0"></path>
                        <path d="M16.25 16.25l2.15 2.15"></path>
                        <path d="M12 18l0 3"></path>
                        <path d="M7.75 16.25l-2.15 2.15"></path>
                        <path d="M6 12l-3 0"></path>
                        <path d="M7.75 7.75l-2.15 -2.15"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {imageURL && !loading && (
              <div>
                <p>Find your generated image below</p>
                <img
                  src={imageURL}
                  width={600}
                  height={600}
                  alt="Generated image"
                />
              </div>
            )}

            {!imageURL && !loading && (
              <div>
                <p>Your image will appear below</p>
                <div>
                  <div>
                    <div>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="44"
                        height="44"
                        viewBox="0 0 24 24"
                        strokeWidth="2"
                        stroke="currentColor"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path
                          stroke="none"
                          d="M0 0h24v24H0z"
                          fill="none"
                        ></path>
                        <path d="M15 8h.01"></path>
                        <path d="M11.5 21h-5.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v5.5"></path>
                        <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                        <path d="M20.2 20.2l1.8 1.8"></path>
                        <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l2 2"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {error && <div>{error}</div>}
          </div>
        </section>
      </Layout>
    </>
  );
}

export default App;

This component contains the barebone application without any style applied.

Note: Everything is in the App file for illustrative purposes. It's easier to showcase the tool this way. You'll see the final application on GitHub.

Style the app with Codux

Let's start by styling the Layout component first. Double click App in the Elements tab (left-hand side column).

That opens a new tree, where you should see the Layout component. Double click on Layout, and then select main.

The Elements tab shows you all the HTML elements from your code.

To add Tailwind classes to HTML elements, click the "Properties" icon from the right-hand side. Then, search for the "className" property.

Once there, add the following Tailwind classes:

flex min-h-screen flex-col justify-center items-center

These classes set up a flex container with a minimum height equal to the viewport height, arrange its children in a column, and center them vertically and horizontally within the container.

You should see the changes reflected immediately, both visually and in the code.

Pretty cool, right?

Now, let's switch to your favorite IDE to see how easy it is to use them together. Open the index.css file and add this block:

body {
  @apply bg-gray-50;
}

App component

Continue by adding the following classes to the section element from the App component:

container flex flex-col gap-6 py-8 md:max-w-[64rem] md:py-12 lg:py-24

These classes modify the section to be a flexible container with column direction, vertical gap between child elements of 6 units, vertical padding of 8 units (increased to 12 units on medium screens and 24 units on large screens), and a maximum width of 64rem on medium and larger screens.

Similarly, apply the following classes to the first div element:

bg-white shadow-md rounded border border-slate-200 p-14 text-center

These TailwindCSS utility classes apply a white background, a medium shadow, rounded corners, a slate-colored border, padding on all sides of 14 units, and center-aligned text.

This is how the application looks up to this point.

The next steps are as follows:

stylize the heading + description
stylize the form
stylize the part where the image will appear
create the API

Let's style the heading and description through your IDE (VS Code, in my case) to see the auto-sync in action.

Replace the 2nd div element with the following code:

<div className="mx-auto flex w-full flex-col md:max-w-[58rem]">
   <h1 className="font-heading text-2xl mb-4 sm:text-4xl text-center">
      PromptPix AI
   </h1>
   <p className="text-sm sm:text-base text-center mb-4">
      Dive into the world of AI-driven creativity with PromptPix AI,
      where your words become vivid visuals. Simply input your idea,
      and watch as our advanced algorithms craft the image you
      envisioned.
   </p>
</div>

The screenshot below illustrates how your code should look:

If you navigate back to Codux, you will see the changes applied in the visual area and the code editor from the bottom of the page.

Similarly, all the changes made in Codux are available in your IDE.

As an exercise, add the following classes to these elements:

the form element - space-y-6
the div element inside the form - flex flex-col items-center gap-4
the label element - text-sm sm:text-base
the textarea element - border border-slate-200 rounded p-2 w-3/4 h-32 resize-none
the button element:

`${
inputValue.length === 0
? "bg-white text-gray-800 font-semibold py-2 px-4 border border-slate-400 rounded shadow opacity-50 hover:opacity-50 cursor-not-allowed"
: "bg-white hover:bg-slate-100 text-gray-800 font-semibold py-2 px-4 border border-slate-400 rounded shadow"
}`

This is how the application looks like with all the above classes applied:

Looks pretty good already, right?

The last step involves styling the part where the generated image will appear. We'll make the initial div element (that's displayed before entering any prompt) a flex container with its children arranged in a column, centered horizontally, with a gap of 24px between each child and a top margin of 48px - flex flex-col items-center gap-6 mt-12.

You can add them as usual using the "className" field from Codux.

Apply the same Tailwind classes to the other 2 div elements that display the loading state and the generated image.

Lastly, stylize the error:

{error && (
<div className="text-center w-1/2 mx-auto bg-red-500 mt-2 rounded border border-red-800">
   {error}
</div>
)}

Now you're done with the user interface!

Codux offers much more

In building this application, you mostly applied classes and visualized the results in real-time. However, Codux offers much more.

With Codux, you can test your application on multiple viewports and make the changes live for each viewport.

Besides that, we added the classes manually for each element. But you can also use the "Computed Styles" tab to stylize the elements. Instead of writing code manually, you can style elements interactively.

A favorite feature of mine is the ability to open the code for a specific element. You can select the particular element, right-click on it, and open it in the code editor/IDE.

The image illustrates how Codux highlights the relevant code for the selected element. Neat, right?

As you can see, there are lots of cool features in Codux. I encourage you to download it and explore it. It's free!

Some valuable resources to help you:

The Backend Code for Generating the Image

You are probably using a different programming language & framework than me. Instead of wasting your time taking you through a painful process of building the backend in a technology you're not interested in, I'll share the code for the API route straightaway.

import express, { Request, Response } from "express";
import Replicate from "replicate";
import cors from "cors";

const app = express();
const port = 3030;

app.use(express.json());
app.use(cors());

app.options("/api/genimg", (req: Request, res: Response) => {
  // Pre-flight request. Reply successfully:
  res.status(200).end();
});

app.post("/api/genimg", async (req: Request, res: Response) => {
  const { value } = req.body;

  try {
    const replicate = new Replicate({
      auth: process.env.REPLICATE_API_TOKEN || "",
    });

    const result = await replicate.run(
      "stability-ai/stable-diffusion:a00d0b7dcbb9c3fbb34ba87d2d5b46c56969c84a628bf778a7fdaec30b1b99c5",
      {
        input: {
          prompt: value,
          image_dimensions: "1024x1024",
          num_inference_steps: 50,
          num_outputs: 1,
          guideance_scale: 7.5,
          prompt_strength: 0.8,
          scheduler: "KarrasDPM",
        },
      }
    );

    res.status(200).json(result);
  } catch (error) {
    console.error("Failed to generate image. Error:", error);
    res.status(500).json({ message: "Failed to generate image" });
  }
});

app.all("/api/genimg", (req: Request, res: Response) => {
  res.status(405).json({ message: "Method Not Allowed" });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This TypeScript code sets up an Express server that listens on port 3030 and has CORS enabled. It defines three routes, all for the path "/api/genimg". The OPTIONS route is for handling pre-flight CORS requests. The POST route accepts a JSON body with a "value" property, uses it as a prompt to generate an image using the Replicate API, and returns the result. If there's an error during this process, it logs it and returns a 500 status code with a failure message. The ALL route is a catch-all that returns a 405 status code, indicating that the method used is not allowed. The server listens on the specified port and logs a message to the console when it's running.

This way, you can adapt the code to your programming language & framework of your choice.

Note: You can check the whole application code (both server and client) by accessing this GitHub link.

An ending note

Building applications comes with challenges that can slow down the development process and make collaboration difficult. One of the main challenges is the constant need to switch between different tools. That takes up considerable time and can break your concentration and flow. Moreover, collaborating with others is cumbersome, often requiring several steps before others can test your work.

This is where Codux steps in to make the whole process smoother and more efficient. Codux enables you to visualize changes as you make them without constantly switching between multiple tools. Moreover, it offers a visual user interface that makes it easier to build applications by allowing you to create things with a couple of clicks. But perhaps most importantly, it allows for real-time collaboration, enabling people to work together seamlessly.

Before closing, I want to mention again that Codux is not here to replace your IDE and other tools you might use. Think of Codux as another tool in your developer toolbox.

The article was originally published on my blog - catalins.tech

Why I Switched Back From DevRel to Engineering

Catalin Pit — Mon, 06 Nov 2023 09:18:23 +0000

Developer Relations - well-paid & fancy job that involves lots of traveling, speaking at conferences, interacting with developers regularly, and creating content. What's not to like? Why would anyone go back to coding?

You'll see why in this article.

A short note on DevRel

In the last 2 years, I worked in the Developer Relations (DevRel) field as a Developer Advocate (DA).

I don't think there is an official definition for a "Developer Advocate", but you can think of it as the bridge between the company and the community. A DA represents the company to the community and the community to the company. But that's not all. The DA must balance the interests and needs of both and make sure they are both happy.

Some of the day-to-day activities of a developer advocate are as follows:

create demo applications to showcase the company's product
produce written, video, and social media content to educate users about the company's product
engage with the community
pass the feedback from the community to the company
provide support to the community

These are just a couple of examples (rather than an exhaustive list) so you get a brief idea of what a DA might do in a day. Also, there are DA roles focusing on different tasks from that list (DA focusing on video creation, DA focusing on social media management, and so on). It's really challenging and not advisable for one DA to do all those tasks.

How did I become a Developer Advocate

Now that you briefly understand what a DA is and what it involves, let's talk about how I became one.

To do that, we need to rewind to the beginning of my developer career. I was preparing to enter the field during my last university year and knew it would be tough. So, I thought of how to differentiate myself from the other candidates.

One idea that popped into my mind was to start a technical blog. Writing is my biggest passion, and I had (non-technical) blogs since my teenage years. So, it made sense. I decided to write about:

programming concepts and other related stuff I learn
issues, bugs, and errors I solve
my existing knowledge
my experiences

Ok, enough talk about how I started my blog. What has that to do with me being a developer advocate? That blog kickstarted my content creation journey, which got me into DevRel. I went from writing blog articles to creating videos and being active on social media.

And now, let's dive into why I wanted to switch back.

Why I went back to engineering

A little disclaimer before going further. This article might feel a tad negative because I'm talking only about what I didn't like about DevRel. Working in DevRel can also be great, and many people enjoy it. Also, I will probably work in DevRel again in the future, but my main focus now is growing my engineering skills.

Lastly, this article is not a dig at the companies I worked at. They were great, and I enjoyed working at both companies. In this article, I talk about what I don't like about DevRel in general.

With that out of the way, let's continue.

Lack of coding

The main reason was the lack of coding. In these 2 years as a DA, I did little to no coding. Even on the rare occasions when I coded, I built super basic applications.

It still sounds weird to me that, as a DA, you might not code at all. The title literally contains "developer", yet you don't code at all or minimally. Also, how can you relate to developers and advocate for them if you don't code yourself?

As a result, not only that I wasn't progressing. But even worse, my skills were regressing! The more time I spent in DevRel, the worse my coding skills became.

I knew that if I didn't do something about it quickly, it would eventually be nearly impossible to transition back to an engineering role.

It took me 6-7 months, but I eventually I did it.

High demands and no clear expectations

Another important reason was that many companies have high demands and expect one person to do the work of an entire department.

You'll often see job ads looking for a person who creates videos, who also writes articles, who also manages social media, who also does sales calls, who also travels to conferences, who also manages the community. And the list goes on and on and on.

That's a lot of work, and whoever takes such a job will most likely end up super burnt out.

Moreover, most companies don't have clear expectations, personal metrics, and a progression track. You don't know what's expected of you. You don't know how to measure your performance. And lastly, you don't know what are the next career levels and how to reach them.

For someone like me, who likes clarity, that's too much ambiguity. I prefer clear goals, objects, and a progression ladder.

Difficult to measure results

DevRel work is a head-scratcher when measuring its impact. The work done by developer advocates often takes time to show results, and there's no clear formula for measuring success.

DevRel folks wear many hats, from event organizing to content creation, and it's not like everything contributes equally to the big picture. Plus, the impact is usually visible immediately; it's more about keeping developers happy and loyal, which can be hard to put numbers on.

As a result, it's complicated to measure its impact.

Unfulfilling work

To me, the ideal DevRel role involves:

Working on the product as a developer
Building cool things
Showcasing that through video & written content

Unfortunately, I spent too much time managing social media accounts, writing listicles, and doing straight marketing.

While those activities are fine and required in a company, they do not fulfill me. And they are not the activities I envision myself doing as a developer advocate.

No future for me

I didn't see a future for myself in this type of role. Whenever I asked myself questions such as "where do I want to be in 5 years as a DA?", "how can I progress in this field?" or "what's the next step for me in DevRel?" I couldn't answer.

The only 2 questions I could answer were:

do I want to continue in this field? Not in the short-term, because it would mean losing my coding skills altogether.
what do I want to do next? To work as a software developer.

It was clear what I wanted, so I worked towards that. And here I am, working as an engineer again.

The end

Working in Developer Relations (DevRel) can be a great experience for many people, and my article is not meant to deter you from pursuing a career in DevRel. If I find the appropriate role, I'll probably give it a go in a few years again.

In my case, the lack of coding was the main reason that led me to switch back to engineering. I realized that I missed building things and that my skills were regressing fast.

The transition was challenging because my experience led me to receive mostly DevRel job opportunities and little to no engineering positions. Nonetheless, I managed to transition back to a developer role and am now focused on growing my technical skills.

This article was originally published on my blog catalins.tech. I encourage you to keep an eye on it because that's where I post all my articles.

Should New Developers Use AI Coding Tools?

Catalin Pit — Wed, 02 Aug 2023 11:02:45 +0000

AI coding tools like GitHub Copilot, ChatGPT and similar tools took the software development world by storm.

Some developers love them, some dismiss them, and the rest are neutral.

Personally, I enjoy using them, and I believe they can help developers of all levels, including new developers. However, there are some things to consider if you are a new developer.

With this article, I want to answer whether new developers should use AI coding tools and how to make the most of them.

Mention: This article is also useful for experienced developers, but its focus is on people new to software development.

Should new developers use them?

My short answer is yes. Developers should use any tool that makes them faster and better.

I believe AI coding tools are one example of tools that help developers code faster than ever.

But there is one crucial mention. These AI tools generate erroneous, incomplete, and inefficient code quite often. Also, they sometimes generate code that looks fine at first sight but has very subtle errors/inefficiencies. If you blindly trust them, you will get into trouble. By trouble, I mean that you will learn the wrong stuff and also build unreliable & insecure applications.

So, what should you do then?

Treat these AI tools like you treat any other resource on the internet. Would you copy & paste code from a website and blindly use it without understanding it? Do the same with these AI coding tools. They can be beneficial, but they can also be very dangerous if you misuse them.

The idea is to use them but with caution.

How to use AI coding tools

Since these tools were born, people have said they will replace developers.

My opinion is that they are nowhere near replacing developers. And the more I use them, the more they reinforce that opinion. They're just not good enough to generate correct, efficient code at the moment — at least not complex code.

But that does not mean they're not excellent tools. They're a great companion for coding.

For now, they're handy for the following use cases:

removing the entry barrier

No more "how to get started" questions. These AI tools are super valuable for giving you ideas on how to get started with a project or tool. Even if they do not generate the correct code, they give you pointers on how to get started.

The above GIF illustrates how ChatGPT helps you to get started with Zod. It generates both the code and explanations, so you understand what the code does.

speeding up development by generating boilerplate code

Writing the boilerplate code is one of the most tedious parts of the software development process. Thankfully, AI coding tools can help with that as well.

The above pictures show Cody AI generating the boilerplate code for a Node.js and Express application. It also helps you configure the ES module imports in your project.

finding/solving simple bugs and errors

These AI tools are also helpful for spotting bugs and errors. You can give them the code and ask them to find possible issues with your code. Then you can ask them to solve them but do not expect to get perfect answers. Use the solutions proposed to get an idea of how you could solve the issues.

re-factoring simple code

You can also use them to get ideas on how you can refactor and improve your code. Sometimes, they make suggestions that are not obvious to you. It happened many times for me to get ideas from these tools that were not obvious to me.

generating documentation and tests

It's well known (unfortunately) that documentation and tests are not the highest priorities when developing software. With these tools, you can add your code as input and ask them to generate documentation and tests based on your code.

These are some of the ways you can use AI coding tools to help you with coding. I emphasize again that you should not trust them blindly. Treat them as any other resource - only use the code if you understand it.

The AI coding tools I use

At the moment of writing this article, I use:

GitHub Copilot
OpenAI ChatGPT
Sourcegraph Cody AI

We have a community for developers. Join us here

The article Should New Developers Use AI Coding Tools? was originally published on my blog.

Rethink Full-Stack Development: Is a Custom Backend the Best Choice?

Catalin Pit — Thu, 22 Jun 2023 12:27:46 +0000

This article covers the conventional way of building full-stack applications and why manually building your backend is not always the best choice. You'll see an alternative solution for your backend needs that can be used standalone or coupled with your custom-built backend.

The issues with the traditional backend

The conventional approach to developing full-stack applications involves the tedious and time-consuming process of building the entire application from scratch.

The backend development requires setting and configuring servers, implementing the business logic, and managing databases. Building and maintaining a complex backend from scratch would take substantial resources. So why reinvent the wheel when you can use an existing solution that you can tailor to your needs with code? But more on that later.

It's important to mention that a custom-built backend might be the most appropriate solution in specific scenarios. However, in most cases, an existing solution that you can tailor to your needs through code is more than sufficient. It allows you to speed up the development process and move faster by automating the most tedious work. It also frees up resources so you can focus on business-critical tasks. Besides that, you do not need to choose one or the other. You can have the best of both worlds, as you will see later.

The main pain points are as follows:

complex and lengthy development process
a substantial amount of resources required
slow time-to-market
maintenance required
scalability and security are difficult

Headless API solutions

The alternative to custom-built backend applications are the Headless API solutions. A Headless API is an architectural design where the user interface (frontend) is decoupled from the business logic and data storage (backend). The backend exposes the data through an API. The frontend then uses the API to communicate with the backend.

There are multiple advantages to this approach:

The obvious one is the faster development process, since you only need to develop and focus on one part of the application - the frontend. The faster development process also enables you to reduce the time required to enter the market, which is essential in such a competitive landscape.
Since you are using an existing solution for your backend, you save valuable resources (finances and time) that you can use on other tasks that are more critical to the business.
Another advantage is that you have complete freedom when choosing which frontend technologies to use since the application parts are decoupled.
The Headless APIs are developed and maintained by teams of developers who focus exclusively on those APIs, which means these solutions might provide better security and scalability than a custom-built solution.

But now you might ask: "Where do I find these APIs?".

That's where Wix Headless comes into the picture. Wix recently released their Headless APIs, enabling developers to implement Wix's robust business solutions using composable APIs and SDK. You can use them with any tech stack across different platforms and devices.

Some of the current available Headless APIs are as follows:

bookings - The "bookings" API enables you to integrate booking features into your app. It provides features like scheduling and managing appointments, syncing staff calendars, setting up automated reminders, and more.
eCommerce - This API allows you to manage orders, inventory, shipping and finances from one central place. It provides secure payments, optimized checkouts and automated sales taxes.
CMS - The CMS solution offers an API for creating and managing content.
events - It allows you to build applications for hosting in-person or online events, sell tickets, manage guests, accept secure payments, and more.
pricing plans - You can use this headless API to create a members-only platform and offer exclusive access.

You can check all APIs here.

It's important to emphasize that you do not need to choose between the Headless APIs and a custom-built backend. Instead, you can have the best of both worlds since the Headless APIs can be integrated with other internal or 3rd party services.

Customize the APIs

I do not believe in one-size-fits-all solutions. At one point, you will want to modify or extend the functionality through code. You can do that by using the Wix Headless SDK.

You can use the SDK by installing the required packages:

@wix/api-client - the package is required to create the API client and to set up the OAuth. When you create the API client, you must provide the modules you want to use (e.g. the eCommerce Headless API).
@wix/{api-name} - the api-name should be replaced with the name of the Headless API you need (e.g. "@wix/ecom", "@wix/pricing-plans", "@wix/bookings" and so on). These packages return the modules you pass to the API client configuration and the ones that allow you to interact with the chosen Headless API.

That's all you need to interact with the Headless APIs.

Headless API Examples

In this section, you will see various demos and their code. They are basic, and their sole purpose is to illustrate the basic usage of the Headless APIs.

Headless CMS

One of the available Headless APIs is the CMS API which provides a user-friendly dashboard for creating and managing content. Let's say we have a landing page for the following APIs:

bookings
eCommerce
events & tickets
subscriptions

The app makes a request to the CMS backend to fetch information such as the title, slug, and description for each Headless API (see them at the bottom of the page). This is what the landing page looks like:

And here's the code that fetches the data:

import Link from 'next/link'
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';

import { createClient, OAuthStrategy } from '@wix/api-client';
import { items } from '@wix/data';

const myWixClient = createClient({
  modules: { items },
  auth: OAuthStrategy({
    clientId: `<your-client-id>`,
    tokens: JSON.parse(Cookies.get('session') || null)
  })
});

export default function Examples() {
  const [examples, setExamples] = useState([]);

  async function fetchExamples() {
    const examples = await myWixClient.items.queryDataItems({ dataCollectionId: 'examples' }).ascending('orderId').find();
    setExamples(examples.items);
  }

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

  return (
    <footer>
      {examples.map((example) => (
        <Link href={example.data.slug} key={example._id}>
          <section>
            <h2>{example.data.title} <span>-&gt;</span></h2>
            <p>{example.data.description}</p>
          </section>
        </Link>
      ))}
    </footer>
  )
}

The first step involves adding all the required imports at the top of the file. The next step is to create and configure the Wix API client. It requires you to specify the modules you want to use (items from the @wix/data package in this case) and the clientId for the OAuth strategy.

After that, you use the Wix client to fetch and display the data on the page. As the figure illustrates, it's a simple application. However, you can check a more complex application using the Headless CMS here.

Bookings API

Another API available is the bookings API, which enables you to integrate booking features into your applications. For example, you can set up flexible booking features based on location and availability, schedule or manage appointments, sync staff calendars, set up automated reminders and more.

The figure below illustrates an example using the bookings API, where users can select a service and a time slot.

After you choose a service and a time slot, you are redirected to a new page where you need to enter your details for the purchase. Once all the details are entered, you can add the purchase to the cart or book it straight away.

In this case, I clicked the "Add to Cart" button, which took me to the cart page. You can enter a promo code or add a note on this page. Once you are done, you can click the "Checkout" button to finalize the purchase.

The code is similar to the previous example in the sense that you need to create the Wix client and pass the appropriate modules. After that, it's the usual React code.

import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';

import { createClient, OAuthStrategy } from '@wix/api-client';
import { availabilityCalendar, services } from '@wix/bookings';
import { redirects } from '@wix/redirects';

const myWixClient = createClient({
  modules: { services, availabilityCalendar, redirects },
  auth: OAuthStrategy({
    clientId: `<your-client-id>`,
    tokens: JSON.parse(Cookies.get('session') || null)
  })
});

export default function Booking() {
  const [serviceList, setServiceList] = useState([]);
  const [availabilityEntries, setAvailabilityEntries] = useState([]);

  async function fetchServices() {
    const serviceList = await myWixClient.services.queryServices().find();
    setServiceList(serviceList.items);
  }

  async function fetchAvailability(service) {
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    const availability = await myWixClient.availabilityCalendar.queryAvailability({
      filter: { serviceId: [service._id], startDate: today.toISOString(), endDate: tomorrow.toISOString() }
    }, { timezone: 'UTC' });
    setAvailabilityEntries(availability.availabilityEntries);
  }

  async function createRedirect(slotAvailability) {
    const redirect = await myWixClient.redirects.createRedirectSession({
      bookingsCheckout: { slotAvailability, timezone: 'UTC' },
      callbacks: { postFlowUrl: window.location.href }
    });
    window.location = redirect.redirectSession.fullUrl;
  }

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

  return (
    <main>
      <div>
        <h2>Choose a Service:</h2>
        {serviceList.map((service) => {
          return <section key={service._id} onClick={() => fetchAvailability(service)}>{service.name}</section>;
        })}
      </div>
      <div>
        <h2>Choose a Slot:</h2>
        {availabilityEntries.map((entry) => {
          return <section key={entry.slot.startDate} onClick={() => createRedirect(entry)}>{new Date(entry.slot.startDate).toLocaleString()}</section>;
        })}
      </div>
    </main>
  )
}

Even though the example application is quite basic, it demonstrates how valuable and powerful the headless APIs are. They provide many features out of the box without requiring you to do any backend work.

Moreover, it provides a visual interface for managing the backend data. In this example, you can add, edit or remove services using the Wix dashboard. It also enables you to accept payments and manage orders. As a result, one is not required to be a developer to manage the backend.

With that being said, you can check more complex applications using the Headless Bookings API here:

More examples

This article presented two example applications to illustrate the usage of the APIs. All the examples shown in this article, and some more, are available in this repository. Moreover, there are a handful of production-ready templates you can use as a starter. Check them out here. They are more complex, and thus, they show how to build a production-ready application using these APIs.

Conclusion

The Headless APIs are excellent alternatives to building custom backend applications from scratch. However, you do not always have to choose between the two solutions. If you already have a custom-built backend, you can integrate these APIs into your existing backend application without requiring a total overhaul.

One of the most important benefits of using an existing solution is saving valuable resources such as finances and time. These resources can then be spent on more business-critical tasks.

In addition to that, these Headless APIs reduce or even eliminate the complex and lengthy development cycles. As a result, your product can reach the market sooner. The faster the time-to-market, the better.

Lastly, they are built and maintained by teams of experienced developers. They are made with scalability and security in mind. That means you do not have to worry when the business gets bigger and requires more resources & better security because they handle that for you.

In conclusion, whatever approach you take, you can be assured that these APIs will provide many benefits and save valuable resources.

The article was originally posted on my blog - Rethink Full-Stack Development: Is a Custom Backend the Best Choice?

DEV Community: Catalin Pit

I Landed 4 Jobs and Earned $25K+ with Technical Writing

Table of Contents

My Technical Writing Journey

The Results of Technical Writing

You Can Learn It Too

What you can learn from my 2023

Starting the year with a bang

The turnaround

What about the other problems?

Not Only Doom and Gloom

Content Creation

Time Off

What I Learnt

Conclusion

Build A Stunning Generative AI App with a React IDE

Create the application

The problem with building user interfaces

A visual React IDE

Component playground

Add the project to Codux

Configure TailwindCSS

Build the app

Create the components folder

Creating components from Codux

Layout component

Refactor App.tsx

Style the app with Codux

App component

Codux offers much more

The Backend Code for Generating the Image

An ending note

Why I Switched Back From DevRel to Engineering

A short note on DevRel

How did I become a Developer Advocate

Why I went back to engineering

Lack of coding

High demands and no clear expectations

Difficult to measure results

Unfulfilling work

No future for me

The end

Should New Developers Use AI Coding Tools?

Should new developers use them?

How to use AI coding tools

The AI coding tools I use

Rethink Full-Stack Development: Is a Custom Backend the Best Choice?

The issues with the traditional backend

Headless API solutions

Customize the APIs

Headless API Examples

Headless CMS

Bookings API

More examples

Conclusion

Create the `components` folder

Refactor `App.tsx`