Sign in

This is the index for the Roam Research clone series. As of September 2021, this is a live index.

Logs

> Log [0]: My beautiful dark twisted Roam fantasy

> Log [1]: Everything is an entity

Glossary

Log [0]:

  • Outbound link: Link to a referenced location—the familiar type of link.
  • Backlink: Link from a referenced location back to a location that contains the outbound link.
  • Block: Any entity that can be linked to and from. A block could refer to a full page or an individual paragraph.
  • Page: A type of block that refers to a titled note and contains children with…


This is a series of logs describing my attempt to mock the Roam Research platform. I’m going to write and publish these as I go. This is the second installment, covering some thoughts on the Roam data structure, Datomic entities, and redundancy.

The first log is here.

1.0: In the beginning

The first blurry shape of this project came from this article about the Roam API, which I followed up with this one about the Roam data structure.

From the data structure article:

The Roam database is like a forest. Each page is a tree. The root of the tree is the page, the…


This is a series of logs describing my attempt to mock the Roam Research platform. I’m going to write and publish these as I go. This is the first installment, covering the project’s goals, backlinking basics, and tech stack rationale.

0.0: I want to feel something

In early 2021, I did the free trial of Roam Research. Deep in bleak lockdown winter, Roam introduced me to the concept of backlinking.

Around this time, Notion, which I use every day, also added support for backlinks. I was also reading about Ted Nelson and his hypertext mirage project, Xanadu.

This might have been a fleeting fascination. But some…


This article discusses how to set up an Amplify app with Google Sign In using a React app frontend. This will also mention how to configure multiple redirect URIs per app.

The first section is dedicated to boilerplate setup with React, Github, Amplify, and the Google developer console, while the second is about adding auth.

/** Skip the setup step if you’ve created an app already, and move right to the heading Add auth to Amplify app */

Set up React and Amplify

1. Create a new React app and GitHub repo, add a project in the Google developer console

On the command line

  • Create a react app with npx create-react-app google-test, cd into the app, and run npm start to start…


I wanted to display some code from one of my GitHub repos in a React app, and I wanted it to update automatically on the site when I pushed a new version.

I wanted this for a small component library I was making for myself, so I could see the latest version of the component from the repo. To accomplish this I used the GitHub API and the Prism syntax highlighting package.

  1. Add the GitHub client package and Prism for syntax highlighting.

I also added the axios library for making API calls.

npm i @octokit/rest react-prism axios

2. Authenticate to…


React-query is a gorgeous data fetching library that has received well-deserved praise. This article will detail patterns for a CRUD app, plus some bonus patterns.

The documentation for react-query is excellent, but I found myself wishing for more practical examples while learning it. These examples will assume some familiarity with react-query, such as with the useQuery hook, but not beyond the basics. This example app will be a note-writing tool like Evernote, and I’ll just outline data fetching cases.

Fetching data:

  1. Fetch data and handle results: useQueries.
  2. Fetch a subset of data using query strings or query params: useQuery with…


This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time of writing) and common errors.

I found myself copy-pasting my React components from project to project and wanted to create an npm package so I could import them easily. To do that, I had to learn how to publish an npm package. It was hard to find much updated info online about publishing React components with Babel 7, and I was getting plenty of build errors, so I decided to write this as a reference. …


Detecting a click outside a React component is useful for closing dropdowns, modals, and dialogue boxes. It’s a common pattern that clicking outside the body of those components will close them:


This tutorial will walk through the steps for sending Draft.js data to a server using a POST request, and then how to retrieve and display that data using a GET request.

I’m using an Express backend, a MongoDB database, and a React frontend. This will assume some basic knowledge of Draft.js—there are a lot great setup guides out there.

Dependencies: react , axios , draft-js

Structure:

  • AddPost component with Draft.js Editor → useSubmit() hook to handle the POST request.
  • PostGallery component to display posts → usePosts() hook to handle fetching the posts.

Pre-requisite setting up the GET and POST routes

First, make sure that you have an established…


Airtable is a spreadsheet app with a free, public API. That allows its spreadsheets to be read and written to from the browser, making it usable as a simple database. This article will show how to fetch, create, update, and delete data from Airtable. The API calls will be handled by Axios, the popular library for handling HTTP requests.

Dependencies:

npm i axios — the Axios library for calling Airtable from the browser

npm i airtable — the package for configuring an Airtable base in React

Steps covered:

  1. Set up an Airtable base.
  2. Authenticate the base in React.
  3. Fetch data…

JB

React guides 💿 @jawblia on GitHub and Insta

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store