Fullstack
Operational maturity for production![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
This post will cover various aspects of operational maturity, and steps to take as your app grows up.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
4 months ago
Testing patterns for peace of mind![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Learn about best practices for testing your full-stack apps - running on Convex or elsewhere!
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
4 months ago
Build and Deploy a Full Stack WhatsApp Clone with AI | Video Calls, Screen Sharing | React.js, TypeScript![As a Programmer's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F131e95803244f47c9a0c8bbb8c0f2f1ccd84c59e-176x176.jpg&w=3840&q=75)
A tutorial on how to create a clone of WhatsApp with OpenAI built with React.js, TypeScript, TailwindCSS Convex, Clerk and ZegoCloud.
![As a Programmer's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F131e95803244f47c9a0c8bbb8c0f2f1ccd84c59e-176x176.jpg&w=3840&q=75)
As a Programmer
4 months ago
Observing your app in production![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
By setting up dedicated tools, you can get actionable data to help understanding errors, performance, user behavior and allow you respond quickly when things change.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
4 months ago
Running tests using a local open-source backend![Sarah Shader's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F7047febd1fcf4e4b44d4da9f199c07d842acf23b-1365x1418.jpg&w=3840&q=75)
Convex recently released an open source version of the backend. We can use this to unit test Convex functions by running them with a local backend. These tests will work by running a backend locally, pushing your code, and using the `ConvexClient` to execute queries and mutations from your favorite testing framework and asserting on the results.
![Sarah Shader's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F7047febd1fcf4e4b44d4da9f199c07d842acf23b-1365x1418.jpg&w=3840&q=75)
Sarah Shader
4 months ago
Build a File Storage App with Role Based Authorization (Next.js, Shadcn, Typescript)![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody guides viewers in creating a comprehensive full stack file storage application on YouTube. The tutorial covers features like organizations, file upload, management, role-based authorization, authentication, cron deletes, favorites, trash functionality, and various UI components such as dialogs, modals, toasts, dropdowns, and more.
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
5 months ago
Build and Deploy Eraser.io App Clone: Full Stack React App - Next.js, Typescript, Tailwind Css![TubeGuruji's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F3c6fbc305578eeb28c1f878826b386d7e9c2c0c4-64x64.jpg&w=3840&q=75)
A tutorial on how to create a fully functional clone of Eraser.io with Convex using Next.js, React, TypeScript, and Tailwind CSS.
![TubeGuruji's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F3c6fbc305578eeb28c1f878826b386d7e9c2c0c4-64x64.jpg&w=3840&q=75)
TubeGuruji
5 months ago
How I built NotesGPT – a full-stack AI voice note taking app![Hassan El Mghari's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F8d384e248d778e8d9bd5f1ee56d0b8b05b236add-400x400.jpg&w=3840&q=75)
I recently built a full-stack app called notesGPT. It allows you to record a voice note, transcribes it, and extract action items and display them as action items. It’s fully open source and comes equipped with authentication, storage, vector search, action items, and is fully responsive on mobile for ease of use.
![Hassan El Mghari's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F8d384e248d778e8d9bd5f1ee56d0b8b05b236add-400x400.jpg&w=3840&q=75)
Hassan El Mghari
5 months ago
Why I use Convex over Supabase as my BaaS![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
An overview of Convex and Supabase, comparing the DX and capabilities of both products when building out the same application.
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
5 months ago
Texting your Web App to Create Posts![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
In this tutorial, learn how to use Convex HTTP actions to set up a webhook that handles incoming text messages and stores them for display in a React web app. On top of that, it manages user auth and permissions. This is a legitimately complex workflow that can be built in under an hour using a couple hundred lines of code.
![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
Jason Lengstorf
6 months ago
Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)![Code With Antonio's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F48ce1331b5f4090f7cdb47bf5b236b193568db46-176x176.jpg&w=3840&q=75)
In this 10 hour tutorial, you will learn how to create your very own Miro clone - A collaborative, real-time whiteboard. Notable features include a real-time database, whiteboard from scratch with ability to add shapes like Rectangles and Ellipses, Sticky notes and Pencil drawing.
![Code With Antonio's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F48ce1331b5f4090f7cdb47bf5b236b193568db46-176x176.jpg&w=3840&q=75)
Code With Antonio
6 months ago
Session Tracking Without Cookies![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Advice and resources for session tracking per-tab or per-browser via localStorage / sessionStorage using React Context, hooks, and some utilities to make your life easier.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
6 months ago
The most exciting 4 hour coding challenge![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Tag along as WebDevCody participates in LearnWithJason's coding challenge where 4 developers use the same technologies to create the best project possible in 4 hours.
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
7 months ago
4 Devs, 1 Idea, 4 Apps in 4 Hours(!!) with Convex![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
Using Convex, 4 web devs built their own fullstack app based on this prompt:
> Build a way to show real-time updates on the website for a Dungeons and Dragons-themed small business!
See what they built, learn how they did it, and watch their reactions to each other's work in this installment of the "4 Web Devs, 1 App Idea" video series.
![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
Jason Lengstorf
7 months ago
Customizing serverless functions without middleware![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Re-use code and centralize request handler definitions with discoverability and type safety and without the indirection of middleware or nesting of wrappers. Use the new customFunction module in convex-helpers for your Convex TypeScript functions.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
7 months ago
Seeding Data for Preview Deployments![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Now that we've launched Preview Deployments on Convex, you can test out backend changes easier than ever. But you may want to seed your project with data first, so let's go over how to do that.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
9 months ago
GPT Streaming With Persistent Reactivity![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Stream GPT responses without brittle browser-based HTTP streaming.
Multiplayer reactivity, persistence, reactivity via Convex. Using OpenAI’s Node SDK server-side, and Convex's useQuery hook client-side.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
9 months ago
Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023![Code With Antonio's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F48ce1331b5f4090f7cdb47bf5b236b193568db46-176x176.jpg&w=3840&q=75)
Hi all 👋 In this 8 hour tutorial you will learn how to create an end-to-end fullstack notion clone, all with proper notion-style editor, cover images, nested documents, publishing documents to public, real-time database and more.
![Code With Antonio's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F48ce1331b5f4090f7cdb47bf5b236b193568db46-176x176.jpg&w=3840&q=75)
Code With Antonio
10 months ago
I trained my own AI voice model to teach my kid![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Generating rhyming words via GPT-4, along with Dall-E cartoon images and ElevenLabs speaking with a specific voice to make a game to teach words.
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
10 months ago
Using Convex with Next.js Quickstart![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
A quick start guide for using Convex with Next.js
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
a year ago
How to code an AI powered Text Adventure Game (Next.js, Convex, OpenAI, DALL-E)![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Build a text adventure game with Next.js, Convex, OpenAI, and DALL-E. Full stack walkthrough.
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
a year ago
Building a Full Cloud Backend - Software Engineering Daily Podcast![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
Discussion of patterns, psychology, abstractions, managing complexity, and more on the Software Engineering Daily Podcast with James Cowling
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
a year ago
Custom Authentication (with Lucia)![Michal Srb's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fe8231f5314b107688be9636bd8a855e820cbca20-512x512.png&w=3840&q=75)
Learn how to build a full stack app with authentication without any third-party auth providers, using Convex and the Lucia library.
![Michal Srb's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fe8231f5314b107688be9636bd8a855e820cbca20-512x512.png&w=3840&q=75)
Michal Srb
a year ago
The Next Level Firebase for Modern Developers![Jack Herrington's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2a30bc0ae2f04df2d241c9c58d8c03d681c53627-176x176.jpg&w=3840&q=75)
Check out Convex, an incredibly well-designed Firebase alternative that provides a realtime database, object storage, server functions, http API hosting, cron jobs and more!
![Jack Herrington's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2a30bc0ae2f04df2d241c9c58d8c03d681c53627-176x176.jpg&w=3840&q=75)
Jack Herrington
a year ago
Wake up, you need to make money! (Add Stripe to your product)![Michal Srb's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fe8231f5314b107688be9636bd8a855e820cbca20-512x512.png&w=3840&q=75)
If you’re building a full-stack app, chances are you’ll want some of your users to pay you for the service you provide. How to use Stripe with Convex to get it done.
![Michal Srb's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fe8231f5314b107688be9636bd8a855e820cbca20-512x512.png&w=3840&q=75)
Michal Srb
a year ago
How to Generate AI Images from Scribbles with Next.js![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Building a full stack app to generate images based on a prompt and user-provided sketch
![Web Dev Cody's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F5c1417465b5653024b2a3950607b9d216cfe4cc3-176x176.jpg&w=3840&q=75)
Web Dev Cody
a year ago
Everyone Can Be a Full-Stack Engineer![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Alex Cole discusses dynamic web apps, how serverless solutions compare to in-house stacks, and how product development changes when individual engineers can own features end-to-end.
![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Alex Cole
a year ago
Moderating ChatGPT Content: Full-Stack![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
In this post, we’ll look at how to use the moderation API to flag messages before sending them to Chat-GPT, and patterns for handling these errors in a full-stack React app.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
Adding Personality to ChatGPT-3![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
How to store multiple personalities Convex and provide them to the chatGPT API, enabling changing personalities mid-conversation. This is a follow-up to Building a full-stack ChatGPT app.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
Building a Full-Stack ChatGPT app![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Let's build a full-stack chat app to talk to ChatGPT on its new API!
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
Type-safe, data-driven apps, even if databases freak you out![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
You can build a database-powered app with end-to-end type safety and real-time updates without needing to learn how to manage databases. This tutorial will show you how.
![Jason Lengstorf's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bbb8a8f254d2ae7bdea482a610b37e35b384246-400x400.webp&w=3840&q=75)
Jason Lengstorf
a year ago
Help, my app is overreacting!![Anjana Vakil's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F26b7f9ae04ef51725d117901c29166d930328d29-1080x1080.jpg&w=3840&q=75)
Reactive backends like Convex make building live-updating apps a cinch, but default behavior might be too reactive for some use cases. Not to worry! Let’s fine-tune the reactive dataflow of a Convex + React app to deliver a better UX.
![Anjana Vakil's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F26b7f9ae04ef51725d117901c29166d930328d29-1080x1080.jpg&w=3840&q=75)
Anjana Vakil
a year ago
Testing React Components with Convex![Arnold Trakhtenberg's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F4f15f1b5bf88a631070c66706bd5b819ff6fd2d1-852x852.jpg&w=3840&q=75)
Oftentimes during testing we want to mock out our backend so we can unit test our UI components without talking to our actual server code.
In this article, we’ll explore options for testing React components that call Convex React hooks using mocking and dependency injection. To do this, I’ve written a sample TypeScript React app using the Vitest testing framework. The patterns presented in this post are also applicable to other JavaScript apps and frameworks.
![Arnold Trakhtenberg's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F4f15f1b5bf88a631070c66706bd5b819ff6fd2d1-852x852.jpg&w=3840&q=75)
Arnold Trakhtenberg
a year ago
Background Job Management![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Implement asynchronous job patterns using a table to track progress. Fire-and-forget, cancelation, timeouts, and more.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
End-to-End Encryption with Convex![Lee Danilek's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F3c79cdc687d19f0b05080ae217ed23e00b239f79-594x603.jpg&w=3840&q=75)
Implementing end-to-end encryption on top of Convex to build a secret-sharing app.
![Lee Danilek's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F3c79cdc687d19f0b05080ae217ed23e00b239f79-594x603.jpg&w=3840&q=75)
Lee Danilek
a year ago
Anonymous Users via Sessions![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Getting users to sign up for a new service before seeing any benefits is challenging. In this post, we looked at a couple of strategies for managing user information without requiring a login.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
Sessions: Wrappers as "Middleware"![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
An approach to server-persisted session data with Convex, wrapping your server functions and storing a session ID on the client.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
a year ago
Zod Validation: Wrappers as “Middleware”![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Function validation is important for a production app because you can’t always control which clients are talking to your server. See how to use zod to validate your Convex functions, using our withZod wrapper.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
2 years ago
Implementing Upvoting 4 Ways on Convex![Kate Rudolph's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F58121456aeee0e1eb410d800a21e3dd5b4b2612a-200x200.jpg&w=3840&q=75)
Implementing an "upvote" feature 4 ways with Convex.
![Kate Rudolph's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F58121456aeee0e1eb410d800a21e3dd5b4b2612a-200x200.jpg&w=3840&q=75)
Kate Rudolph
2 years ago
Implementing Presence with Convex![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Some patterns for incorporating presence into a web app leveraging Convex, and sharing some tips & utilities I built along the way.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
2 years ago
Don't Drop ACID![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
When your database supports ACID semantics, you're free to write code the intuitive way and ignore the complexities of concurrency and failure.
![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Jamie Turner
2 years ago
Building an Application Portal on Convex![Web Development at Berkeley's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F206a96de934222cac427842592e36b401d7aadaf-200x200.jpg&w=3840&q=75)
Working with Convex has made our development workflow so much more streamlined—we no longer have to worry about the complexities of traditional frontend-backend communication, enabling us to build out the core of our new application portal at a blazing-fast speed.
![Web Development at Berkeley's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F206a96de934222cac427842592e36b401d7aadaf-200x200.jpg&w=3840&q=75)
Web Development at Berkeley
2 years ago
Throttling Requests by Single-Flighting![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
For write-heavy applications, use single flighting to dynamically throttle requests. See how we implement this with React hooks for Convex.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
2 years ago
Ready for Actions![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
Convex 0.5.0 introduces built-in support for actions — arbitrary lambda functions that run in a Node.js environment on the Convex cloud. We use the term action to differentiate these functions from Convex mutation and query functions, which enable transactional writes and dynamic subscriptions that update whenever data changes.
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
2 years ago
Jamstack Conf 2022 Panel: The Future of Databases![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
Today, a new wave of innovation is making databases approachable for developers without requiring a specialized skillset, opening the door to a whole new category of ambitious web experiences. In this panel, you’ll hear from the people pushing the boundaries of database technology and learn what’s possible — and what’s coming.
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
2 years ago
Launching Features Right on Time: Feature Gating![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Today we’re going to talk about how to flip features on and off remotely using a clever use of the reactive nature of Convex queries.
![Ian Macartney's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F077753b63476b77fb111ba06d1bb538517033a54-3500x3500.jpg&w=3840&q=75)
Ian Macartney
2 years ago
The serverless revolution deserves more than just a serverless database![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
The serverless movement has eliminated so many problems but it has left application developers with the hardest one of all: managing distributed state.
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
2 years ago
The future of databases is not just a database![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
The future of databases is Convex. This video originally aired at Jamstack 2022, highlighting the next evolution of modern web development architecture.
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
2 years ago
Build a Reactive Backend for a Web App![Tom Ballinger's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee2709d9d4fc88ec79d6e72ea01f7b2ee09afd0e-3024x2671.png&w=3840&q=75)
Convex is a JS-powered database and backend for web apps that’s reactive — you can use it to create endpoints and queries that update automatically when data changes. Tom Ballinger will teach us how.
![Tom Ballinger's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee2709d9d4fc88ec79d6e72ea01f7b2ee09afd0e-3024x2671.png&w=3840&q=75)
Tom Ballinger
2 years ago
Intro to Convex Query Performance![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
How do I ensure my Convex database queries are fast and efficient? When should I define an index? What is an index?
This document explains how you should think about query performance in Convex by describing a simplified model of how queries and indexes function.
![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Alex Cole
2 years ago
Backend Matters (Making Fast5 #2)![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Why does anything really need to run on the server anymore? And even if it does, do I, the developer, need to be so involved?
Yes! Even in a serverless world, the backend computing context being a real, discrete environment that you have control and influence over is not only necessary but hugely beneficial.
![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Jamie Turner
2 years ago
The platform you need, when you need it![Indy Khare's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F79a98842e44366073f00c01658ae87ce82ab2e57-829x827.jpg&w=3840&q=75)
You don’t have to worry about the platform locking you into a decision that seems convenient at first but is a headache to deal with later.
![Indy Khare's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F79a98842e44366073f00c01658ae87ce82ab2e57-829x827.jpg&w=3840&q=75)
Indy Khare
2 years ago
Local and Remote State (Making Fast5 #1)![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
While making Fast5, Convex's wordle-style multiplayer racing game, we ran into several interesting challenges. This week, let's dig into managing the combination of local and global state.
![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Jamie Turner
2 years ago
Introducing Fast5![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
At Convex, we're creating a platform for managing global state for web developers. Unsurprisingly, we've found one of the best ways to improve our platform is to actually build stuff with it!
![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Jamie Turner
2 years ago
Data Interactivity in the Serverless Future (HYTRADBOI 2022)![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
Dynamic application developers need global state management, not a database.
James (@jamesacowling) presents his talk from the HYTRADBOI 2022 database conference on how Convex is rethinking how app developers manage global state.
![James Cowling's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F0d9c8f867a3ecac0ce8efe417583dbab8ce458b3-400x400.jpg&w=3840&q=75)
James Cowling
2 years ago
Convex vs. Relational Databases![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Relational databases are powerful tools for persisting data, but using them to build interactive web apps requires a lot of work. A web app architecture built on a relational database is an entire cluster of databases, backends, caching nodes, and Pub/Sub servers. And even after you invest in all of that infrastructure you'll still need to explicitly define your database schema upfront and write cumbersome SQL queries.
At Convex we believe that web developers shouldn't have to worry about any of this. We can handle the servers, caching, and reactivity and you can focus on your product.
![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Alex Cole
2 years ago
Convex vs. Firebase![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
On Cloud Firestore, you'll have to do some acrobatics to integrate with React and listen for realtime updates. Down the road, you'll find your app full of slow loading experiences from request waterfalls and your database full of half-committed mutations.
![Alex Cole's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F2bae2b5c39ff0e1155897b4905218100291c4949-1461x1461.jpg&w=3840&q=75)
Alex Cole
2 years ago
Building reactive web apps on Convex![Sujay Jayakar's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F335db9757b2839925ac82b93a45f91ccfc3c6db7-300x300.webp&w=3840&q=75)
Sujay (@sujayakar314) walks through how easy it is to build a dynamic web app with global state on Convex. Join the Convex beta at https://convex.dev.
![Sujay Jayakar's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2F335db9757b2839925ac82b93a45f91ccfc3c6db7-300x300.webp&w=3840&q=75)
Sujay Jayakar
2 years ago
The unfulfilled promise of functional ideals on the web![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Ideas around immutability, purity, and dataflow programming are quietly saturating our technologies like Bitcoin and React. And while these early inroads are enabling exciting new ways to build large and dependable applications, there is still much to do to realize the full potential of this revolution.
![Jamie Turner's Profile image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fts10onj4%2Fproduction%2Fee80addc4a0315dc3175c4a08f64f8bc294568bd-400x400.jpg&w=3840&q=75)
Jamie Turner
2 years ago