Andrew Ford is the host of Code with Andrew Ford, a YouTube channel dedicated to teaching people how to code.

He is also a full-stack web developer and an educator living in Tauranga, New Zealand.

Latest Articles

  • Build a Full-Stack web app with Next.js - Part 6 - Storybook

    In this installment we create a Storybook for our project and start building out our Header component. I walk through some of the features of Storybook and how it can help you build your React components in isolation.

  • Build a Full-Stack web app with Next.js - Part 5 - GitHub Project

    In this tutorial video we continue planning our full-stack web app with Next.js. We create a GitHub project and start adding tickets to the project. We also start building out the first components for the project.

  • Build a Full-Stack web app with Next.js - Part 4 - DB Design

    In this video, we will be designing the database for our app. We will be using dbdiagram.io to design our database. We use DBML to define our tables and denote the relationships between them. Using the export option, we quickly create the tables in our ERD (Entity Relationship Diagram) on Supabase.

  • Build a Full-Stack web app with Next.js - Part 3 - Supabase

    This is the third video tutorial on building a full-stack Next.js with Supabase. Andrew discusses how to display a list of courses on a webpage using data from a Supabase database. He explains how to use SQL queries to retrieve data from the database and display it on the webpage and also mentions using Superbase's table editor to edit the database and provides a brief overview of plans for future development.

  • Build a Full-Stack web app with Next.js - Part 2 - Set Up

    This is the second video in the series on building a full-stack web app with Next.js. In this live stream, Andrew Ford set up Next.js, configured it for the project, installed Radix UI, created a Superbase database, and started adding routes. The project code is available on GitHub as LMS NextJS.

  • Build a Full-Stack web app with Next.js - Part 1 - Planning

    This is a transcript of my stream that went through the initial planning stages of a Next.js project, starting with brainstorming ideas on a virtual whiteboard. Wireframes were then created in Excalidraw to visualize pages like home, sign up, course listings, and course details. Key requirements around authentication, data storage, roles and permissions were mapped out. Superbase was selected to provide authentication via LinkedIn/Google login as well as for it being a Postgres database. Next.js was chosen for its React framework and Radix UI was selected for accessible, customizable UI components to speed up development.

  • More Articles…