> ## Content Index
> Fetch the complete content index at: https://www.philmorton.co/llms.txt
> Use this file to discover other available public pages before exploring further.

# Building your first side project with AI, a step-by-step guide
- URL: https://www.philmorton.co/building-your-first-side-project-with-ai-step-by-step-guide-for-non-technical-ux-people/
- Published: 2026-09-16T09:50:09.000Z
- Updated: 2026-09-16T09:50:08.000Z
- Description: A walkthrough for non-technical UX people.
- Author: Phil Morton
- Tags: AI, Software engineering

In my last newsletter, I explained why [a side project is the fastest way to upskill in the age of AI](https://www.philmorton.co/a-side-project-is-the-fastest-way-to-upskill-in-the-age-of-ai/).

This week, I’m going to walk you through how to get started with your first side project.

Below is a simple tutorial for non-technical people, assuming no prior knowledge of code or how software gets made. This is just to get you started and comfortable building a product for the first time. It’s deliberately not as sophisticated as the setup you might get to once you have a few projects under your belt, or the workflow you might have on a commercial project.

To follow along, you’ll need:

- **An AI coding agent** (Claude Code, ChatGPT Codex or similar), available with the $20/month plans.
- **Sufficient permissions on your computer** (you may struggle if your work laptop is very locked down).

Let’s get started.

## 1\. Have an idea

First, we need to know what to build. For a first project, **don’t be too ambitious**. We’re not creating your dream side hustle business (yet!), just something that’s complex enough to learn from but small enough that you’re not working on it forever.

Think about **a tiny problem in your life**, something you’re curious about, or even just look through what free APIs there are out there which you could build on top of.

For this tutorial, we’ll be creating a simple dashboard that will tell us what sources of fuel (wind, gas, solar, etc.) are powering the UK electricity grid at any given time. I’ve chosen this example because I know there’s a public API we can build on top of.

## 2\. Set up your working environment

Before we can start making something, we need to get a place to work and get our tools ready.

First we’re going to set up our **code repository**. This gives our project somewhere to live and provides version control, which is an essential component in software development. [GitHub](https://github.com/?ref=philmorton.co) is the most popular platform for this. Start by **signing up for a free account**.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/image.png)

Sign up for a free GitHub account

**Then open the ChatGPT or Claude app** and go to the coding mode. You could use these tools on the command line/in the terminal, but for someone getting started, this is the easiest way.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-08.21.07.png)

The Claude Mac app in Code mode

Paste the following into your AI assistant:

```
I'm starting a new software development project, and I'll be asking you to help me write all the code and guide me through it.

I am following this tutorial: https://www.philmorton.co/building-your-first-side-project-with-ai-step-by-step-guide-for-non-technical-ux-people

I have no technical background or experience with coding. Assume no knowledge when talking to me. Explain things clearly and concisely.

Confirm with me that I've signed up to GitHub, then guide me through the following, step-by-step:

1. Set up a new private repository on GitHub
2. Get the repo on my computer (suggest an appropriate place to locate it such as ~/Code)
3. Explain what we've done and how it works

```

At the end of this step, you’ll have a folder on your computer with version control set up, which can be synced to GitHub. Now we can start the real work.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-08.36.39.png)

Now we have our code repository set up

## 3\. Research and shape the brief

Now we have a place to store our work, we need to do some research. Just like when you’re doing a project at work, **we need to do a bit of discovery first**.

We need to **work out what’s possible and then shape the product and technical approach around it**. Paste this (with your own idea swapped in) into Claude Code/Codex/etc. in the same conversation:

```
Before we start writing any code, I would like you to conduct some research and help me define the brief for the project we're working on.

My idea is:

A simple dashboard that will tell me what sources of fuel (wind, gas, solar, etc.) are powering the UK electricity grid at any given time.

Please do the following:

1. Ask me questions to clarify my brief further.
2. Research what this would need to work: any data sources, free public APIs, libraries or other technologies. Prefer free options that need no account or sign-up. Don't rely on what you already know, as things get retired or start charging. Check the current documentation, and if we're relying on an outside source of data, try it out and show me some real results from it before we commit to using it.
3. Suggest a tech stack to use. This will run locally on my machine, so no hosting, domains or accounts to set up. This is just a simple learning project.
4. Check if any dependencies you need (e.g. Node) are installed on my machine. If not, make a list of what we'll need and be prepared to talk me through how to work through this.
5. Keep discussing with me until we have an agreed project scope and tech stack, documented in a CLAUDE.md file (or AGENTS.md if I'm using Codex). Encourage me to keep the scope small, at least for the first version.
6. Once we've agreed it, commit and push that to main, then explain to me what committing and pushing means and what just happened. Do not proceed to implementation or planning implementation yet.

Remember, I have no technical background or experience with coding. Assume no knowledge when talking to me. Explain things clearly and concisely. Hold my hand through this.

```

This simple process of **shaping the brief will save you time later** and help you define exactly what you want and how to build it.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-08.40.33.png)

Your coding agent will ask you some clarifying questions

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-08.45.04.png)

Claude’s written CLAUDE.md, which for this project acts as our source of truth for what we’re building. For ChatGPT Codex, this will be AGENTS.md.

## 4\. Build it

Now for the fun part. You’ve got somewhere to put the code, a brief and an agreed way of building it, so you can start coding.

The temptation here is to ask your AI to build the whole thing in one go (and we could since what we’re doing is so simple), but since this is a learning exercise, **we’ll get more out of having it build it in small pieces** instead.

Paste this in next:

```
Let's start building, following the scope we agreed in CLAUDE.md.

Enter plan mode, then create a plan to implement what we agreed to build. 

Once we have agreed the plan, you should work in small steps rather than building the whole thing at once. For each step:

1. Tell me what you're about to do and why, before you do it
2. Make the change
3. Explain what you did in plain English, including any new jargon
4. Tell me how to see it working with my own eyes
5. Commit and push the change to main with a clear message

Stop after each step and wait for me to confirm before you move on.

```

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-08.51.41.png)

Your AI will create a plan. Always ask it to double check it!

Whenever it says something you don’t understand, just ask. I do this constantly:

```
Please can you explain what you just did, in plain English, in less than 100 words?
```

At some point it’ll tell you to open something like `http://localhost` in your browser. That’s your app, running on your own machine.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-09.00.54.png)

Claude building step-by-step as we’ve asked. You can preview the result in the Claude app.

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-09.08.56.png)

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2026/09/Screenshot-2026-09-13-at-09.19.04.png)

## What to do next

With an example this simple, **you could have easily used Lovable or a similar tool, but the point is to get exposure to working with a more powerful and flexible tool** like Claude Code or ChatGPT Codex. These tools have a much higher ceiling so that you can build much more sophisticated things once your confidence increases.

So you’ve built your first version of your first side project. What does the next level of sophistication look like?

- **Break work down into issues.** Everything we’ve done has been in a single conversation. When you work on something more substantial, you’ll need to work across multiple sessions because otherwise you’ll run out of the context window. Each conversation starts with a zero knowledge of your project beyond what is in CLAUDE.md, so you need to manage the long-term memory and planning of the project. For this, I use GitHub’s issues and projects.
- **Establish a repeatable workflow.** If you’re going to be working in multiple conversations as I suggest above, you don’t want to keep repeating the same instructions. Both Claude Code and Codex let you save instructions as skills – little reusable instructions for things you do often. I gave a brief outline of this in [my walkthrough of how I built Pegs Out](https://www.philmorton.co/how-i-built-pegs-out-my-first-ios-app/).
- **Use a design system.** As you know, if you’re just making up components as you go along, you’re going to rack up enormous design and tech debt which will bite you later once you want to change something. Using an off-the-shelf coded design system like [shadcn](https://ui.shadcn.com/?ref=philmorton.co) will allow you to build a complex app sanely.
- **Integrate third-party infrastructure.** There are a lot of pieces of an app where it makes more sense to use a third-party service rather than re-invent something yourself. For web apps, that’s things like [Vercel](https://vercel.com/?ref=philmorton.co) for hosting, [Supabase](https://supabase.com/?ref=philmorton.co) for authentication and databases, [PostHog](https://posthog.com/?ref=philmorton.co) for analytics, [Resend](https://resend.com/?ref=philmorton.co) for email and so on. These services almost always have a generous free tier you can use for a side project.

None of that matters yet, though. **First, you need to overcome the biggest barrier: just getting started.** Pick something small, spend an evening on it and see how far you get. I know this is a little overwhelming and intimidating for a lot of people, but I promise you that the reward of seeing an idea come to life is worth it!

![](https://storage.ghost.io/c/32/f8/32f8d7f6-bab3-4cc4-8608-ddbeeef397cc/content/images/2025/03/IMG_1179.jpeg) 

## Sign up for Desk Notes

My free, weekly(ish) newsletter where I share insights about product design, research and leadership.

Subscribe 

Email sent! Check your inbox to complete your signup. 

Check your email for the confirmation link (might end up in spam/junk).