On a recent project, we used Jest to orchestrate the tests across our web app, which uses a combination of Puppeteer, SuperTest, and Enzyme for testing. Here’s an overview of how we wired up and tested each part of the app, the tools/libraries we used, and the orchestration we did to run all of the […]
I recently helped build a web app using React and TypeScript, which needed to load and display a lot of page-specific data from a REST API. One challenge on this project was figuring out a nice way to deal with loading data and making it available to any components on the page that needed access […]
My team has started working on a new web application, and we’ve been asked to use ASP.NET for the backend. We chose to use React for the frontend because we’ve had significant success with React at Atomic, and we wanted to leverage some existing UI components that were built in React. We try to avoid […]
This week I had a chance to try out GitHub Actions — GitHub’s continuous integration solution. I was at the point in a project where I would normally turn to CircleCI, so I thought I’d give GitHub Actions a try. If it worked out, that would be one less service I’d have to sign up […]
I’ve been working on a project where we wanted to implement a set of filters for a list of records on one page of our React web app and store the selected filters as state in the URL. We chose this approach so we could link directly to the page with specific filters selected. Adding […]
It can take a long time to get a full-stack React and Node.js app off the ground. Fortunately, with the addition of API Routes, Next.js offers a way to do that in just minutes.
Many people think of React and Redux as inseparable, despite the Redux author’s own advice to avoid using it “until you have problems with vanilla React.”
Many web applications need to load data from servers that will be shown to users. It’s important for the UI to handle loading states while the requests are in-flight. Let’s say, for example, that we have a page that will load a user’s profile. We want to be able to show a loading message, then […]
On a recent project, we needed to support multi-level tab bar navigation within our application. With multiple variations of tab bars, each page needed to know which tabs to show. We found that TypeScript offered a good solution.
A while ago, I was working on a project based off the Atomic SPA Starter Kit, which uses TypeScript, React, and GraphQL. One of the features we needed to build was a file upload component that supported dragging and dropping a file from a separate window onto the UI.