DEV Community: Seun Taiwo

Connect Four: Into the Emailverse

Seun Taiwo — Tue, 03 Jun 2025 23:53:32 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

Intro

Welcome to the Emailverse 📬✨
A universe where the only form of internet communication is - you guessed it - email.

Craving a slice of pizza? 🍕 Send an email.
Need a ride downtown? 🚗 Email.
Want to tell your bestie you just landed that dream job? 🎉 Email.
Feeling the itch to crush your bosom buddy in a fierce game of Connect Four just so you can brag for all eternity? 🟡🔴 Yup… email.

Because in this world, if it’s not in your inbox, it doesn’t exist. 📥🔥

What I Built

So, I built the classic Connect Four game—but with a twist: it lives entirely in the Emailverse 📧.

You and a friend (or a worthy office rival) take turns dropping discs 🎯 into a 7×6 grid, all through email. The rules? Simple: be the first to line up four of your discs - horizontally, vertically, or diagonally - and bask in eternal emailverse glory🏆.

Whether you're unwinding after a long day 😌 or spicing up your work chats with a little friendly competition 💼⚔️, Email Connect Four has your back... one move at a time.

Demo

You can watch a video of how the game works here.

If you wanna test it out yourself, click here to start a game and continue by sending responses to the emails.

Code Repository

Connect Four Backend: Repository Link
Connect Four Frontend: Repository Link

How I Built It

At first, I thought building this was going to be pretty straightforward. Then I got into it and started seeing potential issues I had to fix but it was really fun to build. The user flow goes like this:

Any of the players go to the website to start the game. Clicking the start game button sends an API request to the backend to create a new game for the users.
The backend which was built using Express and MongoDB as the database stores every game. Each game entity comprises of the email of the two players, the player that is supposed to make the next move, and the game state i.e the board that is shown in the emails.
When the game is created, the first player gets an email inviting them to make their move. When they respond, Postmark's inbound email parsing swoops in to make the parsing process very easy. I used the StrippedTextReply field to get the command the user sent. In cases where their response can't be determined, I send an email to them to send a valid response.
Upon parsing their command, I update the game state and send another mail to the other player inviting them to make their next move. If a user wins or the game is drawn, I also send mails to both players and prompt them to head to the website to start a new game.

Problems I Had To Solve

Generating the board to show users in their emails seemed tedious at first but I ended up using puppeteer. I basically draw up the board template in the puppeteer browser, update the required cells with colors depending on the game state and take a screenshot. Deploying a server that uses puppeteer also proved diffifult initially but I ended up dockerizing the application and using DigitalOcean App Platform which works seamlessly for this use case.
When game emails are sent to gmail accounts for the first time, the Gmail client does not show the proper name for the Sender, instead it just shows the email address of the sender. Whenever this happens, if the user clicks the reply button in the Gmail client, the "To" field will be prepopulated as the "From" field instead of the "ReplyTo" field. To go around this, I had to add a note in the emails that users ensured their responses were being sent to the correct email address. Given that Postmark's default mailbox for Inbound Email was rather long and not user-friendly, I set up Email Forwarding easily using the Postmark Documentation.
This is a rather small bug I noticed on the Postmark Dashboard where the webhook URL for the Inbound Email will retain an older value even after I typed in a new value and saved. A quick refresh of the page fixes this issue though so it wasn't a big deal.

Big ups to the DEV.to and Postmark for setting up this hackathon. I really had fun working on this. If you have any feedback or just wanna talk, you can reach me on any of the social media accounts in my profile❤️.

Building A TodoList with Svelte & Firebase

Seun Taiwo — Fri, 07 Jul 2023 08:25:34 +0000

Svelte is the shiny new framework for frontend developers. It seems to do a whole lot differently than the big three frameworks. We'll be taking a deep dive into it in this article.

Prerequisites
Introduction
Setting Up Firebase
Building the Frontend with Svelte
Conclusion

Prerequisites

A proper grasp of Javascript and its ecosystem
Node v14 or higher
A Node Package Manaager (npm or yarn)

Introduction

Svelte is a new Javascript Framework (actually a compiler) created by Rich Harris. It has brought about a radical change in how to go about editing the DOM(Document Object Module).

Svelte runs at build time and spits out imperative code that updates the DOM. This eliminates the need for a Virtual DOM used in other frameworks. It also has features like 'scoped styling' and 'reactive assignment'. Furthermore, Svelte also has 'stores' to help to store state.

Setting Up Firebase

Creating the project

If you don't have a Google Account, you can go ahead to create one and sign in.
Head over to the Firebase homepage and click the 'Go To Console' button

On the console, create a new project by clicking the '+' icon and give it whatever name you desire.

I'll call mine 'svelte-todo' and uncheck Google Analytics as we won't be needing it.

Setting up Google OAuth

We have to create an app for the platform we're building. Click on the web icon.

After registering the app with your nickname of choice, you'd see this:

Copy the firebaseConfig object as we'll be using it later. DO NOT attempt to use the variables in the picture as they would have been deleted.

Back on the console, Click on Authentication in the sidebar

Click on 'Get Started' and select Google as your auth provider.

Enable the provider, choose your support email and click 'Save'.

Setting up Firestore

To set up Firestore, head back to the console homepage and click on 'Cloud Firestore'

Click on 'Create Database', set it to 'Test Mode' and leave the location as is.

At this point, Firestore should have been enabled for your project. You can add collections or documents from here to play around with it.

Building the frontend with Svelte

To create a Svelte project, run



npx degit sveltejs/template [PROJECT-NAME]

then run



cd [PROJECT-NAME]

to enter into that directory.

This creates a basic Svelte project for us from this template. We still have to install the packages that come with the template though. We can use either yarn or npm for this but I'll use yarn.

Run



yarn

to install packages, then run



yarn dev

to start the server.

Head to the URL specified on 'Local' and you'd see your Svelte application running.

Enabling SCSS in the project

To do this, we have to install some new packages to help us parse SCSS. Run



yarn add -D node-sass svelte-preprocess

Edit the rollup.config.js file in the root of the directory to look like so:



import svelte from "rollup-plugin-svelte";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import css from "rollup-plugin-css-only";

//NEW LINE HERE
import preprocess from "svelte-preprocess";

const production = !process.env.ROLLUP_WATCH;

//CODE OMITTED FOR BREVITY

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    svelte({
      //NEW LINE HERE
      preprocess: preprocess(),
      compilerOptions: {
        dev: !production,
      },
    }),
    css({ output: "bundle.css" }),

    //CODE OMITTED FOR BREVITY

To test if SCSS works, go into the App.svelte file and paste the below:



<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

<style lang="scss">
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
    h1 {
      color: #1900ff;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
    }
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

I'm sure you're already wondering how this file works. Well, Svelte expects each component to have three sections:

The Script: It is represented by the <script></script> tag and contains most javascript related functionalities.
The Component Body: This is the main part of our component. It includes the HTML and dictates what is to be displayed.
The Component Styles: It is represented by the <style></style> tag and contains our styling code which is scoped to this component only. In our case, we're using SCSS so we set the lang attribute on the style tag to scss.

Our component is to accept a prop called name from its parent. export let name achieves this functionality for us. We can accept as many props as we want.

In the component body, we can display any of the variables in our script by wrapping them in curly braces.

Now that we understand the component, you can start the server again by running



yarn dev

and you should see this:

Enabling Routing with page.js

Since we're building an app that has users, we'll need a page to log in and another to add/view your todos. In the src folder, create a folder pages and add home.svelte and login.svelte into it.
The folder structure should look like this:

We're going to use a package called page. Run



yarn add page

to install it and open package.json when it's done installing. Change the start script to



"start": "sirv public --single"

Finally, go into the App.svelte file and paste the below.



<script>
  import router from "page";
  import Home from "./pages/home.svelte";
  import Login from "./pages/login.svelte";

  let page;

  router("/", () => page = Home);

  router("/login", () => page = Login);

  router.start();
</script>

<svelte:component this={page} />

We're importing the router, adding our different routes and starting the router. Our pages are empty but before adding their content, we need to set up our store. In the src folder, create a stores.jsfile and paste the following into it:



import { writable } from "svelte/store";

export const TodoStore = writable([]);

export const UserStore = writable(null);

writable helps us create a store that we can edit down the line. We then create 2 new stores, a TodoStore and a UserStore to hold the list of todos and the user's details respectively. All writable stores have 2 main methods:

Set: To set the value of the store.
Update: To update the value of the store based on a callback function.

Open the login.svelte file and paste:



<script>
  import { UserStore } from "./../stores";
  import page from "page";

  $: if ($UserStore) page.redirect("/");
</script>

<div class="login container">
  <button>Log In</button>;
</div>

<style lang="scss">
  div.login.container {
    background: hsla(238, 100%, 71%, 1);

    background: linear-gradient(
      135deg,
      hsla(238, 100%, 71%, 1) 0%,
      hsla(295, 100%, 84%, 1) 100%
    );

    background: -moz-linear-gradient(
      135deg,
      hsla(238, 100%, 71%, 1) 0%,
      hsla(295, 100%, 84%, 1) 100%
    );

    background: -webkit-linear-gradient(
      135deg,
      hsla(238, 100%, 71%, 1) 0%,
      hsla(295, 100%, 84%, 1) 100%
    );
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    button {
      background-color: hsla(350, 100%, 69%, 1);
      height: 200px;
      width: 200px;
      box-shadow: -10px -10px 15px rgb(255, 119, 142),
        10px 10px 15px rgb(231, 88, 112);
      border: none;
      border-radius: 50%;
      border: 8px solid hsla(350, 100%, 69%, 1);
      font-weight: bold;
      color: white;
      font-size: 2rem;
      &:focus {
        box-shadow: -10px -10px 15px rgb(255, 119, 142),
          10px 10px 15px rgb(231, 88, 112),
          inset -10px -10px 15px rgb(255, 119, 142),
          inset 10px 10px 15px rgb(231, 88, 112);
      }
    }
  }
</style>

Here, we're displaying a large centered button, that will log the user in when clicked. The $UserStore is used to access the value inside of the store.

In Svelte, statements written after $: like so $: if ($UserStore) page.redirect("/") are called Reactive Statements. They are run before a component updates if the values they depend on have changed. The $ in $UserStore and Reactive Statements do not have the same function.

The reactive statement in our component checks if the $UserStore has a value i.e if we have a user currently logged in and redirects to the homepage if it does.

Paste this in the home.svelte file:



<script>
  import EditTodo from "../components/edit-todo.svelte";
  import ViewTodos from "../components/view-todos.svelte";
  import Header from "./../components/header.svelte";
  import { UserStore } from "./../stores";
  import page from "page";

  $: if (!$UserStore) page.redirect("/login");
</script>

<section class="home">
  <div class="wrapper">
    <Header />
    <EditTodo />
    <ViewTodos />
  </div>
</section>

<style>
  section.home {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.wrapper {
    width: 100%;
    max-width: 800px;
  }
</style>

This component is fairly short as it's purpose is to house all our other components. It also has a reactive statement that works like the one in the login component. We simply check if there's no user currently logged in, and redirect to the login page if it holds true.

The components imported in the home page have not yet been built so let's go ahead and build them. Create a components folder in the src folder and add edit-todo.svelte, header.svelte, and view-todos.svelte into it.

Open the edit-todo.svelte file and paste this too:



<script>
    let name = "";
    let priority = "1";

    const submitTodo = () => {
      const newTodo = {
        priority,
        name,
        completed: false,
      };
      console.log('Submit Todo', newTodo)
    };
  </script>

  <form>
    <header>Add New Todo</header>

    <label for="name">
      Todo Name
      <input bind:value={name} id="name" type="text" />
    </label>

    <label for="priority">
      Todo Priority
      <input
        bind:value={priority}
        id="priority"
        min="1"
        step="1"
        max="5"
        type="range"
      />
    </label>

    <button on:click|preventDefault={submitTodo}>Add Todo</button>
  </form>

  <style lang="scss">
    form {
      background: #fff;
      border-bottom-left-radius: 2rem;
      border-bottom-right-radius: 2rem;
      padding: 2rem 4rem;
      header {
        font-size: 2rem;
        text-align: center;
        font-weight: bold;
        margin-bottom: 1rem;
      }
      label {
        font-size: 1.4rem;
        margin-bottom: 1rem;
        display: block;
        input {
          display: block;
          width: 100%;
          margin-top: 0.5rem;
          border-radius: 1rem;
        }
        &:nth-child(2) {
          input {
            padding: 0.5rem;
          }
        }
      }
      button {
        padding: 1rem;
        border: none;
        background: #f2f9ff;
        font-size: 1.4rem;
        border-radius: 5px;
        margin-top: 1rem;
        border: solid 1px #ccc;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  </style>

In this component, we display a form that enables users to create todos by entering the name of the todo and its priority. You'll notice bind:value in both inputs. It is called a directive and it attaches the current value of that input to the variable specified.

The button in the form has a property on:click|preventDefault. This is also a directive but it has a modifier as well. Modifiers simply customize the directive we're currently using. on:click is a directive that helps us attach our click event handler to the button. The | is used to add modifiers and the preventDefault modifier calls the event.preventDefault() method for us before calling the event handler.

The submitTodo function currently logs out the todo we have created. We'll connect it to Firestore soon.

Open the header.svelte file and paste:



<script>
  import { UserStore } from "./../stores";
</script>

<header>
  {#if $UserStore}
    <img src={$UserStore.photoURL} alt="User" />
    <p>Welcome, {$UserStore.displayName.split(" ")[0]}</p>
  {/if}
  <button> Log Out </button>
</header>

<style lang="scss">
  header {
    width: 100%;
    background-color: lightsteelblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    & > img {
      height: 6rem;
      width: 6rem;
      border-radius: 50%;
    }
    & > p {
      font-size: 2rem;
      text-align: center;
    }
    & > button {
      font-size: 1.5rem;
      border: none;
      padding: 1rem;
      background-color: rgba(255, 0, 0, 0.5);
      color: white;
      border-radius: 0.5rem;
    }
  }
</style>

The header component simply shows the name and image of the current user as well as the log out button.

Lastly, we have the view-todos component that displays all the todos. Open the file and paste the following:



<script>
  import TodoItem from "./todo-item.svelte";
  import { TodoStore } from "./../stores";
  let activeTab = "incomplete";

  $: incompleteTodos = $TodoStore
    .filter((todo) => !todo.completed)
    .sort((todoA, todoB) => todoB.priority - todoA.priority);
  $: completeTodos = $TodoStore.filter((todo) => todo.completed);
</script>

<main>
  <header>
    <button
      on:click={() => (activeTab = "incomplete")}
      class:active={activeTab === "incomplete"}
      >Current Todos ({incompleteTodos.length})</button
    >
    <button
      on:click={() => (activeTab = "complete")}
      class:active={activeTab === "complete"}
      >Completed Todos ({completeTodos.length})</button
    >
  </header>
  <div class="todos">
    {#if activeTab === "incomplete"}
      {#each incompleteTodos as todo (todo.id)}
        <TodoItem {todo} />
      {/each}
    {:else}
      {#each completeTodos as todo (todo.id)}
        <TodoItem {todo} />
      {/each}
    {/if}
  </div>
</main>

<style lang="scss">
  main {
    header {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
      button {
        background: none;
        border: none;
        font-size: 1.4rem;
        padding-bottom: 0.5rem;
        &.active {
          border-bottom: solid 1px #333;
        }
      }
    }
    .todos {
      padding: 1rem 2rem;
    }
  }
</style>

The two reactive statements in this component help us generate arrays for the 'completed' and 'incompleted' todos. We sort the 'incompleted' todos based on priority but leave the 'completed' as is. We then keep track of the current tab we're on and display the right todos based on that.

We do this with the {#if CONDITION} which displays a component depending on the condition. We also use {#each ARRAY as ARRAY_ITEM (ITEM_ID)} to help us display a component for each item in an array. Both of them have to be closed though with matching {/if} and {/each} respectively. We come across another directive, class:active which adds a class to the element depending on the condition.

We imported one more component, TodoItem.
Create a new file in the components folder called todo-item.svelte and paste the following into the file:



<script>
  export let todo = null;
  import TickIcon from "./../assets/tick.svg";
  import CancelIcon from "./../assets/cancel.svg";
  import StarIcon from "./../assets/star.svg";

  $: ratings = new Array(todo.priority);
</script>

<div class="todo">
  <button>
    {#if todo.completed}
      <CancelIcon width="100%" fill="#fff" />
    {:else}
      <TickIcon width="100%" fill="#fff" />
    {/if}
  </button>
  <div class="info">
    <p class:cancel={todo.completed}>{todo.name}</p>
    <div class="stars">
      {#each ratings as _}
        <StarIcon width="20px" />
      {/each}
    </div>
  </div>
</div>

<style lang="scss">
  .todo {
    display: flex;
    align-items: center;
    width: 100%;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    button {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      padding: 1rem;
      border: none;
      background: #1890ff;
      margin-right: 1rem;
    }
    .info {
      p {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
        &.cancel {
          text-decoration: line-through;
        }
      }
    }
  }
</style>

This component takes a todo as a prop and renders its name as well as stars to represent its priority. It also has a button that marks its complete or incomplete state.

There's just one issue, Svelte cannot import .svg files by itself. We need to add packages to help us do that. Run



yarn add -D rollup-plugin-svelte-svg

and replace the rollup.config.js file with this:



//CODE OMITTED FOR BREVITY
import css from "rollup-plugin-css-only";

//NEW LINE HERE
import { svelteSVG } from "rollup-plugin-svelte-svg";


//CODE OMITTED FOR BREVITY
  plugins: [
    //NEW LINE HERE
    svelteSVG({
      svgo: {},
    }),
    svelte({
      preprocess: preprocess(),
      compilerOptions: {
        dev: !production,
      },
    }),
//CODE OMITTED FOR BREVITY

Running



  yarn dev

would still throw an error as we currently have no assets to import.

Create a folder named assets in the src directory and paste these three files:

cancel.svg



  <?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M4,29a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l24-24a1,1,0,1,1,1.42,1.42l-24,24A1,1,0,0,1,4,29Z"/><path d="M28,29a1,1,0,0,1-.71-.29l-24-24A1,1,0,0,1,4.71,3.29l24,24a1,1,0,0,1,0,1.42A1,1,0,0,1,28,29Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>

star.svg



  <?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 47.94 47.94" version="1.1" viewBox="0 0 47.94 47.94" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m26.285 2.486 5.407 10.956c0.376 0.762 1.103 1.29 1.944 1.412l12.091 1.757c2.118 0.308 2.963 2.91 1.431 4.403l-8.749 8.528c-0.608 0.593-0.886 1.448-0.742 2.285l2.065 12.042c0.362 2.109-1.852 3.717-3.746 2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403 0l-10.814 5.685c-1.894 0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528c-1.532-1.494-0.687-4.096 1.431-4.403l12.091-1.757c0.841-0.122 1.568-0.65 1.944-1.412l5.407-10.956c0.946-1.919 3.682-1.919 4.629 0z" fill="#ED8A19"/></svg>

tick.svg



  <?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 50" xml:space="preserve" fill='#fff' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_1_"><polygon points="47.293,6.94 14,40.232 2.707,28.94 1.293,30.353 14,43.06 48.707,8.353  "/></g></svg>

We should be error-free now but on running it, the styling might look a bit off. Replace the global.css file in the public/build directory with:



html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #333;
  margin: 0;
  box-sizing: border-box;
  font-family: Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a,
button {
  cursor: pointer;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
}

Let's test out our current setup before hooking up Firebase. Head back to the stores.js file so we can add some initial data.



import { writable } from "svelte/store";

export const TodoStore = writable([
  {
    completed: false,
    id: 0,
    name: "Read my books",
    priority: 3,
    user: "IBle5KaZruTFAobDKLIqpOksKZ23",
  },
  {
    completed: false,
    id: 1,
    name: "Cut my hair",
    priority: 2,
    user: "IBle5KaZruTFAobDKLIqpOksKZ23",
  },
  {
    completed: true,
    id: 2,
    name: "Write the article",
    priority: 3,
    user: "IBle5KaZruTFAobDKLIqpOksKZ23",
  },
]);

export const UserStore = writable({
  displayName: "Seun Taiwo",
  email: "lorddro1532@gmail.com",
  phoneNumber: null,
  photoURL:
    "https://lh3.googleusercontent.com/a-/AOh14GjhCUWFu5BpCrEK3t2TWml7mvmhTGBM5ROPf7NTWA=s96-c",
  uid: "IBle5KaZruTFAobDKLIqpOksKZ23",
});

Now, we should get something like this:

Connecting the frontend with Firebase

We need to add our Firebase Configuration variables to the project. Recall we got them earlier from the Firebase Console. We can't add the variables into the project though because they're to be kept secret. We use environmental variables instead to keep them. Create a file in the root of the project, name it .env and add it to your .gitignore file.

Put your configuration variables into this file like so:



FIREBASE_API_KEY="YOUR_API_KEY"
FIREBASE_AUTH_DOMAIN='YOUR_AUTH_DOMAIN'
PROJECT_ID='YOUR_PROJECT_ID'
STORAGE_BUCKET='YOUR_STORAGE_BUCKET'
MESSAGING_SENDER_ID='YOUR_MESSAGING_SENDER_ID'
APP_ID='YOUR_APP_ID'

In the src folder, add a folder named services and add a file named firebase.js into it. Paste this into the file.



import { initializeApp } from "firebase/app";
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
} from "firebase/auth";
import {
  getFirestore,
  collection,
  addDoc,
  getDocs,
  doc,
  updateDoc,
  query,
  where,
} from "firebase/firestore";
import { TodoStore } from "./../stores";

let env = env_var;
env = env.env;

const firebaseConfig = {
  apiKey: env.FIREBASE_API_KEY,
  authDomain: env.FIREBASE_AUTH_DOMAIN,
  projectId: env.PROJECT_ID,
  storageBucket: env.STORAGE_BUCKET,
  messagingSenderId: env.MESSAGING_SENDER_ID,
  appId: env.APP_ID,
};

initializeApp(firebaseConfig);

export const provider = new GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

const auth = getAuth();
export const signInWithGoogle = () => signInWithPopup(auth, provider);
export const logOut = () => signOut(auth);

export const db = getFirestore();

export const addTodo = async (todo, uid) => {
  try {
    let newTodo = {
      ...todo,
      user: uid,
    };
    const { id } = await addDoc(collection(db, "todos"), newTodo);
    newTodo.id = id;
    TodoStore.update((current) => [newTodo, ...current]);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
};

export const getTodos = async (uid) => {
  if (!uid) return;
  const q = query(collection(db, "todos"), where("user", "==", uid));
  const querySnapshot = await getDocs(q);
  const docs = [];
  querySnapshot.forEach((doc) =>
    docs.push({
      id: doc.id,
      ...doc.data(),
    })
  );
  TodoStore.set(docs);
};

export const markTodo = async (completed, id) => {
  await updateDoc(doc(db, "todos", id), {
    completed,
  });
  TodoStore.update((current) => {
    let todoIdx = current.findIndex((todo) => todo.id === id);
    current[todoIdx].completed = completed;
    return [...current];
  });
};

We do 2 important things in this file:

We initialize Firebase with our configuration variables.
We export all the utility functions we'll be using in the components.

The signInWithGoogle and logOut function do exactly what their names imply.
The addTodo function stores the todo it receives as an argument to Firestore and adds it to our local store as well.
The markTodo function updates the completed state of a todo locally and on Firestore.
The getTodos function is called to fetch all the todos from Firestore and save it in our TodoStore

We have to add our environmental variables into the project so we can access it. Install the packages that enable us do that by running



yarn add -D @rollup/plugin-replace & yarn add dotenv

We also need access to the Firebase SDK. Install that by running



yarn add firebase

Then update your rollup.config.js to:



//CODE OMITTED FOR BREVITY
import { svelteSVG } from "rollup-plugin-svelte-svg";
//NEW LINE HERE
import replace from "@rollup/plugin-replace";
import { config } from "dotenv";

//CODE OMITTED FOR BREVITY

  plugins: [
    //NEW LINE HERE
    replace({
      env_var: JSON.stringify({
        env: {
          isProd: production,
          ...config().parsed,
        },
      }),
    }),
    svelteSVG({
      svgo: {},
    }),

//CODE OMITTED FOR BREVITY

Firebase should be set up properly by now. We just have to add Firebase functionalities into the components.

login.svelte



  <script>
    import { signInWithGoogle } from "./../services/firebase";
    import { UserStore } from "./../stores";
    import page from "page";

    $: if ($UserStore) page.redirect("/");
  </script>

  <div class="login container">
    <button on:click={signInWithGoogle}>Log In</button>;
  </div>

With this, we can now sign into the app with our Google Account.

todo-item.svelte



    <script>
      export let todo = null;
      import TickIcon from "./../assets/tick.svg";
      import CancelIcon from "./../assets/cancel.svg";
      import StarIcon from "./../assets/star.svg";
      import { markTodo } from "./../services/firebase";

      $: ratings = new Array(todo.priority);
    </script>

    <div class="todo">
      <button on:click={() => markTodo(!todo.completed, todo.id)}>
        {#if todo.completed}
          <CancelIcon width="100%" fill="#fff" />
        {:else}
          <TickIcon width="100%" fill="#fff" />
        {/if}
      </button>
      <div class="info">
        <p class:cancel={todo.completed}>{todo.name}</p>
        <div class="stars">
          {#each ratings as _}
            <StarIcon width="20px" />
          {/each}
        </div>
      </div>
    </div>

We've updated the button to call the markTodo function and pass the right arguments.

header.svelte



  <script>
    import { logOut } from "./../services/firebase";
    import { UserStore } from "./../stores";
  </script>

  <header>
    {#if $UserStore}
      <img src={$UserStore.photoURL} alt="User" />
      <p>Welcome, {$UserStore.displayName.split(" ")[0]}</p>
    {/if}
    <button on:click={logOut}> Log Out </button>
  </header>

The 'Log Out' button can now log users out.

edit-todo.svelte



    <script>
      import { UserStore } from "./../stores";
      import { addTodo } from "./../services/firebase";

      let name = "";
      let priority = "1";

      const submitTodo = () => {
        const newTodo = {
          priority,
          name,
          completed: false,
        };
        name = ''
        priority = '1'
        addTodo(newTodo, $UserStore.uid);
      };

    </script>

    <form>
      <header>Add New Todo</header>

      <label for="name">
        Todo Name
        <input bind:value={name} id="name" type="text" />
      </label>

      <label for="priority">
        Todo Priority
        <input
          bind:value={priority}
          id="priority"
          min="1"
          step="1"
          max="5"
          type="range"
        />
      </label>

      <button on:click|preventDefault={submitTodo}>Add Todo</button>
    </form>

This updates the button so it can call the addTodo function now.

App.svelte



    <script>
      import router from "page";
      import Home from "./pages/home.svelte";
      import Login from "./pages/login.svelte";
      import { getAuth, onAuthStateChanged } from "firebase/auth";
      import { UserStore } from "./stores";
      import { onMount } from "svelte";
      import { getTodos } from "./services/firebase";

      const auth = getAuth();
      onMount(async () => {
        onAuthStateChanged(auth, async (user) => {
          if (user) {
            UserStore.set(user);
            getTodos(user.uid);
          } else {
            UserStore.set(user);
            getTodos(user.uid);
            console.log("User signed out");
          }
        });
      });

      let page;

      router("/", (ctx, next) => (page = Home));

      router("/login", (ctx, next) => (page = Login));

      router.start();
    </script>

    <svelte:component this={page} />

We call the onMount function to help us run a function after a component has been mounted. The onAuthStateChanged function calls its callback whenever the user state changes. We then update the UserStore based on the value we receive.

Clear the stores in the stores.js file so Firebase can take over and !Voila! we're done.

Conclusion

In this article, we created a Todo List using Svelte and Firebase. We went through some of the basics of Svelte and how to integrate it with Firebase. You can view the completed project here and the code here. To ensure you've fully grasped the concepts covered in this tutorial, try adding your own features to the app like making the todos editable, or deletable.
Thanks for reading the article ❤. Till we meet again, I remain @the_dro
_.

GraphQL in React

Seun Taiwo — Thu, 04 Nov 2021 09:35:24 +0000

Hello guys👋🏼, today we'd be talking about graphQL and how it works with React. We'd also be looking at a popular library called Apollo that helps handle GraphQL requests in most frontend frameworks including React.

What is GraphQL
REST vs GraphQL
Making Requests to REST & GraphQL APIs
Making GraphQL requests with Apollo
Should you use GraphQL?

What is GraphQL

GraphQL (publicly released in 2015) is a query language for APIs and server-side runtime for fulfilling those queries with your existing data (as stated on the GraphQL documentation). Simply put, GraphQL is a way of interacting with your APIs that involves using a query language to send requests and the server sending responses based on the query. This query can also be in form of a mutation in cases where we want to edit or update a particular document. GraphQL works with schemas which are simply rules that dictate the type of data we can query or mutate and the queries or mutations that can be performed on them.

REST vs GraphQL

REST (Representational State Transfer) was the de-facto standard (some would argue it still is) for building APIs as it enabled a whole lot of simplicity while using APIs as compared to its predecessors (SOAP and CORBA). With REST:

Every request is handled independently, therefore, a request must be accompanied with every bit of information needed for the server to successfully process it.
REST also brought about the use of HTTP verbs: GET, POST, PUT, PATCH, DELETE, OPTIONS, etc

Seems like REST has done a lot of good already, then why, why would we want to leave our good ol' REST for this new (REST was popularised in 2000) tool?

Well, as good as our RESTful APIs are, they have some drawbacks:

Statelessness

This actually seems to fall on both sides of the spectrum as it can be advantageous too. The fact that we don't handle state on the server makes our server lightweight and reduces its complexity but this state management is then pushed to the frontend thereby increasing its complexity.

Security

SOAP APIs are more secure as opposed to REST APIs as they undergo more stringent security protocols but evidently require more management.

Overfetching / Underfetching Data

Say we had an ecommerce app and we're trying to get the reviews of a particular user's product. We'd probably have a route to get the list of users and we could make this route return all products of a particular user as well as the reviews of each product. Whenever we need the names of users only, we will be overfetching data because we'd be getting the products and their reviews.

On the other hand, we could break it down by having a route to get all users, another route to get the list of products owned by a user and one more route to get the reviews of that product. This would be underfetching because we had to make 3 requests to get our desired response.

Lastly, we could have two getUsers routes with one responding with the list of users only and the other responding with the products and reviews too. Unfortunately, this would break our DRY (Don't Repeat Yourself) rule and might increase the complexity of our server.

GraphQL helps us solve this last issue effortlessly through the use of its query language because we're specifying exactly what we want from the server on every request. REST and GraphQL can be used together on one server but that will also cause an increase in complexity.

Making Requests to REST & GraphQL APIs

Sending requests to both APIs are similar in the sense that they use JSON to send and receive data.

axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  // data: {
  //   firstName: 'Finn',
  //   lastName: 'Williams'
  // }
}).then((resp) => {
  console.log(resp.data);
});

The code above is the typical way to send requests to a REST API using the axios package. The method stands for the HTTP verb, and data, the request body we want to send along with the request.

With GraphQL, all requests are POST requests going to a particular route usually /graphql and the code snippet is like so:

const body = {
  query: `query GetProductById($id: String){
     getProductById(id: $id){
       name
       price
       imageUrl
 }
}`,
  variables: {
     id: productId
   }
}

axios({
  method: 'post',
  url: 'https://www.mygraphqlserver.com/graphql,
  data: body
}).then((resp) => {
  console.log(resp.data);
});

We write our query (or mutation) in template literals, and our variables in an object. variables are simply values in our code we want to pass into our query. The keys query and variables of our body object must be named like that for our graphQL request to be successful.

Making GraphQL Request with Apollo

Apollo is a library that can be used on the client to communicate with GraphQL servers, serve as a state management library on the client and can also be used to set up a GraphQL server on the backend. When using Apollo on the client (and utilizing it's state management feature) , it sort of combines our GraphQL server schema with the schema we provide it on the client side (the client side schema represents our client side state). When making requests, we then specify in our query if Apollo should check on the client or on the server. We won't be using the state management features of Apollo in this tutorial though.

To get started, create a React App by running
yarn create react-app apollo-app
then install Apollo and GraphQL by running yarn apollo/client graphql.

Head to the index.js file and paste the code below:

import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'

import App from "./App";

const cache = new InMemoryCache()
const client = new ApolloClient({
  uri: 'https://mygraphqlserver.com',
  cache
})

ReactDOM.render(<ApolloProvider client={client}>
  <App />
</ApolloProvider>, document.getElementById("root"));

We simply created the client passing in the URL of our GraphQL server and cache. The client object is then passed as a prop to the ApolloProvider. This enables us make GraphQL requests in our components with Apollo.

Then in the component where the request is to be made, App.js in this case:

import React from "react";
import { useQuery, gql } from '@apollo/client'
import "./style.css";

const GET_COLLECTIONS = gql`
query GetProductById($id: String){
     getProductById(id: $id){
       name
       price
       imageUrl
 }
}`

export default function App() {
  const {loading, error, data} = useQuery(GET_COLLECTIONS,{
id: productId //Where id is the product id
})
  console.log(error,data)
  if(loading) return <h1>Loading...</h1>
  if(error) return <h1>An Error Occurred </h1>
  return (
    <div>
      <h1>Hello StaBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

In the component, we first import useQuery and gql. useQuery helps us to actually make the request while gql helps us create the query (or mutation). You pass the query as the first argument to the useQuery function. In cases where you have variables (like we do), you pass them in an object as the second argument to the useQuery function.

Should you use GraphQL

Well, like most things in software engineering, It depends. GraphQL has grown in popularity since its release mainly due to the problem it solves and probably because it's backed by Meta (Facebook). It has garnered a lot more users and seems to have become a serious opponent but REST is still being used by most companies. My advice will be to play around with GraphQL on side projects cause what do you lose from learning something new 😏🤷🏽‍♂️.

Feel free to comment what you think about GraphQL overtaking REST and any other thing you think I missed in the article.
Thanks for reading the article ❤. Till we meet again, I remain @the_dro
_.

Building A URL Shortener using Appwrite and Express

Seun Taiwo — Tue, 26 Oct 2021 16:51:08 +0000

What is Appwrite?

Appwrite is a self-hosted backend solution that enables developers get up and running with most of their backend needs in any project. Appwrite grants access to features like:

Storage (Media files)
Database (Documents)
Authentication (Manage Users)
Cloud Functions and more

and you can access these from REST APIs.

We're going to be building a URL Shortener with Appwrite in this article.

Prerequisites

Docker
Node
Yarn (or npm but we'll be using Yarn)
Working knowledge of Express

Setting up Appwrite

Head over to the Appwrite homepage and click on Get Started.

Copy the corresponding terminal command for your computer, ensure Docker is up and running, then run the command. Wait a while for the installation to be completed and you should see this.

Set the HTTP PORT to 3000 and leave all other values as their default. Head to the browser and visit localhost:3000

You should be on the Signup page. If not, head here

After creating an account, create a new project assigning it the name url-short.

For this project, we're only using the Database feature but we need our API Key first. Click API Keys and Add a new key

Click Select All to enable all permissions and give it a name of 'admin'. Create it and click Show Secret to view your secret. Copy it somewhere as we'll be needing it later.

Lastly, from the homepage, Click Settings and copy your Project ID as well as your API Endpoint.

Setting up the Express Server

Clone this repo locally. Run yarn or npm install to install all packages needed. Add a .env file containing the following variables:

APPWRITE_KEY="YOUR_APPWRITE_KEY"
PROJECT_ID="YOUR_PROJECT_ID"
LINKS_COLLECTION_ID="YOUR_LINKS_COLLECTION_ID"

Your folder structure at this point should look like this:

I know you're wondering where this 'Links Collection' is coming from. Well, we need to create a Collection (Table) to hold the links and their short names and we'll call it Links. Open the appwrite-links.js file .

require("dotenv").config();

const sdk = require("node-appwrite");

const client = new sdk.Client();

client
  .setEndpoint("http://localhost:3000/v1") // Your API Endpoint
  .setProject(process.env.PROJECT_ID) // Your project ID
  .setKey(process.env.APPWRITE_KEY); // Your API key

const db = new sdk.Database(client);

const run = async () => {
  try {
    let collection = await db.createCollection(
      "Links",
      [],
      [],
      [
        {
          label: "originalURL",
          key: "originalurl",
          type: "text",
          default: "Empty Name",
          required: true,
          array: false,
        },
        {
          label: "uniqueName",
          key: "uniquename",
          type: "text",
          default: "Empty",
          required: true,
          array: false,
        },
        {
          label: "shortUrl",
          key: "shorturl",
          type: "text",
          default: "Empty",
          required: true,
          array: false,
        },
      ]
    );
    console.log(collection.$id);
  } catch (e) {
    console.log(e);
  }
};

run();

We're simply initializing our client object by passing it our API Endpoint as well as our Environmental Variables. The db.createCollection function on line 16 takes in 4 arguments in the following order:

Name - The name of your collection.
Read Array - Array of User Ids of Users that can read from the Collection.
Write Array - Array of User Ids of Users that can write to the Collection.
Rules - An array of objects with each object dictating how each field in the collection must be used.

Run node appwrite-links.js on the terminal and it would spit out your Links Collection id. You can add it to the .env file.

The public folder contains the frontend we'd be serving. The app.js file simply sets up our server and the routes it'd be accepting requests from. To see the crux of the app, head to the url.js file in the controllers folder.

const { getDB } = require("./../appwrite");
const { v4: uuidv4 } = require("uuid");

const PORT = process.env.port || 3001;

const baseUrl = process.env.BASE_URL || `http://localhost:${PORT}`;

const createLink = async (req, res) => {
  let { originalURL, uniqueName } = req.body;

  const db = getDB();

  if (uniqueName) {
    let documents = await db.listDocuments(process.env.LINKS_COLLECTION_ID, [
      `uniquename=${uniqueName}`,
    ]);
    if (documents.sum > 0)
      return res.status(403).send("This unique name is taken");
  } else {
    while (true) {
      uniqueName = uuidv4().substr(0, 6);
      let documents = await db.listDocuments(process.env.LINKS_COLLECTION_ID, [
        `uniquename=${uniqueName}`,
      ]);
      if (documents.sum == 0) break;
    }
  }

  db.createDocument(process.env.LINKS_COLLECTION_ID, {
    originalurl: originalURL,
    uniquename: uniqueName,
    shorturl: baseUrl + "/" + uniqueName,
  })
    .then((resp) => {
      return res.status(201).send({ shortUrl: resp.shorturl });
    })
    .catch(console.log);
};

const getLink = async (req, res) => {
  const { uniqueId } = req.params;

  const db = getDB();

  if (!uniqueId || uniqueId === "undefined")
    return res.status(403).send("Invalid Request");

  let documentsList = await db.listDocuments(process.env.LINKS_COLLECTION_ID, [
    `uniquename=${uniqueId}`,
  ]);

  if (documentsList.sum == 0)
    return res.status(404).send("Unique Name not found");

  res.redirect(documentsList.documents[0].originalurl);
};

module.exports = {
  createLink,
  getLink,
};

Create Link
It expects a uniqueName and an originalURL in the request body. If a uniqueName is not sent, we create one for the user with the uuid package but ensure it's not longer than 6 characters. We also check the database if it already exists and either create a new one or send an error to the user if the uniqueName was in the request body.
Get Link
We simply use the uniqueName passed as a parameter to get the originalURL and redirect the user to that url.

Run yarn start in the terminal and head to localhost:3001 to see the project LIVE 🌟

In this article, I showed you a quick dive into Appwrite and its main features. We then went ahead to build a simple URL shortener with Appwrite. Hope you enjoyed it 🤗.

Feel free to comment any suggestions or questions. You can also reach me at my email, lorddro1532@gmail.com or on twitter, @the_dro
_.

Building A User Gallery with Auth0, Cloudinary and React

Seun Taiwo — Sat, 16 Oct 2021 14:07:41 +0000

We’ve all had our fair share of battling with authentication and authorization as developers. The case seems to be worse for frontend developers who don’t know how to spin up a server and can become hectic for most.

Enter Auth0, a tool that helps you integrate numerous authentication methods like Facebook, Twitter, Github, Microsoft, etc seamlessly into you frontend application. It can also be used on the backend as well.

Cloudinary, on the other hand, is a SaaS company that allows us to upload images and videos in a very easy way by providing us with an Upload Widget.

Content

Creating your Auth0 account and setting it up with the different authentication methods.
Setting up Cloudinary.
Tying it all together in our React App.

Prerequisites

You need to have a working understanding of Javascript, React and Express.
You must have Node installed.

Setting up Auth0

Head to the Auth0 Signup page. Select the Personal Account Type and leave the ‘I need advanced settings’ unchecked. Verify your account from your email once you’re done.

On clicking next, you’d arrive on your Auth0 Dashboard. Click Applications to create one as we’ll need it to enable the Authentication for our app.

Click on Create Application and a modal will pop up. Fill in your App Name and select Single Page Web Applications since we’re building in React.

After the App has been created, you’ll be asked to select which particular framework you’d be using. You can go ahead and select React. You’ll then be redirected to a page telling you how to set Auth0 up with React but we’d still go through it.

We need to get our Domain and Client ID so slide over to the Settings tab, copy them and paste them somewhere as we’d be needing them later.

You also need to set Token Endpoint Authentication Method to None and set the Application Type to either SPA.

Finally, we have to set our Callback URL, Logout URL and Allowed Web Origins.

Callback URL - It’s simply the URL that the user gets redirected to upon successful login.
Logout URL - Like the above, it’s the URL the user gets redirected upon logging out. It must be specified in the logOut parameters also. ( More on this later in the article)
Allowed Web Origins - We need to add the URL of our app here once again to enable Auth0 refresh its tokens.

For all, we can simply use our URL as http://localhost:3000 since we’re only testing locally. If you’re deploying it, just replace the URL with the URL of the deployed app.

Now, to set up our different authentication methods, click Social under the Authentication dropdown.

By default, Google OAuth would be enabled for your app but with Development Keys. If the app is to be used in Production, be sure to change it to Production keys before deploying.

We’re going to be adding GitHub and Facebook as our possible sign-in options. Click on the Create Connection button and select GitHub.

We need to get our Github App’s Client ID and Client Secret so open a new tab and head over here and go to the OAuth Apps tab. Click the New OAuth App button and fill in the details.

Application Name - Fill in anything of your choice.
Homepage URL - https://[YOUR_DOMAIN]
Authorization Callback URL - https://[YOUR_DOMAIN]/login/callback

Where YOUR_DOMAIN is the domain we got from Auth0 when setting up our app. Click Register Application, Generate your Client Secret on the next page and copy both your Client Secret and Client ID.

Head back to the Auth0 tab and paste them in their respective fields. Under Attributes, check ‘Email Address’ as we’ll be needing it.
On the next page, turn on the social connection for your application so you can make use of it.

You can click on Try Connection to test it out. If it doesn’t work, try and go back and retrace where the mistake came from.

Go to the Social Connections page once again and Create a new Connection. This time, select Facebook.

Open a new tab, head over here and login to your Facebook account.
Click on My Apps in the navbar. The App Type should be Consumer
Enter the name you want to give the app and submit.

On your dashboard, Click the Set Up button on Facebook Login

Click Web on the next page and enter your URL as https://[YOUR_DOMAIN]/login/callback. Hit Save and and go into the Settings Tab

As you can see atop the page, we need to get Advanced Access. Click on the Get Advanced Access Link. Click on Get Advanced for public_profile and email.

The page should look something like this when you’re done.

Head over to the Basic Tab of the Settings dropdown, copy your App ID as well as your App Secret and paste them in their respective fields on the Auth0 Facebook Connection Page. Tick the Checkbox of the email once again and Create the connection. Connect it to your App once again and we’re good to go.

Your social connections page should look something like this at this point.

Setting Up Cloudinary

Signup for your Cloudinary account here and verify your email.

On getting to your account dashboard, all keys you need are displayed atop the page.

You can leave the tab open cause we’re going to need some details later in the article. Click the Gear Icon on the navbar to go to the settings page. Go to the Upload tab and scroll down to upload presets. Click Enable unsigned uploading and an unsigned upload preset will automatically be added. Copy the preset name as we’ll need it later.

Tying it all together with our React App

Our React app is gonna be a user gallery where users come, sign in with Auth0 and their images get stored in the Cloudinary Account we’ve created. We need to fetch all images a user has uploaded also and to do this we need to pass our Cloudinary API Secret. Bear in mind that fetching an image through its url requires no authentication. Fetching the list of images of a user on the client side would be bad as attackers can go through our source code and figure out our API Secret at which point they’d have total access over our account. For this reason, we need to spin up a server.

Spinning up the server

Head over to this repo and clone it locally.
You need a .env file to store your keys so create one in the folder like so:

   API_KEY="YOUR_API_KEY"
   API_SECRET="YOUR_API_SECRET"
   CLOUD_NAME="YOUR_CLOUD_NAME"

Run the command below to install all packages required

   yarn

    npm install

depending on your package manager.

Run this in your terminal to start the server.

   node app.js

You should get a response saying ‘Server connected on PORT 3001’

Spinning up the React App

Clone the React App here.
Run the command below to install all packages required

   yarn

    npm install

depending on your package manager.

Open up the index.js file.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
//import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_DOMAIN}
    clientId={process.env.REACT_APP_CLIENT_ID}
    redirectUri="http://localhost:3000"
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Auth0Provider>,
  document.getElementById("root")
);

To use Auth0 with React, we had to install the package ‘@auth0/auth0-react’. We’re simply setting up Auth0 with our app by passing it our Domain and Client ID which we got earlier. The redirectUri is the URL we’d like to redirect our users after they’re authenticated.

Open up the login.component.jsx file

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import "./login.css";
const LoginButton = () => {
  const { loginWithPopup, loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithPopup()}>Log In</button>;
};
const Login = () => {
  return (
    <div className="login container">
      <LoginButton />
    </div>
  );
};
export default Login;

Here, we’re using the useAuth0 hook to get our login functions. We have loginWithPopup and loginWithRedirect which logs the user in through a popup and through redirecting to another page respectively as their name imply.

Finally, we have the home.component.jsx file

import React, { useEffect, useRef, useState } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import axios from "axios";
import "./home.css";
import Loader from "./../utils/loader.component";
const LogoutButton = () => {
  const { logout } = useAuth0();
  return (
    <button onClick={() => logout({ returnTo: window.location.origin })}>
      Log Out
    </button>
  );
};
const Home = () => {
  const { user } = useAuth0();
  const btnRef = useRef(null);
  const [images, setImages] = useState([]);
  console.log(user);
  const fetchImages = async () => {
    let { data } = await axios.get("http://localhost:3001/images");
    setImages((images) => [...images, ...data]);
  };
  const setUploadWidget = () => {
    var myWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: process.env.REACT_APP_CLOUD_NAME,
        uploadPreset: process.env.REACT_APP_UPLOAD_PRESET,
        folder: user.email,
        tags: [user.email],
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          setImages((prevImages) => [...prevImages, result.info.secure_url]);
        }
      }
    );
    btnRef.current.addEventListener(
      "click",
      function () {
        myWidget.open();
      },
      false
    );
  };
  useEffect(() => {
    setUploadWidget();
    fetchImages();
  }, []);
  return (
    <div className="home">
      <header>
        <img src={user.picture} alt="" />
        <h2>Welcome, {user.name}</h2>
        <LogoutButton />
      </header>
      <button ref={btnRef} className="cloudinary-button">
        Upload files
      </button>
      <section>
        {images.length ? (
          images.map((image, index) => (
            <a
              href={image}
              key={index}
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src={image} alt="Ronaldo" />
            </a>
          ))
        ) : (
          <Loader home />
        )}
      </section>
    </div>
  );
};
export default Home;

First, we create our LogoutButton component which is based on the logout function gotten from the useAuth0 hook once again.

In our Home Component which is the main component, we have two main functions, the fetchImages function, which fetch all images of the logged in user and the setUploadWidget function which sets the upload widget to open up when the upload button is pressed.
We then call both functions in a useEffect to ensure they are both called every time the page loads.

In the App.js file, we use react-router-dom to enable different routes. We also create custom components PrivateRoute and PublicRoute to help redirect users who are not logged in to the login page and vice versa.

We also need another .env file for our environment variables.

    REACT_APP_DOMAIN="YOUR_AUTH0_DOMAIN"
    REACT_APP_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
    REACT_APP_CLOUD_NAME="YOUR_CLOUDINARY_CLOUD_NAME"
  REACT_APP_UPLOAD_PRESET="YOUR_UNSIGNED_CLOUDINARY_UPLOAD_PRESET"

You can then go ahead and run

    yarn start

    npm start

to launch the project and everything should be working smoothly.

If you have any issues or want to contact me, you can reach me at lorddro1532@gmail.com or on Twitter at @the_dro_.

Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary.

Building a Chat App with Fauna's GraphQL, Firebase, and Socket.io

Seun Taiwo — Sat, 05 Jun 2021 12:21:57 +0000

If you've used Express to build a GraphQL server before, it might seem easy, but I'm here to show you an even easier way made by Fauna. Fauna's GraphQL takes away all the complexities of building a GraphQL server and sets it up with your schema ONLY. Isn't that awesome?

In this article, we will build a React Chat App using Firebase for authentication and connect to both a Socket IO server and Fauna's GraphQL server.

To understand this article, you would need to know React and Express, but I'll try my best to explain to them as we go. To follow along, you need to have the latest version of Node installed.

Sections

Setting up Fauna's GraphQL.
Setting up the React App with Firebase to handle Authentication.
Setting up Socket.io on the client and the server.
Conclusion and links to resources used in the article.

Setting up Fauna's GraphQL

First, head over to Fauna's website, create an account, which will direct you to the dashboard. If you're not referred to the dashboard right away, click here.

Click the new database button and enter your database name.

The 'Pre-populate with demo data' checkbox would be helpful if we wanted to autofill our database with some data, but we're creating ours, so you should leave it unchecked.

Head over to the Security Tab and click on New Key, then Save

You should be seeing your API Key now. Copy it somewhere as you'll need it.

This API Key is specific to this database, i.e., it won't work with other databases created on Fauna. All GraphQL queries going to Fauna must have an 'Authorization' header that contains your API key.

Create a folder to hold all files related to the server. I will call mine chat-app-API. You need to initialize your package manager. You can use npm or yarn, but I will be using yarn. From the terminal, run:

yarn init -y

This initializes your project with the default options.

We will need to install some dependencies to aid our development so run:

yarn add axios dotenv express socket.io & yarn -D fauna-gql-upload faunadb

axios - It's a library used to make HTTP requests from the client or server.
dotenv - It extracts our environmental variables from our .env file ( I'd explain what .env is in a bit ) and makes them available in our app.
express - This library takes all the heavy lifting of setting up a server and handling requests in node.
socket.io - This library allows us to enable the real-time connection between the client and the server.
fauna-gql-upload - Removes the hassle of uploading our schema on Fauna's website or through the REST API, which might be a bit confusing. It helps us upload our GraphQL schema directly from the terminal. fauna-gql-upload is being installed as a Dev Dependency because it won’t be needed in production.
fauna - This is a Fauna Javascript driver that enables us to work with their services. We're not using it directly, but the fauna-gql-upload package requires it.

Setting up the React App with Firebase to handle Authentication.

To get started, clone the react app from this GitHub repo. Open the terminal in the folder and run:

yarn install

To explain the React App briefly, I'm using ContextAPI for state management. When a user signs in, the user is stored and taken to the home screen. The home screen is where the users' chats and the list of users, a search button, and an input box are displayed. The search button searches for all users if the input box is empty when it is clicked. Otherwise, it will search for a user with the text entered into the input box. This page utilizes socket.io to get updated whenever a new chat is created. If any of the users are clicked, a new chat is created, and alerts are sent to all other clients about that chat. If a chat is clicked, the user is directed to the chat page where socket.io sends new messages to the recipient. To ensure consistency, I made sure the messages and chats were updated on the user whenever a new one was created. That's about it for the flow of the app.

To set up Firebase, all you need is a Google Account, after which you would create a new app by clicking the button and entering your app name. Go ahead and disable google analytics— we won't be needing it.

You should be on this page. Click Authentication, then Get Started from the subsequent page that loads.

Firebase allows various authentication methods, but we will be using Google and Twitter—if you have an active Twitter Developer Account. I got my Twitter Developer Account verified in a day, so it shouldn't take too long. However, I would comment out the Twitter login button and its firebase config. If you do get the API KEYs, you can uncomment it from the firebase.utils.js and the login.component.jsx files.

Activate Google Auth by clicking the pencil icon and following the prompt.

For Twitter Auth, you would need an API Key and API Secret. You would also need to set the Callback URL and Website URL of the application on your Twitter Developers' Dashboard. To get the URLs, head back to your Firebase console and click on the gear icon beside Project Overview, and from there, you may click on Project Settings.

Callback URL - https://[projectid].firebaseapp.com/__/auth/handler
Website URL - https://[project-id].firebaseapp.com

Scroll to the bottom of the page and click on this:

Register the Web App without Firebase Hosting. You will get this, which holds vital information that enables us to connect our React App to Firebase:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

firebase.initializeApp(firebaseConfig);

The above code is in the repo at chat-app/src/firebase/firebase.utils.js where we initialize our Firebase App. If you're wondering what process.env is and looking for where we defined it, well, we didn't. process.env is where Node stores our environment variables. What are environment variables? I like to see environment variables as external variables that we don't set directly in our code; instead, they are determined by the OS. They're essential for two main reasons:

Security: We won't want to expose vital information about our Firebase App by putting it on the client-side, which is open for everyone to see.
Easily changeable: Say you've deployed a web app that uses an API Key in about five different files in your codebase. You would need to go to your codebase and start making the changes in the different files. With environment variables, you have to go to your deployment platform and change the environment variables.

While developing, we store these environment variables in a .env file and add them to our .gitignore file if we're using git, so they don't get committed. A typical .env looks like so:

HELLO_WORLD="bar"
HI="foo"

The variable names are always in uppercase with spaces as underscores (Constant Case), and the values are between quotes. Read more about environment variables here.

Our .env would therefore look like this:

REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_FAUNA_SECRET=""

Add the Firebase config values and your Fauna Secret, which we created earlier, to your .env file.

Back to the cream of the crop: Fauna. Copy the schema as written below. If you're not familiar with GraphQL, your schema tells your GraphQL server exactly how you want it to be structured, i.e., the possible queries that can be made and the possible mutations that can be made, as well as their arguments and their results. They must all be appropriately specified.

Setting up Socket.io on the client and the server.

We're using socket.io to alert other users when a new chat has been created or a new message sent. When a chat is created, an API request is sent to the server to create that chat, which sends a request to Fauna. If successful, all users are notified, but only the two users involved in the chat get a UI update. For a message, the same process occurs, except if successful, the message is sent to the two users of the chat alone.

On the client ( your React App ), socket.io has already been set up. I use socket.io in the home.component.jsx and chat.component.jsx files to enable the real-time connection. You can check those files to see how I implemented them. In the chat-app-API folder we created in step 1, add this code to a file named app.js:

require("dotenv").config();
const PORT = process.env.PORT || 3000;
const express = require("express");
const axios = require("axios");
const app = express();
const httpServer = require("http").createServer(app);

app.use(express.json());

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

app.post("/chat", async (req, res) => {
  const { user1Id, user2Id } = req.body;
  if (!user1Id || !user2Id) {
    console.log("IDs missing for chat");
    return res.status(400).send({
      status: "Failed",
      message: "Send both IDs to create a chat",
    });
  }
  const body = {
    query: `
    mutation CreateChat($user1: ID, $user2: ID){
      createChat(data:{
        users:{
          connect:[$user1,$user2]
        }
      }){
        _id
        messages{
          data{
            content
            sender{
              _id
            }
          }
        }
        users{
          data{
            _id
            name
            image
          }
        }
      }
    }
    `,
    variables: {
      user1: user1Id,
      user2: user2Id,
    },
  };
  try {
    const response = await axios.post(
      "https://graphql.fauna.com/graphql",
      body,
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.FGU_SECRET}`,
        },
      }
    );
    console.log(response.data);
    io.emit("newChat", response.data.data.createChat);
    res.send({
      status: "Successful",
      message: "Chat Saved Successfully",
    });
  } catch (e) {
    console.log(e);
  }
});

app.post("/message", async (req, res) => {
  console.log(req.url);
  const { message, chatID } = req.body;
  const body = {
    query: `
    mutation CreateMessage($chatID: ID, $senderID: ID, $content: String!){
      createMessage(data:{
       chat:{
         connect: $chatID 
       }
       content: $content
       sender: {
         connect: $senderID
       }
     }){
       content
       _ts
       sender{
         name
         _id
       }
     }
   }
    `,
    variables: {
      chatID,
      senderID: message.senderID,
      content: message.content,
    },
  };
  try {
    const response = await axios.post(
      "https://graphql.fauna.com/graphql",
      body,
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.FGU_SECRET}`,
        },
      }
    );
    console.log(response.data);
    console.log(chatID);
    io.sockets.in(chatID).emit("newMessage", response.data.data.createMessage);
    res.send({
      status: "Successful",
      message: "Received",
    });
  } catch (e) {
    console.log(e);
  }
});
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "*",
  },
});
io.on("connection", (socket) => {
  const { chatId } = socket.handshake.query;
  socket.join(chatId);
  console.log(`Connected to ID ${socket.id}`);
});

httpServer.listen(PORT, () => {
  console.log(`Server Started on Port ${PORT}`);
});

In the code above, we added two middlewares, the first for parsing our request bodies and the second for setting our headers to prevent CORS errors. We then implemented our /chat and /message routes for adding chats and messages, respectively. We finally initialized our socket.io connection and turned on the server by calling the listen function.

Lastly, we need our Fauna GraphQL schema. Create a folder named fauna in the chat-app-API folder and a file named schema.gql, and add the following code to it:

type User {
  name: String! @unique
  image: String
  chats: [Chat] @relation
}

type Chat {
  users: [User!]! @relation
  messages: [Message] @relation
}

type Message {
  chat: Chat!
  content: String!
  sender: User!
}

type Query {
  allUsers: [User!]!
  allChats: [Chat!]!
  allMessages: [Message!]!
  findUserByName(name: String!): User
}

Remember, we installed a nifty little tool to upload our schema. We use it here, but let's add it to our package.json script for ease of use. Add this line to the scripts object:

"fauna": "fgu"

For the tool to work, we need to add our Fauna Secret here too hence we definitely need another .env file. Create one and add the following with your secret.

FGU_SECRET=""

When this is done, run

yarn fauna

npm run fauna

depending on your package manager and you should get:

If that didn't work, return to your Fauna Dashboard, go to the GraphQL tab, and import the schema yourself.

At this point, you can start your server as well as your React app on two different browsers and see your Chat App working flawlessly.

You can reach me on Twitter at @the_dro_ if you have any questions about this article. If you'd love to learn more about Fauna, you can go to their documentation or contact me as well. Israel did the cover art of this article.

Thank You.

Deploying Your React or Vue Project To Glitch

Seun Taiwo — Sat, 05 Jun 2021 12:18:24 +0000

TL; DR Build your project and serve the dist folder from a server

Like me, you may have tried to deploy your React or Vue app to Glitch and failed :) but I found a way out. Thinking about it, your project build will consist of plain ol' JS, HTML and CSS files(and images). All you have to do is spin up a server to serve those files.
I would be assuming you already know about react and npm. When you're done with coding, run your project build by running

npm run build

or whatever command you have set in your package.json file. This should spit out a dist folder containing your files in the root directory of your project.

Now, spinning up a server might seem like a lot of work, but with Express( a Node.js framework), it's relatively easy. First, we have to install the Express package.

npm install express

Then create an app.js file and add the following lines of code.

const express = require("express");
const path = require("path");

const app = express();

app.use(express.static(path.join(__dirname, "dist")));

app.use((req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});

app.listen(process.env.PORT || 3000, () => {
  console.log("Server Started");
});

The code above sets up the server and sends your files whenever a request is made to the server.

To deploy to Glitch, simply log in, create a new project and import your code from Github. Glitch would handle the rest from there on out. However, if you want to watch how it progresses, you can click Tools > Logs.

Repo Link(Vue Project): Here

You can reach out to me on Twitter

Thank You.

Looking Back At 2020

Seun Taiwo — Fri, 01 Jan 2021 01:32:39 +0000

January

At this point, I had no idea all the gbas gbos and omo moments were on their way so all that was on my mind was to get a higher GP and start taking frontend more seriously. Paul(@CuriousPaul2 on Twitter) called me to work on a project where I effed up badd as I didn't even know how to make a site responsive. Working on this made me realize how far I was in my tech journey.

February-March

School was draining the life out of me as usual but I wasn't drowning sha. Got a new phone(yaaayyy). Attended all DSC Unilag events I could go for. This pushed me to sign up for the Solution Challenge and Frontend Study Group which I flopped in once more. Paul(x2) came to meet me to work on another project again even with how bad I flopped the first time. My grandpa died, then COVID hit, then the lockdown began. At this point, only movies, tiktok and music could keep me company.

April-June

I would say this was the turning point for me in the year. I first signed up for DSC 30DaysOfCode Challenge(Python Track). This pushed me to learn python and get okay at it. As it was coming to an end, the fire in me wasn't ready to be quenched so I went back to a web development course I had watched about 40% of. Completed the course. Took another CSS Course (Didn't finish it tho). Pluralsight were running a promo where everything was free so I took 2 courses on nodeJS. At the end of June, I got 2 frontend gigs(First Ever). Used the money to beef up my system. In between all these, Paul(x3) contacted me again to work on Coveed. I gladly jumped on board.

July-September

Got a job which was amazing but I started feeling down(burnout maybe). Bought my first console(This was prolly my happiest moment, cause it had been a long time coming). Close to the ending of September, I sorta lost the job(not because of the console). Depression set in

October-December

Didn't save up much while working so the money I had was slowly coming to an end. Mid November, my account was empty and my phone screen started to flicker(yes, the phone I got at the beginning of the year). Spoke with Paul(x4) on a call joking about how I didn't know where my next data subscription was coming from and the next day, I got a call for a gig. I was overjoyed. Few days to the new year, the screen went totally black and it's Samsung.

Seeing other people's reviews of their year made me feel like I didn't achieve much but on writing this, it's definitely more obvious. A BIG thank you to Paul. You've had such an impact on me. Thank you to everyone who made my year in every little way.
My plans for 2020? To grow.

Happy New Year🌻

DEV Community: Seun Taiwo

Connect Four: Into the Emailverse

Intro

What I Built

Demo

Code Repository

How I Built It

Problems I Had To Solve

Building A TodoList with Svelte & Firebase

Table of contents

Prerequisites

Introduction

Setting Up Firebase

Creating the project

Setting up Google OAuth

Setting up Firestore

Building the frontend with Svelte

Enabling SCSS in the project

Enabling Routing with page.js

Connecting the frontend with Firebase

Conclusion

GraphQL in React

Table Of Contents

What is GraphQL

REST vs GraphQL

Statelessness

Security

Overfetching / Underfetching Data

Making Requests to REST & GraphQL APIs

Making GraphQL Request with Apollo

Should you use GraphQL

Building A URL Shortener using Appwrite and Express

What is Appwrite?

Prerequisites

Setting up Appwrite

Setting up the Express Server

Building A User Gallery with Auth0, Cloudinary and React

Content

Prerequisites

Setting up Auth0

Setting Up Cloudinary

Tying it all together with our React App

Spinning up the server

Spinning up the React App

Building a Chat App with Fauna's GraphQL, Firebase, and Socket.io

Sections

Setting up Fauna's GraphQL

Setting up the React App with Firebase to handle Authentication.

Setting up Socket.io on the client and the server.

Deploying Your React or Vue Project To Glitch

Looking Back At 2020

January

February-March

April-June

July-September

October-December