Forem: Didicodes

How to Build a Full-Stack App With TanStack Start and MongoDB

Didicodes — Wed, 17 Dec 2025 22:25:52 +0000

What you'll learn

How TanStack Start unifies routing, data loading, server functions, and SSR in a single full-stack workflow
How to integrate MongoDB with TanStack Start using a reusable, serverless-friendly connection
How to build a CRUD Notes app with real-time UI updates using server functions instead of API routes

Building full-stack JavaScript applications often means choosing between two extremes: heavyweight frameworks that make too many decisions for you, or bare-bones setups that leave you wiring everything together manually.

TanStack Start offers a different approach. It's a full-stack React framework designed to make building web applications simple, fast, and flexible. Built on top of TanStack Router, Vite, and TypeScript, it brings together type-safe routing, client-side interactivity, server functions, SSR, and universal deployment in a clean, composable setup that's easy to work with.

Although TanStack Start is still in early release, it has quickly gained attention for its lightweight, explicit design. Rather than acting like a monolithic "batteries-included" framework, it gives you full control. You choose your backend, database, and architecture while still benefiting from solid conventions and powerful tools.

In this tutorial, you'll learn how TanStack Start works with MongoDB by building a simple full-stack Notes application.

Prerequisites

This tutorial assumes that you have the following:

Node.js 18+ installed (npm is included by default)
MongoDB Atlas account or MongoDB Community Server/Edition
Basic knowledge of React and TypeScript

Using TanStack Start and MongoDB

To build our Notes app (see the code repository), we'll use TanStack Start alongside MongoDB. TanStack Start takes care of things like routing, server logic, and data fetching in a way that feels clean and predictable, and MongoDB gives us flexible, document-based storage that fits nicely into server functions. Put together, they give us a simple full-stack workflow without the overhead of a heavier framework. Let's start building. 👇

Creating a new TanStack Start project

There are many ways to get a TanStack Start project up and running, but for this tutorial, we will use their Start-Basic starter template. To use it, we'll use gitpick (a tool for cloning specific folders from a Git repository) to clone just the starter template into a folder called tanstack-start-mongodb-notesapp:

npx gitpick TanStack/router/tree/main/examples/react/start-basic tanstack-start-mongodb-notesapp

Now, run the commands below to switch to the tanstack-start-mongodb-notesapp directory, install the required dependencies, and start the development server.

cd tanstack-start-mongodb-notesapp
npm install
npm run dev

After doing this, the starter template application will run in your browser at http://localhost:3000. It should look similar to the one in the image below. Feel free to play around with it to get a sense of how TanStack Start works.

Now, head back to your terminal and install the additional dependencies listed below, as we will need them to build our Notes application.

# 1. Installs the official MongoDB Node.js driver
# 2. Installs a TypeScript-first schema validation
npm install mongodb zod

# Installs dev dependencies for environment variables and running TypeScript files
npm install -D dotenv tsx

Understanding the project structure for the app

With our TanStack Start project now up and running, the next step is to remove the boilerplate and set up the project structure for the Notes app we will be building. You can do this automatically by running the command below in your tanstack-start-mongodb-notesapp directory or manually by deleting the example routes (posts, users, etc.) and creating the new folder structure in your code editor.

curl -o setup.sh https://gist.githubusercontent.com/didicodes/82b5c23647691c4b7b65b1e1558963f5/raw/bbf9d406a82458b236b37652b92212daa1f80f85/setup.sh && chmod +x setup.sh && ./setup.sh

After running the setup script (or completing the manual setup), your project structure should match the one shown below 👇

Creating all the files upfront will make developing the Notes app smoother and give you a clear picture of where each part of the app will live. As you keep reading this tutorial, you'll learn what each file is responsible for.

Setting up MongoDB with TanStack server functions

Before building any features, we need to set up MongoDB to work well with TanStack Start and serverless environments. In the next few steps, we'll configure environment variables, define serverless-friendly connection settings, create a reusable MongoDB client, and add type-safe validation so our database layer is efficient and reliable.

Step 1: Set up environment variables

Before our app can save or fetch any data, it needs to connect to a database. For this project, we'll use MongoDB Atlas, MongoDB's fully managed cloud database. To connect to it, you need a connection string. Since this connection string includes sensitive information, we'll store it in an environment variable and load it securely at runtime. This keeps our credentials secure and allows us to switch configurations across different environments easily.

To set this up, go to the .env file you'd created earlier in your project's folder and add the variables shown below, replacing the value with your MongoDB connection string. To get the connection string, log in to MongoDB Atlas, create a cluster, then navigate to Connect → Drivers → Node.js, select a version, and copy the displayed connection string. Need additional help getting started with MongoDB Atlas or finding your connection string? Check out the MongoDB Atlas Getting Started guide.

# MongoDB Connection String
MONGODB_URI = mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<database>

Step 2: Configure MongoDB settings

TanStack Start's server functions use a serverless execution model, so we have to optimize the connection pool accordingly. To do this, go to the src/config/mongodb.ts file, copy and add the code below.

// Database and collection names
export  const DB_NAME = "notes-app";
export  const COLLECTION_NAME = "notes";

// Connection pool configuration optimized for serverless
export  const MONGODB_CONNECTION_CONFIG = {
minPoolSize: 1,
maxIdleTimeMS: 60000,
} as  const;

In the code above, we've specified our database and collection names and configured a serverless-optimized connection pool. We set minPoolSize to 1 to keep at least one connection warm for faster subsequent requests, and set maxIdleTimeMS to 60000 to close idle connections quickly and free resources.

Step 3: Define types with Zod

Before connecting to MongoDB, we need to define our data structures. We'll use Zod for runtime validation and TypeScript for compile-time safety. This will ensure our MongoDB database and the UI of the Notes application receive consistent values. To do this, go to your src/lib/types.ts file and add the code snippet below:

import { z } from "zod";
import { ObjectId } from "mongodb";

/**
 * Zod schemas for input validation
 * These validate data coming from the client
 */
export const createNoteSchema = z.object({
  title: z
    .string()
    .min(1, "Title is required")
    .max(200, "Title must be 200 characters or less"),
  content: z.string().max(10000, "Content must be 10,000 characters or less"),
});

export const updateNoteSchema = z.object({
  id: z.string().min(1, "Note ID is required"),
  title: z.string().min(1).max(200).optional(),
  content: z.string().max(10000).optional(),
});

export const deleteNoteSchema = z.object({
  id: z.string().min(1, "Note ID is required"),
});

/**
 * TypeScript types inferred from Zod schemas
 * This ensures our types always match our validation rules
 */
export type CreateNoteInput = z.infer<typeof createNoteSchema>;
export type UpdateNoteInput = z.infer<typeof updateNoteSchema>;
export type DeleteNoteInput = z.infer<typeof deleteNoteSchema>;

/**
 * MongoDB document structure
 * This represents how data is stored in the database
 */
export interface NoteResponse {
  _id: ObjectId; // MongoDB's internal ID
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
}

/**
 * Client-facing note type
 * This represents how data is sent to the browser
 */

export interface Note {
  id: string; // ObjectId converted to string
  title: string;
  content: string;
  createdAt: string; // Date converted to ISO string
  updatedAt: string; // Date converted to ISO string
}

/**
 * Document type without _id (for insertOne)
 */
export type NoteDocument = Omit<NoteResponse, "_id">;

/**
 * Converter function: MongoDB document → Client-friendly note
 *
 * This is important because:
 * - ObjectId isn't JSON-serializable
 * - Dates need to be ISO strings for JSON
 */

export function documentToNote(doc: NoteResponse): Note {
  return {
    id: doc._id.toString(),
    title: doc.title,
    content: doc.content,
    createdAt: doc.createdAt.toISOString(),
    updatedAt: doc.updatedAt.toISOString(),
  };
}

In the code above, we are using Zod for runtime validation and TypeScript type inference. This gives us both compile-time and runtime type safety.

Step 4: Create a reusable MongoDB client

TanStack Start executes server functions on the server, so we need a reliable and efficient way to connect to MongoDB. Instead of opening a new database connection on every request, we'll create a shared MongoDB client that can be reused across server function invocations.

Head back to your code editor and add the code snippet below to the src/lib/mongodb.ts file.

import { MongoClient, type Collection, type Db } from "mongodb";
import {
  COLLECTION_NAME,
  DB_NAME,
  MONGODB_CONNECTION_CONFIG,
} from "../config/mongodb";
import type { NoteResponse } from "./types";

const MONGODB_URI = process.env.MONGODB_URI;

/**
 * Global cache for MongoDB client
 * This survives across serverless function invocations
 */
interface CachedConnection {
  client: MongoClient | null;
  db: Db | null;
  promise: Promise<{ client: MongoClient; db: Db }> | null;
}

const cached: CachedConnection = {
  client: null,
  db: null,
  promise: null,
};

/**
 * Get or create a MongoDB connection
 *
 * This is the heart of our serverless optimization.
 * It implements a three-tier caching strategy:
 *
 * 1. Return existing connection if available (fastest)
 * 2. Wait for in-flight connection if one is being created (prevents duplicates)
 * 3. Create new connection if neither exists (slowest, but necessary)
 */
export async function connectToDatabase(): Promise<{
  client: MongoClient;
  db: Db;
}> {
  // Tier 1: Return cached connection if available
  if (cached.client && cached.db) {
    return { client: cached.client, db: cached.db };
  }

  // Tier 2: Return in-flight connection promise if exists
  // This prevents multiple simultaneous connection attempts
  if (cached.promise) {
    return cached.promise;
  }

  // Validate connection string
  if (!MONGODB_URI) {
    throw new Error(
      "Missing MONGODB_URI environment variable. " +
        "Please add it to your .env file."
    );
  }

  // Tier 3: Create a new connection
  cached.promise = MongoClient.connect(MONGODB_URI, {
    appName: "devrel-tutorial-javascript-tanstack",
    ...MONGODB_CONNECTION_CONFIG,
  })
    .then((client) => {
      const db = client.db(DB_NAME);

      cached.client = client;
      cached.db = db;
      cached.promise = null; // Clear promise since we're done

      return { client, db };
    })
    .catch((error) => {
      // Reset promise on error to allow retry
      cached.promise = null;
      throw error;
    });

  return cached.promise;
}

/**
 * Get typed collection accessor
 *
 * This provides type-safe access to MongoDB collections.
 * The NoteResponse type ensures we get proper TypeScript
 * autocomplete and type checking.
 */

export async function getNotesCollection(): Promise<Collection<NoteResponse>> {
  const { db } = await connectToDatabase();
  return db.collection<NoteResponse>(COLLECTION_NAME);
}

With this in place, our Notes app includes a MongoDB connection layer that integrates efficiently with TanStack Start's server function model. The reusable MongoDB client we've just implemented works well with TanStack Start because it reuses a single MongoDB connection across requests and safely handles concurrent access, thereby avoiding connection pool exhaustion.

Building server functions for CRUD operations

Now that our database connection layer is in place, let's create server functions for CRUD operations. To create the server functions for our Notes app, go to your src/server/notes.ts file and add the following code.

import { createServerFn } from "@tanstack/react-start";
import { getNotesCollection } from "../lib/mongodb";
import { ObjectId } from "mongodb";
import {
  documentToNote,
  createNoteSchema,
  updateNoteSchema,
  deleteNoteSchema,
  type Note,
  type NoteDocument,
  NoteResponse,
} from "~/lib/types";

export const getNotes = createServerFn({ method: "GET" }).handler(
  async (): Promise<Note[]> => {
    try {
      const collection = await getNotesCollection();
      const docs = await collection.find({}).sort({ updatedAt: -1 }).toArray();

      return docs.map(documentToNote);
    } catch (error) {
      console.log("Error fetching notes:", error);
      throw new Error("failed to fetch notes");
    }
  }
);

export const createNote = createServerFn({ method: "POST" })
  .inputValidator(createNoteSchema)
  .handler(async ({ data }) => {
    try {
      const collection = await getNotesCollection();
      const now = new Date();

      const newNote: NoteDocument = {
        title: data.title,
        content: data.content,
        createdAt: now,
        updatedAt: now,
      };

      const result = await collection.insertOne(newNote as any);

      const created = await collection.findOne({ _id: result.insertedId });
      if (!created) {
        throw new Error("Note created but could not be retrieved");
      }

      return documentToNote(created);
    } catch (error) {
      console.error("Error creating note:", error);
      throw new Error("Failed to create note");
    }
  });

export const updateNote = createServerFn({ method: "POST" })
  .inputValidator(updateNoteSchema)
  .handler(async ({ data }) => {
    try {
      const collection = await getNotesCollection();

      const updateFields: Partial<NoteResponse> = {
        updatedAt: new Date(),
      };

      if (data.title !== undefined) updateFields.title = data.title;
      if (data.content !== undefined) updateFields.content = data.content;

      const result = await collection.findOneAndUpdate(
        { _id: new ObjectId(data.id) },
        { $set: updateFields },
        { returnDocument: "after" }
      );

      if (!result) {
        throw new Error("Note not found");
      }

      return documentToNote(result);
    } catch (error) {
      console.error("Error updating note:", error);
      throw new Error("Failed to update note");
    }
  });

export const deleteNote = createServerFn({ method: "POST" })
  .inputValidator(deleteNoteSchema)
  .handler(async ({ data }) => {
    try {
      const collection = await getNotesCollection();

      const result = await collection.deleteOne({ _id: new ObjectId(data.id) });

      if (result.deletedCount === 0) {
        throw new Error("Note not found");
      }

      return { success: true };
    } catch (error) {
      console.error("Error deleting note:", error);
      throw new Error("Failed to delete note");
    }
  });

These functions are created with createServerFn, which lets us define logic that runs only on the server in TanStack Start. Even though we can call them from the client, the code itself never leaves the server, so database access stays secure. We also use Zod to validate incoming data before it touches the database, and a shared MongoDB client to efficiently reuse connections, which is especially important in serverless environments.

Before returning data to the client, MongoDB documents are converted into a JSON-safe format, so the UI always receives consistent, serializable data. This approach eliminates the need for separate API routes and manual data fetching, letting you focus on business logic while TanStack Start handles the rest. This is where TanStack Start really shines!

Creating the UI with real-time updates

With our server functions in place, we can now build the user interface that consumes them. In this step, we'll create the main Notes page, wire it up to our server functions, and ensure the UI stays in sync with the database as users create, update, and delete notes.

The home route for the app is going to live in src/routes/index.tsx. This file will define the Notes route and UI and act as the main entry point for displaying and managing notes. Since the implementation is fairly long, I've linked the full file on GitHub instead of pasting it here. So, go to this GitHub file, then copy the code and paste it into your src/routes/index.tsx file.

The code you just added uses TanStack Router's loader to fetch notes on the server before the page renders. That means the initial list of notes is already available when the page loads, giving us fast and server-rendered content by default. On the client side, we keep a local copy of the notes in React state. Whenever a user creates, updates, or deletes a note, we call the corresponding server function (createNote, updateNote, or deleteNote) and then refresh the notes from the database. This gives us instant, real-time updates (instant UI updates driven by server functions) without needing WebSockets or complex state management. The key takeaway here is how TanStack Start allows the UI to communicate directly with server functions, eliminating the need for manual API routes while keeping everything fully type-safe.

The frontend and backend are now connected, so let's see what our Notes app looks like. To do this, run npm run dev in your terminal and go to http://localhost:3000 in your browser. You should see a form to create new notes, be able to edit and delete notes, and see immediate UI updates when changes are made.

Try creating a new note. If everything is set up correctly, it should appear instantly. The data is persisted in MongoDB, and the UI stays in sync automatically thanks to TanStack Start's server functions. Here's what the app looks like with a few notes created 👇

Implementing SSR and routing

At this point, we have a fully functional Notes app with server functions handling all database operations. The final step is to configure routing and server-side rendering, which ties everything we've built so far together.

As you've already seen with route loaders, TanStack Start runs data fetching on the server for the initial request and sends fully rendered HTML to the browser. Subsequent navigations run loaders on the client, call server functions as needed, and update the UI without a full-page reload. This gives us fast first loads, SEO-friendly pages, and smooth client-side navigation by default.

To configure this, go to your src/router.tsx and add the following code:

import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary";
import { NotFound } from "./components/NotFound";

/**
 * Create and configure the application router
 */
export function getRouter() {
  const router = createRouter({
    routeTree,
    defaultPreload: "intent", // Preload on hover
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () => <NotFound />,
    scrollRestoration: true,
  });
  return router;
}

/**
 * Type declaration for full type inference
 */
declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof getRouter>;
  }
}

This setup gives us file-based routing through the generated routeTree, server-side rendering on the initial page load, and smooth client-side navigation with automatic data fetching. Things like error handling, 404 pages, scroll restoration, and full TypeScript inference all work out of the box and plug directly into the loaders and server functions we set up earlier.

To confirm that server-side rendering is working, run:

npm run build
npm run preview

Open the generated preview URL in your browser, right-click the page, and select "View the page source." There, you should see a fully rendered HTML containing your notes, not just an empty root element. This confirms that your data is fetched on the server and sent as HTML.

At this point, you have a full-stack application built with TanStack Start and MongoDB. From here, you can build on this foundation by adding authentication, pagination, optimistic updates, or deployment optimizations as your application grows.

Summary

TanStack Start is pushing full-stack development in a more unified direction, where routing, data fetching, server logic, and rendering all live in the same place and work together naturally. Rather than hiding complexity behind heavy conventions, it gives developers clear, composable building blocks, along with strong performance and end-to-end type safety.

In this article, we used TanStack Start with MongoDB to build a full-stack Notes app and saw how server functions, loaders, and server-side rendering come together in a real project. MongoDB fits neatly into this setup through server functions, making it a good option for teams that like document-based data models and want explicit control over their backend.

As the React ecosystem continues to evolve, tools like TanStack Start hint at a future where full-stack development feels simpler, more transparent, and more flexible without sacrificing power or control.

Key takeaways

TanStack Start offers lightweight full-stack development with strong type safety.
MongoDB integrates naturally with TanStack Start's server function model using reusable connections.
Server functions replace traditional API routes while keeping data access secure.

20 Web Monetized Projects to Inspire You

Didicodes — Wed, 23 Jun 2021 16:07:52 +0000

Until recently, the only way content creators could make money was through advertising or other business models that take advantage of a user's privacy.

But with the proposed W3C Web Monetization API, creators now have a revenue model that empowers them to make money from their users without advertising, forcing them to subscribe, or invading their privacy. Amazing right? 😍

There are a ton of developers across the world who are experimenting with Web Monetization. Want to see them? You are in the right place. 😀

In this article, I collated a list of projects using Web Monetization to make money and offer their users exciting perks.

Cinnamon

Cinnamon is a community-driven content creation platform that allows users to view and create videos while providing native cross-app sharing.

It uses web monetization to allow video creators to earn from their content without bugging the viewers with unnecessary advertisements.

With a fee of only $5, Cinnamon grants viewers ad-free access to all videos available on the platform. Then pays the video creators in real-time.

This means that creators do not have to wait until the end of the month to be paid like traditional video streaming platforms because Cinnamon uses Web monetization to redistribute funds based on the time viewers spend on video content.

Simmer

Simmer is a platform for Indie game developers to host their creations in the browser for free with a single drag and drop mechanism.

Simmer was one of the first game portals to integrate with the Web Monetization API. Through this integration, creators can generate their payment pointer from Coil, paste it into Simmer's game editor UI to make their games monetized automatically.

If you are a game developer, you should take advantage of the engaging audience on Simmer by uploading your games and making money at the same time.

Twitch

Twitch is a live streaming service that allows users to create channels, run broadcasts, and interact with their viewers.

Thanks to the automatic Web Monetization support on twitch, viewers can support their favorite Twitch Partners and Affiliates by simply watching their streams.

Then Coil keeps track of how much each streamer has earned and then purchases Twitch Bits when the minimum purchase threshold is reached for that particular streamer. Pretty cool, right?

Hashnode

Hashnode enables developers to create a blog mapped to their domain for free. So they can focus on developing and sharing content on their blogs while we take care of the rest - customization, readership, visibility, web monetization, and so much more.

As a reader, you'll get access to all the tech articles for free without any ads or restrictions. On the other hand, the creators get to make money based on the amount of time any Coil subscriber spends on their blog.

Web Monetization has changed a lot of things. Gone are those days where we thought the only way to make money as a blogger was through ads or adding a paywall.

Imgur Emerald

Imgur is the easiest way to discover and enjoy the magic of the Internet. It's where you'll find the funniest, most informative, and inspiring images, memes, GIFs, and visual stories served up in an endless stream of bite-sized fun.

Powered by a passionate community of people worldwide, anyone can join to share cool stuff and vote the best to the top. You'll always find something on Imgur that brightens your day. 😀

Yes, Imgur uses the Web Monetization API as well. So, Coil will distribute the micropayments to the creators according to the amount of time Coil subscribers spend looking at content on Imgur.

Subscribers also get access to unlimited uploads, community features, and, most importantly, an ad-free browsing experience.

Permanent

Have you ever thought about your digital legacy? By digital legacy, I mean an accumulation of the different text, pictures, and videos you've posted online over the years.

The truth is our digital legacy is disappearing because we've not had a central place to store it. And each time it disappears, a glimpse of who we were vanishes as well.

To solve this, Permanent enables you to create, curate, and collaborate on living archives for yourself, your family, and your community.

Thanks to the power of the Web Monetization API, the owners of Permanent.org are prototyping and building an Open Source API that allows users to easily store data with a storage provider using a one-time micropayment, with no need for storage provider or frontend service accounts and financial commitments.

She Code Africa

She Code Africa is a non-profit organization focused on celebrating and empowering young girls and women in tech across Africa.

They champion exceptional programs and initiatives to improve the tech skills of their members and keep the community engaged, amongst other things.

She Code Africa recently integrated Web Monetization into their website as a means to earn revenue. This revenue is used to continue the fantastic work they are doing in the developer community. You should support them!

CSS-Tricks

CSS-Tricks is one of the best websites to find insightful articles about frontend development.

Keeping in mind that it is one of the best websites for frontend content, many devs worldwide have benefitted from it tremendously. Meaning that some of them may have wanted to tip the writers or tell them "thanks" financially.

With Coil as CSS-Tricks web monetization provider, the website now receives micropayments from readers who have an active Coil subscription and the browser extension.

Ushahidi

Ushahidi is a crowdsource-driven data platform that enables people to raise their voices, inform their decisions, and influence change in their communities.

Being a non-profit, integrating web monetization on Ushahidi was an excellent way to gain revenue without running ads, especially during the pandemic. So, if any Coil user visits Ushahidi, Coil will calculate the amount of time you've spent on the website and credit the non-profit team. And most importantly, your data is safe!

Akita

Akita is a free and Open Source project that displays your top-visited monetized sites, how much time you're spending on them, and how much you're contributing (or could contribute) to them.

They also create diverse resources that will help you understand Web Monetization through storytelling, easy-to-use tools, and community outreach.

Puma Browser

Puma is a new way to pay for content through a privacy-focused web browser!

It provides a fast and private mobile Web3 browser that makes it easy to support creators, game & app developers, and charities of your choice.

The platform uses Coil and the Web Monetization API to create an ad-free user experience and send payment(s) for the content directly from the browser.

Flood Escape

Flood Escape is an action-packed rush to get out of danger!

You have to build your way up to escape the flood and be rescued in time in the game. You can also customize your experience with flames, get rewarded, and have a good time. 😀

Flood Escape uses web monetization to generate revenue from its game without the need for bugging users with unnecessary advertisements. They also give web monetization subscribers a bonus of 100 plus coins and a faster cooldown time.

Dev

Dev is an Open Source software that powers a community of software developers who write articles and build relationships with other developers.

The platform allows individual authors to add their Coil Payment pointer to their blogs right through their settings. So, every time a Coil subscriber reads your article, micropayments will be sent to your payment wallet by Coil.

Ballet Rising

Ballet Rising is a non-profit organization focused on the stories of people worldwide whose passion for classical ballet is redefining its culture and elevating ballet as a truly global art form.

It highlights communities where there is an interest in ballet to drive and build positive relationships with local arts organizations so that the global ballet community grows in harmony with local customs.

Their website is monetized using Coil. So, you can support them by signing up for a coil membership.

Tech with Catalin

Tech with Catalin is a blog owned by Catalin Pit, a Software Engineer specializing in JavaScript technologies and AWS.

The blog covers content about NodeJS, backend development, Open Source contributions, and growing as a developer.

Thanks to web monetization, Tech with Catalin generates revenue without displaying ads to its readers or adding a paywall.

Techdirt

Techdirt is an American Internet blog that reports on technology's legal challenges and related business & economic policy issues in the context of the digital revolution. It focuses on intellectual property, patents, information privacy, and copyright reform in particular.

While other websites have resorted to paywalls, registration requirements, and increasingly annoying/intrusive advertising, Techdirt has made their site open and available to anyone, thanks to Web Monetization.

As a Coil subscriber, you'll get to support Techdirt anytime you read content on their website.

On The Chain

OnTheChain promotes everything cryptocurrency-related. It has many podcasts, Youtube videos, newsletters, and a channel where they share tips and encourage people to join the cryptocurrency community.

OnTheChain uses the XRP TipBots wallet to receive bits of streaming payments from subscribers via Coil's Web Monetization API.

This allows them to give their users an incredible ad-free experience and not invade their privacy to make money.

SHORT FILM WEB

ShortFilmWeb is a directory of some of the best short films freely available online carefully handpicked by the team.

ShortFilmWeb uses Coil to monetize its content, giving them an edge to continue posting quality films and reviews.

Hackernoon

Hackernoon is a community of over 12,000+ contributing writers publishing free high-quality tech stories. The platform supports writers by proofreading their articles before it is published on the platform.

Hackernoon believes that advertising is not the best way to generate revenue, so they use Web Monetization instead.

Because of this, writers on the platform can accept a stream of micro-tips from their readers.

JS Bin

JS Bin is a free and Open Source code-sharing website for web developers. It enables developers to create and share code snippets or web pages with their colleagues or anyone in the developer community.

Being a free platform, JS Bin uses Coil and the Web Monetization API to generate revenue to keep the website running without ads.

Summary

Web monetization paves the way for a more open, fair, and inclusive web to better support users and creators.

Creators make money, and users finally experience their favorite websites without annoying advertisements or the invasion of their privacy.

Now that you've seen a couple of projects and people using the Web Monetization API by Coil go ahead and become a Coil Subscriber or integrate the Web Monetization API into your projects, blog, or website. You will find everything you need to get started here.

I hope you enjoyed reading this article. If you have any questions, share them in the comment section below, and I'll reply to every comment. 💛

TypingDNA Verify - A New Way to Authenticate Users

Didicodes — Thu, 03 Jun 2021 22:53:23 +0000

Two-factor authentication (2FA) is a security process in which users provide two authentication factors to verify themselves.

If you think I am referring to the traditional SMS and Email 2FA methods from what you read above, you are wrong. I am actually referring to a more fascinating technology known as typing biometrics. Believe it or not, your typing behavior is unique enough to act as a substitute for traditional second factors.

TypingDNA, a company that provides a free authentication API & managed verification solutions for developers, is a leader in this space - and it’s simple to get started. As the curious developer that I am, I gave TypingDNA Verify a try, and I was impressed at the way it was able to verify me through the way I typed.

In this article, I will tell you everything you need to know about the fascinating TypingDNA Verify and how to use it.

So, what exactly is TypingDNA Verify?

TypingDNA Verify relies on a state-of-the-art authentication engine using AI-based algorithms to verify typing patterns and select the best key phrases that enable higher matching accuracy on short texts.

This means that your end-users will have to prove their identity by typing generated texts, only deferring to Root of Trust channels (SMS & Email) when strictly necessary.

While SMS OTP’s revolutionized the security best practices decades ago, the method has reached its limits, especially in the fast-paced world that we now live in and tech industries that value good user experience.

The interesting thing about TypingDNA Verify is that your users can be authenticated without having to search for their phone to see the SMS OTP or use a physical token. Why? That's because users can't forget their fingers or typing behavior behind. 😉

With TypingDNA Verify, you can:

Recognize trusted users through the way they type.
Minimize the user's effort and friction while producing a visible sense of protection.
Catch fraudsters instantly because a true/false match response will be returned instantly and so much more!

Most importantly, the chances of a security break are very slim because your typing pattern is unique to only you!

At the time of this writing, TypingDNA Verify can only be integrated into a website. However, TypingDNA's Authentication API can be integrated into both a website and mobile application.

Using TypingDNA Verify on your website

Now that you understand what TypingDNA Verify offers, follow the steps below to integrate it on a website.

Step 1: Create an account

Go to TypingDNA Verify and click on the Sign up to integrate Verify button.

On the Client's page, you will be given an option to choose between Verify or the Authentication API. For the purpose of this tutorial, click on Verify to access your dashboard.

On your dashboard, you will see your Client ID and Secret, a demo of Verify, an option to set up your first integration and configure your account using any of the recommended connection providers.

Step 2: Configure your account

Below are the steps required within the dashboard to configure a Verify account before beginning the integration process:

In order to begin the integration process, you need to configure your account by connecting it to either your Twillo and SendGrid account.

Connecting to Twillo or SendGrid is important because they will be used on your behalf to send a verification code or SMS to your users. Without connecting to any of the aforementioned providers, an error message will be returned.

As the image above implies, click on Connect Twillo if you want your users to receive an SMS verification, then click on Connect SendGrid if you want your users to receive an email verification.

Configuring Twillo and/or Sendgrid serves has a fall-back option for your users. The default 2FA TypingDNA Verify provides is the typing biometrics. 😃

Step 3: Integrate TypingDNA Verify into a website

To kickstart the integration process, click on the Add your first integration button on your dashboard.

Add the name for your application and the domain URL associated with it, then click on the Create Integration button.

This information will be used to ensure proper and secure communication between the TypingDNA Verify window and your website.

Step 4: Integrate TypingDNA Verify into your codebase

After configuring your account and adding the domain URL of your website to your dashboard, the next thing you need to do is integrate TypingDNA Verify into the frontend and backend of that website.

Let's get our hands dirty with code! 👇🏽

a) Install the TypingDNA Verify client

The first thing you need to do is install the TypingDNA Verify client using the command below:

npm install typingdna-verify-client

b) Initialize the client

After typingdna-verify-client has been installed successfully, go to your backend code and initialize the client using the code below.

const typingDNAVerifyClient = new TypingDNAVerifyClient({ 
    clientId: "",
    applicationId: "",
    secret: ""
});

Replace the empty strings with the value of your clientId, applicationId, and secret available on your dashboard.

c) Add the script to your HTML

Now, add the TypingDNA Verify CDN below to your frontend code.

<script src = "https://cdn.typingdna.com/verify/typingdna-verify.js"></script>

This script renders the button which opens the TypingDNA Verify window.

d) Retrieve the users data

We need to call the getDataAttributes JavaScript method to pass the credentials and encrypted user data to the button element we are going to add in our frontend code in the next step.

So, go back to your backend code and paste the code below.

const typingDNADataAttributes = typingDNAVerifyClient.getDataAttributes({ 
    email,
    phoneNumber,
    language :  'en',
    mode : 'standard' // 'show_otp' alternatively
});

The language and mode are optional parameters, defaulting to ‘EN’ and ‘standard’ respectively.

e) Add a button element to your HTML

Finally, add a button element with a ‘typingdna-verify’ class and the data attributes that correspond to values of the TypingDNADataAttributes object explained above. This will be passed to the TypingDNA Verify window once the button is clicked by an end-user.

<button
      class = "typingdna-verify"
      data-typingdna-client-id= typingDNADataAttributes.clientId
      data-typingdna-application-id= typingDNADataAttributes.applicationId
      data-typingdna-payload= typingDNADataAttributes.payload
      data-typingdna-callback-fn= "callbackFn"> Verify with TypingDNA
</button>

If you followed the steps above correctly, your users should now be able to authenticate themselves using TypingDNA Verify.

Demo 👨‍💻 👩‍💻

You can play around with the demo here to get a better understanding of how TypingDNA Verify works and let me know what you think in the comment section.

Conclusion

I believe TypingDNA Verify has a lot of potentials and could be the next big thing in the Two-factor authentication space. So, I'd recommend you give it a try now it is still free for a year.

Want to learn more about how TypingDNA Verify works? You can access code snippets, demos, and more by visiting their official documentation.

I hope you enjoyed reading this article. If you have any questions, share them in the comment section below, and I'll reply to every comment. 💛

How to Kickstart a Career in Tech

Didicodes — Fri, 16 Apr 2021 07:42:39 +0000

A career in tech is a career without boundaries. From web development to product design to project management to app development, the range of job roles and opportunities in the tech ecosystem is huge.

You might think you're not good enough to have a career in tech -- but give yourself a chance. You can do it.

The truth is you, don't have to be a genius to work in technology. And in this article, I'll explain how you can kickstart your own career in tech.

Do Your Research

Technology is a very broad field. This means that there are different areas in tech that require certain skills. In order to discover the right role for yourself, you need to do some research.

You can start by researching the major areas in tech below:

After reading through the resources listed above, you will have a better idea of the major areas in tech. With this knowledge, you can go ahead and explore the area that you found most interesting.

You can either do this online using your favorite search engine or by asking someone in tech (if you know any).

If you decide to follow the search engine route, ask questions targeted at what you want to discover. For instance, if you want to learn about the benefits of technical writing, your question should follow this format "What are the benefits of becoming a technical writer?".

If you want to know about the skills required to be a Data Scientist, then your question should follow this format "What do I need to know to become a data scientist?" or "How do I become a data scientist?".

To be honest, it is almost impossible to not find information about the different areas in technology online.

If you decide to ask someone in tech, always be polite and go straight to the point. Instead of saying "Hi" and waiting for the person to respond before asking your question, you can follow this format:

"Hi Rita, my name is Edidiong and I have been researching different career paths in tech. I have read different articles online but I wanted to also hear your opinion as well. How did you know web development was the right career for you? I'd totally understand if you can't respond because of your busy schedule but I will be glad if you do."

You might think that this was a pretty long message, but it covered the most important things: your name, what you need, the research you've done already, and that you understand that you are not entitled to the person's time.

Decide Which Path to Take

After carrying out the necessary research, you need to take a moment and decide on the tech career path you want to pursue.

Perhaps you've read about product design, but you've never had an eye for designing or using colors effectively. Then maybe you also heard about program management and it made you excited because you've always loved managing people or events.

And maybe your friend in tech also told you about the benefits of being a web developer and you were impressed. But you are not sure yet which tech role to pursue because they all sound good.

Here are some tips for things to think about when trying to make this decision.

Think about your current (transferrable) skills

Before you decided to kickstart a career in tech, you were mostly doing something else that you found interesting. Let's assume you loved painting.

Anyone who loves to paint understands a lot about colors -- so that means product or UI/UX design might be a good fit for you. The goal here is to try to connect your current skill or hobbies to your proposed tech career path.

Just get started -- no matter how that looks

Choosing an initial tech career path doesn't mean that's what your career will always be about. My point is, it is totally fine to start out as a technical writer and switch to mobile development later.

For instance, I started out as an android developer but eventually switched to web development. So go ahead and get your feet wet before you narrow down to exactly what you want.

Go for passion, but be practical too

It is important to know that choosing to pursue a certain tech role because you are passionate about it is great. But it's also ok to choose a role because you believe the opportunities are better, even if you are not very passionate about it.

So, I'd recommend that you do a mixture of both: choose something you will enjoy doing and become so good that you get tons of opportunities.

Find Tools & Resources Online

Remember how I said it is almost impossible not to find resources about tech online? Yes, I wasn't joking.

It's so amazing that you can also find really insightful resources to kickstart your career in tech for free.

For instance, freeCodeCamp is a platform that empowers people from all over the world to learn how to code for free. I personally used it while learning how to code and it was one of the best resources. 😃

To find these tools and resources, search for them on Google by using keywords and phrases like where can I learn how to be a (insert tech role) for free?

If you have the funds to acquire paid tools and resources, go for it. If you prefer one on one sessions with a tutor, then you can pay for that, too. 🤑

Simply put, finding the resource is not an issue. Choosing the right resource is the key thing here.

So, how do you choose the right project? I'll tell you!

First, think about your preferred way of learning. For example, do you prefer reading or watching videos?
After choosing your preferred learning format, make sure you choose a resource that has some structure. By structure, I mean a plan or curriculum that will educate you about the necessary skills step by step until you understand.
Ask questions or read reviews about the resource.
Do a quick test run to see if this resource is the right one for you. Does it have the right format, good examples, pictures, and so on?

This is very important because choosing the wrong resource or tool might make you give up easily because you won't enjoy the process or understand what you are trying to learn.

Just Start Learning

The secret of getting ahead is getting started. - Mark Twain

Yes, I had to share Mark Twain's quote because it is something we all need to remember when we are about to take up a new challenge.

Deciding to kickstart a career in tech is great, but putting in the necessary work to learn is even greater.

Think about it this way: you did your research about different roles in tech, you chose your preferred tech career path, and you found the right learning resources. But now you don't want to put in the work and learn? No!

You didn't spend all that time and effort to give up at the most important point.

You have to start learning.

Set up a schedule that works for you. For instance, learning for at least 30 minutes or 1 hour every day. If you have more time, then spend more time learning. Your growth will be tremendous.

Build projects

Once you have a good foundation of knowledge, start building basic projects.

Most people think they need to know everything about a particular programming language or tool before they start building a project. But most times, this only results in watching tutorials for months.

The truth is that building projects lets you improve your coding skills in ways you can't imagine. It also gives you something to show off in interviews when you are telling your interviewers about your tech skills.

Here's a list of beginner-friendly projects ideas:

Start writing

Most people think you have to be super smart to start writing and sharing knowledge. But I completely disagree. As much as we write to share knowledge, we also write to document what we've learned.

Our brains don't have the capacity to remember everything we've learned, so writing it down on your blog will serve as a reference point for you in the future. It can also help someone who is also trying to understand that concept you just learned.

In my case, I created my blog with Hashnode because it is super fast, has a strong community, and allows you to map the blog to your domain. I'd recommend you use the same platform for creating your first blog.

After you've gotten comfortable with writing, you can now submit your articles to freeCodeCamp's publication to reach a wider audience and give back to the tech community or republish your articles on DEV.

Writing is a great way to digest and process the information you take in. It gives you access to so many opportunities and can also help you make your mark in the tech ecosystem.

Writing changed my life, and I believe it will be of great help to you and your tech career. Start blogging now.

Stay consistent

This is the most important step in kick-starting a career in tech. It's highly unlikely you'll achieve great things if you're not consistently trying to improve on your chosen tech skill.

Consistency forms habits that become almost second nature. So if you code or design for at least 30 minutes every day for a month, you will become better and better.

It is not compulsory to stick with the 30 minutes scenario above -- just find out what works for you, and be very consistent. Only then will the sky be your limit.

Summary

Kickstarting a career in tech is definitely doable if you follow these steps. And I strongly encourage you to try, because of the diverse opportunities that come with it.

Anybody who is willing to learn can start a career in tech with or without any formal knowledge from school. Just go ahead and start.

Yes, it may not be really easy, but there are so many supportive tech communities willing to help you through.

I hope you learned a thing or two from this article. If you have any questions, feel free to send me a DM on Twitter and I'll be happy to answer every single one.

The Importance of Blogging as a Developer

Didicodes — Sun, 11 Apr 2021 16:44:43 +0000

Aside from being able to educate others, blogging is also a really great way to reinforce knowledge, build your brand, earn money, amongst other things.

Most developers shy away from blogging because they think they are not smart enough or they don't think it is important.

As someone who has been into tech blogging for quite some time, I will be sharing some reasons why blogging is important for developers. If you've ever wondered why developers should blog, then this article was written with you in mind. I do hope you learn a thing or two from it.

Now let's get right into it. 💃🏽

Give back to the community

When you started learning how to code, you most likely read a couple of tech articles to grasp that programming language. You know what? Let's scratch that. You still read tech articles now that you are no longer a code newbie.

If the assumption I made above is correct, that means you've benefited from at least 1 tech blogger in the developer community at some point in your career. So, why not write to help another developer too?

There's a high chance that this might not seem like an excellent reason for you to start blogging but try to imagine those articles that helped you out were not written by the authors and ask yourself if you would've been able to understand those tech concepts at the time.

Blogging gives you an opportunity to give back to the community, to help someone understand coding, and to inspire.

Improve your skill

Over the years, I have noticed that people think tech blogging is only about educating others. But that's not true. I believe blogging actually helps the author as much as it helps the reader.

Truth be told, most tech bloggers actually research the tech concepts days or weeks before writing an article about it on their blog. Because of this research carried out by tech bloggers, their knowledge about everything they write about keeps improving. For instance, if I write about ReactJS consistently for a year, I will be way better at ReactJS than I was the previous year when I didn't write anything about it.

So, what exactly am I saying?

Blogging helps to educate others, but it will help you learn about new things and improve your coding and communication skills.

Build your brand

At first, it may seem like nobody is watching or noticing your articles. But over time, people will get to know you for the type of tech articles you write. And that, my friend, is a good way to build your brand.

Blogging about a certain programming language or tech concept consecutively will make you known in that respective developer community. This can lead to recommendations, opportunities, job offers, and so much more.

When recruiters see your blog posts, it can also increase your chances of getting the job over others who don't write technical articles because it shows them you are really knowledgeable about the subject matter and you also have good communication skills. I mean, who doesn't love a developer with strong communication skills? 😉

Make money

Oh yes, you can make money from blogging. In fact, it is such a good way to make a passive income even while working as a full-time developer.

Listed below are some ways to make money while blogging as a developer;

Ads: Adding ads to your blog is one of the most popular ways to make money through tech blogging. But most developers don't like seeing a lot of ads when they are reading articles, so I will recommend using Carbon Ads because it centered around content for developers and designers, so developer may not leave your blog when they see these type of ads.
Web monetization: If you are not a fan of ads, you can integrate Web Monetization on your blog.
Paid community writing programs: There are tons of tech companies and communities that pay developers to write technical articles for them. Most of them pay between 100 to 2000 dollars. Here's a list of some paid community writing programs for developers.
Affiliate links: You can add affiliate links from various tech companies on your blog posts.
Community funding: Getting community funding is also another way to make money as a tech blogger. With a Patreon or Buy Me a Coffee account, various people in the developer community can support you financially monthly.

Conclusion

Blogging is a combination of sharing & gaining knowledge. It can help you achieve great things & get better as a developer.

My final words would be to remind you that tech bloggers have the great benefit of becoming lifelong learners because they need to be well-versed in the field they are writing to explain the concepts to readers clearly. So when you blog, you also help yourself too.

If you now see why you should start blogging and want to get started, I'd recommend using Hashnode because it can help you spin up a blog mapped to your custom domain in under 2 minutes. Aside from that, you'll also get readership from the dev community, own a newsletter service, an audio version of your articles, and more!

Having a blog mapped to your custom domain is very important for your personal brand and SEO.

Do you know of any other benefits of blogging as a developer? Please share it in the comment section below, and I'll reply to every comment.

Top 10 Virtual Confs Every DEV must attend in April 2021

Didicodes — Wed, 24 Mar 2021 11:36:39 +0000

As a developer, attending events or conferences can broaden your horizon, expand your network, strengthen your existing skillset, and more!

Different communities and companies host tech events every year to help developers become better in their respective fields. Due to this, finding the right event to attend can be a bit tasky.

To help you find the right event to attend in April, I compiled the top 10 developer-focused conferences/events happening in April 2021 for you. 👇🏽

1. React Summit

React Summit is the biggest React conference online! Each day will feature talks from different amazing speakers across the world. Besides the talks and hands-on React workshops, you can expect excellent MCs, virtual networking rooms focusing on tech topics, interactive entertainment, engaging challenges for all participants, and more! You don't want to miss this conference if you are a React developer.

2. Hashnode Bootcamp III

As a developer, building a personal brand can help you boost your career, access opportunities & more. This bootcamp aims to remove all the fuss around building a personal brand as a developer — from having a healthy open source profile to maintaining an influential developer blog, showing your work online, and more! Want to build or improve your personal brand? Register for this event.

3. Vue Conference

This year's VueJS Conference will be happening virtually because of the pandemic. But that doesn't mean it won't still be amazing! If you use VueJS or want to start using it, this conference should be a must-attend for you because the speakers are some of the best VueJS developers. Learn more and register.

4. DevTernity

DevTernity is one of the top 3 international software development conferences in Europe.

Unlike other conferences, DevTernity focuses on the core skills paramount to your success – coding, architecture, and leadership.

Attending this conference will give you an uncompetitive advantage as you start your journey towards becoming a Software Architect, Engineering Lead, or CTO. The tickets are very limited so grab one now!

5. Developer Week Europe - Online DevOps, Cloud, and API conference

This virtual event is set to be one of the biggest in Europe. It will cover talks ranging from DevOps, cloud, APIs, and more. The lineup of speakers is fantastic. PS: You don't have to be in Europe to attend this event because it is virtual. So, register, attend and thank me later. 😉

6. Strapi Conf

Strapi is the next-gen headless Open Source CMS enabling content-rich experiences to be created, managed, and exposed to any digital device. The team is hosting its first-ever conference this year in April. Do check it out if you are a Strapi.js developer or enthusiast.

7. Write the Docs Portland

Write the Docs brings everyone who writes the docs together in the same room: Programmers, Tech Writers, Support, Designers, Developer Advocates, and more. If you want to improve your writing skill or meet like-minded people who love good documentation, this conference is for you.

8. Serverless Architecture Conference

This conference will help you master Cloud-Native architectures, the Kubernetes Ecosystem, and Functions. The speakers, topics, and organizers are top-notch. The Serverless ecosystem keeps growing tremendously, and I think this is a great event for anyone interested in all things Serverless.

9. AzureLive

AzureLive is a brand new, single-day event that will feature some of the best speakers and content the Azure community has to offer. The speakers will speak on Architecture, DevOps, Governance, Security, Serverless, AKS, AI, and many more will be discussed on that day.

Besides technical talks, there will also be some IT Professional talks and Real-life Azure stories and examples.

10. JS Heroes

JS Heroes is an Open Source community event centered around front-end development. Love open source events? This is a great one to attend in April.

Thanks for reading up to this point. I hope you discovered an amazing event to attend in April. 😀

Open Source Contributions: A catalyst for growth.

Didicodes — Wed, 05 Feb 2020 09:53:50 +0000

Sometimes learning from other people’s experiences builds a certain level of certainty as to what we are doing right and what we may have done wrong. This is because it is very easy to learn from their experiences and build on them. In this article, I will use my personal experience (my Open Source story) to explain why I believe making open source contributions is a catalyst for growth and I hope it gives you the push to create your first pull request.

How did I get started?

Well, my first attempt to make an Open Source contribution was sometime in March 2018. At that time, I just found out about the Google Summer of Code (GSOC) program from Samson Goddy and I told myself, “oh well, I think it’s time to apply what I learned on Android development during my industrial training late 2017 at Start Innovation Hub to a real life project”. I went to the GSOC site and glanced through all the organizations and their respective projects and the Open Data Kit organization caught my attention.
To participate in the Google Summer of Code program, you have to be a student in the university and also make at least one contribution to the organization. I was already in the university, so all I had to do was to make at least one contribution to an organization before submitting my proposal. When I first joined the Open Data Kit slack channel, I was intimidated and overwhelmed but most open source organizations label issues on their repositories so it was easy to find the right issue to solve. As a beginner at the time, I jejely glanced through the beginner-friendly issues and decided to work on an issue titled Escape markdown characters using backslashes. This task entailed writing code to enable the ODK Collect app support escaping markdown characters using a backslash and this could be achieved using regular expressions (Regex).

My First Pull Request

Honestly, I never knew about regular expressions before I decided to work on that issue, I didn't even know it existed, which meant I had to do a lot of research. You probably won’t believe me if I told you it took over 3 weeks for the pull request to be merged because the mentor ensured that I understood what I was trying to do, the implications of making those changes and most importantly that the code I wrote adhered to the coding standards of the organization.

Working on the issue took me from not understanding anything about regex to getting my first pull request merged by the Open Data Kit open source organization and mehn, this was literally the best feeling. The thought that you’ve contributed to an application that is used by thousands of people across the world and that someone somewhere is currently benefiting from that feature you improved is so fulfilling. It was truly an overwhelming but interesting first Pull Request.

After I had successfully made a contribution to the organization, all I had to do was to submit a proposal describing the project I wanted to work on and why I felt I was the best candidate for the project; this was another good thing to learn because I had never written a proposal in my life. I eventually created a proposal and submitted it for review. Unfortunately, when the accepted candidates were announced, I wasn’t accepted.

This wasn’t a sad moment for me because I suspected that someone with more experience would be selected for the project but I was super grateful that I learned a lot about writing proposals, contributing to open source, writing a good commit message and raising a good pull request. So I saw it as a win-win situation.

My second Open Source project, well I thought it was…

After I graduated from school in August 2018, I decided to give Open Source contributions another try by applying for the Outreachy internship to an organization called Wikimedia and my role there was to improve the MediaWiki Action API and also write sample codes in Python which was a great opportunity to learn not just as a developer but as a technical writer. Making contributions to the Mediawiki organization was not as difficult as my first pull request because I had already submitted a pull request before. If you ask me, I think I was killing it during this application phase.
A few days to the deadline for submitting my proposal, I had to travel to Taraba state via Enugu for NYSC; however, I missed my bus that morning because I was trying to fix an issue with the pull request I submitted. When this happened, I told myself that I was definitely going to be accepted, afterall, I missed my bus because of it. But I wasn’t selected for the internship. This time around, I was deeply sad because I thought I did better than other applicants. The rejection broke me to the point were I said I wasn’t going to make open source contributions again.

Well, thinking about it now, I guess I should have started with unpaid Open Source contributions first to build myself instead of jumping directly into applying for paid Open Source internship opportunities.

My failed applications start to pay off

In January 2019, Outreachy announced that they were accepting proposals for the internship. Lo and behold, the same project I had applied for in the previous round in 2018 was among the projects and I felt I had a better chance of getting accepted since I had worked on this project before. As usual, I made contributions to the organization and submitted a proposal during the application phase. At this time, I was also looking for a company to serve during my NYSC in Lagos and I applied to a couple of companies and went to different interviews. One interesting thing I will love to point out in this article was my interview with a company called Interswitch. During the second phase of my interview with Interswitch, I met with the CIO and during our interaction, I spoke about my experience with making open source contributions and how I was currently writing sample codes and improving API documentation. The CIO asked me about the last time I made a contribution to the organization and luckily for me, I actually made a contribution to Mediawiki that morning before I went for the interview so with a smile on my face I told him “today”. He went further to ask which API I worked on and as I explained the workings of the API to him, I noticed he was impressed. It turned out that Interswitch was looking for someone with that skill at that time so there was a match. I got hired primarily because of my experience with writing sample codes, improving the API docs for the MediaWiki and of course, the ability to code.

Sadly, when the results for accepted interns were announced by Outreachy, I wasn't selected. It was a bittersweet experience because I had gained a lot of experience from making those contributions and also got accepted as a Software Engineer at an amazing company for my NYSC.

Finally the big W - Google Season of Docs

I refused to be fazed by the disappointments I had with my previous applications so I decided to give it a shot again, this time I applied for Google’s Season of Docs with the VideoLAN organization. The VideoLAN organization owns the VLC media player which has been downloaded over 3 billion times. When you think of the fact that there are over 7 billion people in the world right, it means that means almost half of the people in the entire world must have downloaded VLC into either their phones or desktop. Blown!

Again, I researched about the project, what it entailed, wrote a proposal and submitted it to Google and guess what? My proposal was accepted. I think I literally almost threw my laptop away when I got the email from Google. It was a surreal moment for me. I have literally been using the VLC media player since I was in secondary school and the fact that I was going to work for this organization was mind blowing.

TL;DR

Contributing to Open Source organizations opens you up to a lot of opportunities and connects you with people doing amazing things all over the world. Who would have thought that I would get an opportunity to work as a technical writer for an organization that I have been using their product since secondary school and get paid 3000$ to do it, or get to have meetings and conversations with the president of the VideoLAN organization or get to do my NYSC at Interswitch or even get to speak at events about the beauty of Open Source?

To sum it up, I successfully completed the Season of Docs program by Google in November and also got a full-time job as a Developer Relations at Interswitch in December and without any doubt in my heart, I can boldly say that OPEN SOURCE CONTRIBUTIONS strongly contributed to my growth as a Software Engineer and Technical Writer.

Yes, it is a catalyst for growth and you absolutely do not have to jump right into applying for paid remote open source internships like I did if you are not ready for that, you can start by submitting an issue, fixing an already existing issue, correcting a typo, making a pull request to an organization, creating an Open Source project, joining the Open Source Community in Africa, attending the Open Source Festival and so much more. Trust me, the things you will learn in a short time would amaze you.

This article was inspired by my talk at the Hacktoberfest hackathon in Kampala last year and my colleague Damola Adekoya who told me it would be great to write an article about my open source journey.

Happy to answer any and all questions regarding Open Source contributions, feel free to send me a DM me on Twitter.