Getting started with software composition

A basic tutorial for coding without coding

You may already be a seasoned engineer, in which case this week’s post isn’t for you. But maybe you can share it with your non-engineering friends. 😁

For the rest of us, this video is a start from zero, what’s the Terminal, how do I build and launch a simple website in under an hour kind of tutorial.

We’ll walk you through setting up a clean Mac or Windows environment and installing essential tools like Cursor, Node.js, npm, and Homebrew needed for software composition.

You’ll learn:

• How to configure your development environment from scratch.

• Setting up a Next.js project with ShadCN component library.

• Using Cursor’s AI capabilities to write and debug code effortlessly.

• Debugging common issues and leveraging documentation.

• Sharing your project using GitHub.

By the end of this video, you’ll have a fully functional project and a foundational understanding of using AI tools for software development—even if you’re not a coder. Perfect for anyone ready to explore the world of AI-powered app creation.

Also, shameless plug, the last few minutes are a demo of the SpecStory Extension for Cursor that we recently launched to help you save and share your AI composer and chat history.

For Mac Users

For Windows Users

Additional Notes

Full Cursor Chat History

• https://share.specstory.com/stories/20072845-d03c-4961-b276-167fe6eeb2ad

🔗 Links

• https://www.cursor.com/

• https://brew.sh/

• https://formulae.brew.sh/formula/node

• https://ui.shadcn.com/docs/installation/next

• https://github.com/

• https://vercel.com/

• https://specstory.com

Transcript

This is a video about SpecStory which helps you when you're doing AI-driven development using a tool called Cursor. If you haven't been doing AI-driven development and you're just getting started, this video is for you. It will help you get set up with Cursor that'll let you do software development even if you're not a software engineer or coder.

This will be a RAW video - we're not going to fast forward past the bumpy parts. We've got a clean Mac install with just a few pieces of software already installed. This should give you a sense of what it'll take to get started from scratch building software with Cursor and Spec Story.

The first step is getting Cursor installed and set up. You can go to cursor.com and download for your operating system, in this case Mac. We'll have another video for Windows in the future. Once you've got Cursor installed you can just run it like any other tool. On Mac I use command space to start applications but you can go to your Applications folder.

On first run you'll see nothing set up and it's asking for you to configure some settings. All these defaults are perfectly fine. I like to say yes and continue if you don't mind sending data back to Cursor to help improve. You can choose privacy mode if you prefer. Cursor is a paid tool, $20 a month and it's well worth it and it's really the only tool that we absolutely need to pay for. All the rest will be able to set up free alternatives.

This is what it looks like when you first get Cursor installed and authenticated before you do anything. Our first step is opening a folder - that's the way that most integrated development environments (which Cursor is) use a folder-based approach for managing projects.

Let's first create a folder. We could open an empty folder, but usually we start from a starting point. The starting point we'll choose is an application framework called Next.js. We're going to make use of what's known as a user interface component library called shadcn. The easiest starting point is to just go straight to the shadcn docs and the installation steps for Next.js.

You could prompt your way through the setup by asking ChatGPT or Claude to help you get a new project set up. But I've found that sometimes these steps can be out of date. In this particular case, I prefer to use the raw documentation at ui.shadcn.com/docs for the Next.js installation.

For running the Next.js installation, I've chosen the NPM version. You can choose any of these, but most of the output of Cursor and Claude favors the most used tools. NPM is one of, if not the most used tool for these particular things. NPM is one of a pair of tools we're going to need.

When we're building UI applications we have lots of choices, but a really good set of standard choices is to use Node. Node is a framework for building websites or interactive web applications. That's what we're going to do here.

Let's try to run the installation command. But the first thing you'll notice is that NPX is not found. So we need to get some tools set up first - at least a minimal set of tools for software development. Two of those are Node and npm. NPX is just one of the commands that's available as part of NPM.

Let's get some tools installed on our Mac. The most widely used tool for installing other development tools on a Mac is called Homebrew. Homebrew tries to make it dead simple to get started - there's just a single command line that you run to install Homebrew itself, which then opens the door to install lots of other applications.

This whole process will only work if you're set up as a Mac administrator on your laptop or desktop. If you don't know what that means, you need to Google "Mac administrator" and make sure you get your account set up properly for that.

After installing Homebrew, don't skip the next steps - we need to run each of these follow-up commands in succession. Now we should be set up so that whenever we want to, we can run the Brew command. The two things we need Brew to install for us are Node and npm - it's just one command.

If you ever get lost, you can ask ChatGPT "how do I install Node using Homebrew?" Either method they suggest is fine. They recommend first running "brew update" (though we just installed it so it should be up to date), then "brew install node". We can then verify our installation by checking the version of Node and npm.

Now that we've got these installed, let's go back to where we started - creating a new application using shadcn. Now that we've got Node and NPM installed, we should be able to run the installation command. When it asks for configuration options, all the defaults make sense, and you can just hit Enter to accept them.

When the first part completes, you can select all the defaults for shadcn. You can read about shadcn and all the options available, but we'll just accept as is. The installation creates a new directory called "hello" in your current location.

Now in Cursor, if you see the option asking if you want to install a command to run Cursor, I would recommend it. Choose to install the command named "cursor". This means you can come to your terminal and run "cursor" on any directory like the hello directory, and it'll just open Cursor straight to that directory for you.

There are two really important things we want to enable when we come into Cursor. One is the terminal - this is the same terminal we were just in, but now it's integrated into Cursor. The other thing is the AI pane over on the right-hand side, which lets us do the magic and use AI to help us write code.

At this point, you can use Cursor and ask it questions like "what command can I run to start this application?" When you use Cursor, you can add context, which means pointing to any of the files in your current project directory or other outside content. One of the simplest ways, especially when you're starting and have a tiny project, is to tell Cursor to include the entire codebase.

You can say "include codebase" to tell Cursor to look at everything here, all the files and folders, when it's trying to answer questions. When we ask about starting the application, it shows multiple commands you can use. The software development community has created four different package managers that do roughly the same thing. We'll just stick to npm for everything.

When it suggests commands, it means to run these commands inside the terminal. You can copy one of them and paste it into the terminal. The command "npm run dev" is one you'll probably end up memorizing because you run it so often.

What this does is run a web server that allows you to interact with the code of this website to see it in your browser. This server will package up all this code and turn it into a website. We can visit the URL it provides in our browser. If you want, you can hold down the command key and click the link to open your browser right there.

The whole site is exactly what the code says should be rendered. Now we can move on and create a site that we actually want, because we wanted a hello site, not one that said Next.js on it.

Now we can use Cursor to do all of the heavy lifting for us. Once we get things to this point and set up, the world is our oyster. I often like to create new composers when I'm onto a new task. You can always get back to your old composers whenever you want. A composer is just like a conversation between you and the AI acting as your engineer.

Let's make the most fun hello world page we can. It's wintertime and I like the holiday season. Let's create a page for the holidays and winter. You can get creative and make some SVGs so the page looks pretty. Don't worry if you don't know what an SVG is - it's just a type of image format that Cursor and Claude are particularly good at rendering.

We'll submit that request and let Cursor Composer do its work by suggesting changes and edits to all of our files. Sure, we could dig in and try to follow along, and there's a lot of learning to be done with that. But sometimes we just want to hit "Accept all" and see what we've got.

One of the nice things is as you make and save changes in the code - or more specifically as Cursor makes changes in the code and you hit Apply all to save them - this server that we're running (remember we started npm run dev) is still running in the background and looking for any changes to our application files. It's immediately incorporating them so that when we come back to the browser and reload, we can see those changes.

Look how fun it is! I couldn't have even imagined this a year ago but Cursor and Claude are able to write the code for a holiday site just like this. Now let's take a minute to add in some more traditional elements of web applications. This will start to get at the reason why we installed shadcn.

If we look at shadcn, it's pretty interesting because what it is is a component library. If you've been to any website or web application, you've probably seen some combination of these already on the page - everything from a simple button that looks nice and styled and works well, to a calendar control or a card where a card is just this sort of rounded rectangle layout that gets used often in modern websites and web apps.

We're going to use cards and buttons in our hello site. The easiest way to do this is to just ask Cursor to help us do that. Let's add two cards to the site that present some holiday greetings.

I'm hoping that Cursor will pick up this word "cards" and know that I mean shadcn cards. In this case it created cards using styling rather than the shadcn components. We can ask it "did you use shadcn for those cards?"

When we try to install the shadcn components, we might run into some errors. That's okay - Cursor and Claude can help us with this. We just copy the error and context, and Cursor will help us resolve it. It realizes that the components aren't installed yet.

We'll need to run some installation commands in the terminal. You have a couple of choices - the easiest of which is to stop what's already running in this terminal. The way to do that is to hold down the control key (not the command key) and hit C. That stops the npm run dev server and then we can run our installation commands.

When we get everything installed and running, we might run into eslint errors when trying to deploy. ESLint is just a tool for trying to create clean code. By default, Next.js and Vercel are configured to really try and have clean code.

We can work through these errors step by step:

• Fix the ESLint configuration

• Install any needed dependencies

• Update configuration files

• Commit and push changes

• Try deploying again

At a certain point we could decide that we need to dig in, learn more about ESLint, learn more about Vercel, do some research of our own, build up our knowledge base. But for now, we can try to have Cursor and Claude help us get past these issues by installing the right dependencies and updating the configuration.

Once we get past our configuration issues, we can deploy our site using Vercel. Vercel works very nicely with the type of application we just built, which is known as a Next.js web application.

Let's get started with Vercel. We can sign up if we haven't already - "working on personal projects" is a good option to select. We can continue with GitHub, and it will go through and authorize Vercel. We need to make sure we install Vercel for our GitHub account and give it access to our repositories.

Our first Vercel GitHub integration was literally just to do the sign into Vercel. That second integration, the install, is what was needed for Vercel to connect to our repositories. We can see that hello repository that we just updated.

We can hit the import button here. Often defaults are your friend, especially when you're working with a Next.js application and Vercel. Those work very well together. Hit the deploy button and Vercel will take everything that we've done, all that code and package it up.

After deployment completes, there are a couple of different URLs. One that we can use for working and commenting on this particular deployment, and one that we can share with the world. The one we can share with the world is what we care about most - that's what the little global icon indicates.

When we click on it, we can see our application up and running. We get a Vercel toolbar and some extra accompaniments because we're logged into Vercel. But if we share this with somebody else, which we can simulate by opening an incognito window, they're just going to see our application, our page - it's going to work, and they're going to have a happy holiday.

Now that we've got our happy holiday site all built, let's learn about what Spec Story can do to help with this flow. We can go to specstory.com - we can see this Cursor extension is exactly what we need.

To install Spec Story directly into Cursor instead of VS Code, you actually have to go through Cursor. Go to the extension marketplace icon up in the top left. Then we can search for Spec Story and install it.

Once we've got Spec Story installed, there are two big things we can do with it: save the entire chat history (not just one conversation, but all composer sessions and chats we've had) or share these out. Spec Story makes it really easy to share these with others.

Let's start with saving. Both commands are run from the command palette inside Cursor. You can get to the command palette a couple of different ways - you can search help for it and see View command palette, or use Shift command P as the keystroke.

If we just type Spec Story in the command palette, we can see our two commands. The first one is to save the composer history. Saving the composer history creates a new markdown file which is then opened for preview. You can close that preview if you don't like it and just want to look through the markdown file.

The file shows all of the history I've had for building out this entire application. All the chats and composer sessions are saved in this file. If we want to really save this, we can hit command S and save it as "Spec Story History.md".

We can even reference this file and ask questions about it, like "Give me a brief summary of everything I did in this project." It helps us remember everything we had to do to get through this development.

If we want to completely unlock this history for others, we can go back to the command palette and use "spec story share composer and chat history." We see down on the left that it's published out this history for me to share with others. When we open it, we get a nice clean view of everything that happened from start to finish in the AI chat history.

It's a great way to share the story of how you created your application.