Tutorials

Claude Sonnet is undeniably one of the best frontier models for programming and I still reach for it despite having GPT-4o and o1 inside my VS Code editor. To make it even smarter and more effective, I use the Projects feature (available on the pro plan) to manage all of the documentation and general context related to what I’m working on. By uploading text and files related to the technology I’m using, Claude becomes a genius in exactly what I want him to be a genius in. ...

Welcome to this tutorial where we will create a simple API using TypeScript and deploy it using Vercel. This guide is suitable for beginners and assumes basic familiarity with Node.js. Let’s dive in! Setting Up Your Project Create a New Directory: Start by creating a new directory for your project. Open your terminal and run: mkdir chitter-vercel This creates a directory named chitter-vercel. Initialize Your Node.js Project: Navigate into your new directory and initialize a Node.js project: ...

Slack 1. Create a new Slack channel Create a slack channel in your workspace where the notifications will be displayed (ex. “notifications”) 2. Create a Slack app Visit the Slack API webpage and “Create New App”. Give the app a name and select the Slack workspace you’re working with. 3. Configure the Slack app Select “Incoming Webhooks” and flip the “Active Incoming Webhooks” switch on. 4. Create the webhook Add New Webhook to Workspace and select the “notifications” channel you created before. ...

Instead of hardcoding Supabase interfaces or types in your TypeScript projects, you can use the Supabase CLI to generate types directly from your database tables. Make sure to add the output inside your src folder so the rest of your application can access it: supabase gen types typescript --project-id abcdefghijklmnopqrst > src/types/database.types.ts This command will generate a .types.ts file that contains a single Database interface containing all of your tables and their columns. The output looks something like this (I pulled this from the official docs): ...

As soon as a Flutter project gains traction (or I’ve convinced myself that it will eventually gain traction), I like to set up a CI/CD pipeline so I can focus more on app development and less on manually deploying all of my changes to prod. This article in particular will provide an overview of the Github workflow I typically use for my Flutter projects that use Firebase Hosting. The Basics For the simplest projects that don’t require environments, variables, or Slack notifications, the workflow is straightforward. Below is an outline of what it does: ...

I’ve recently been working on an app with my wife called “Abi’s Recipes”. The app, designed for mobile and TV, aims to be the Netflix of recipes, with a focus on beautiful images and a simple interface. We wanted to generate images for the recipes that we don’t have photos for, and we wanted to do it in a way that was fun and creative. That’s where DALL-E comes in. ...

Hey! Don’t go there! Navigation in a mobile app is a bit more involved than pushing a route here and popping a route there. Some routes should only be viewed by a user who is authenticated while others are available to the public. Some routes will only behave and display properly if the user has an active internet connection while others show static assets that never change. Is it possible to verify these requirements are met before loading each new route? With Route Guards, anything is possible. ...

If you’ve spent any amount of time developing mobile apps, you’re probably well aware of how public “private” data really is. Cloud databases like , , and protect their front gates with robust security measures like authentication keys, security rules, user roles, and field-specific restrictions. From the outside, these databases are fortresses with more than enough artillery to prevent people from seeing each other’s data. The issue however, is that the castle-keepers can see everything that gets brought into the castle. Your name. Your contact info. Your personal information. It all exists on a database that is not absolutely private and that should give you pause. Below is a screenshot from a test app I made using Google’s Firestore as a database and yeah…as the owner of the database I can peruse the user records at my leisure. ...

If your app ain’t animating, users ain’t engaging. It’s a simple law of mobile app development that gets less attention than it deserves. Users want the impression that your app is alive — a living, breathing creation that does more than respond to taps and scrolls. Dynamically changing gradients, bouncing dots, and widgets that push at their boundaries like animals in a cage all give your app a personality that users will be thinking about long after they lock their screens. ...

Displaying Videos in Flutter from a URL With the Stacked architecture In this article, I will be explaining how to display a video directly from a URL in Flutter (although any video URL will work). If you’re interested in saving videos to Cloud Storage, check out my previous article on that exact subject. Uploading Images to Cloud Storage Using Flutter If you do have videos in Cloud Storage, I’m assuming you’ll eventually want to display them. Maybe you need to show a video thumbnail on one screen and then the full video on another. Maybe you want to embed a video in a tutorial to explain how an app feature works. Whatever it is, your question is the same: How do I display my video? ...