aider is a powerful open source AI coding assistant that runs in your terminal.

Claude 3.5 Sonnet is currently the most powerful LLM for coding.

In this video, we use aider with Claude 3.5 Sonnet to develop a REST API in Java and a user interface (UI) in Next.js that uses that API. aider and Claude do all the work for us – we never write or edit code!

Not only do we generate a fully functional full-stack app, but aider also generates our unit tests, READMEs, and OpenAPI and Swagger API documentation.

We accomplish all this with the help of 15 very simple prompts, which you will find below.

——————————————————————————–
Setting up the tutorial
(step-by-step instructions can be found in the video below the description)
——————————————————————————–

1. Create an Anthropic API key (save it – you will need it to configure the helper below): https://console.anthropic.com/settings/keys
2. Install Python 3.10 or higher: https://wiki.python.org/moin/BeginnersGuide/Download
3. Install and configure Aider: https://aider.chat/docs/install.html
4. Install the extension pack for Java in VS Code: https://marketplace.visualstudio.com/items?itemNamevscjava.vscode-java-pack
5. Install Node.js: https://nodejs.org/en/download/prebuilt-installer
6. Create two empty folders and open each one in VS Code, one for the API code and another for the UI code:
– Task API
– Tasks user interface

————————
aider prompts
————————

Task API:

Generate the first project for a task management REST API. Users should be able to add, update, and delete tasks, as well as get all tasks or a task by its ID. This is a Java project using Spring Boot 3.2 and Maven. Generate the Maven POM file and the required core Java interfaces and classes. Do not try to implement methods, but add comments as placeholders describing what needs to be implemented.

Configure and run this project so I don't have to stop and start the app after code updates

Add appropriate entries to .gitignore based on the contents of this project

Implement all functions for creating tasks

Implement Get All tasks

Implement all remaining controller endpoints, including services and repos

Implement unit tests for the TaskService UpdateTask method

Add dependencies for OpenAPI documents

Create a README file for this project in Markdown format. Specify what this app does, what major technologies are used, how the project is structured, what the main components are and what their roles and relationships are. Also describe how to build and run this app.

Update the API to allow access from http://localhost:3000/.

Update .gitignore to ignore files in the root project directory that begin with "Testing".

Tasks UI:

/web http://localhost:8080/v3/api-docs

Create a simple Next.js UI that allows me to call these Task API endpoints defined in the OpenAI spec I just shared with you. Let's start by simply creating new tasks and viewing all the tasks. Create any artifacts needed to install dependencies, and build and run this app.

I want this app to call the Task API running on the localhost on port 8080. Add any necessary security fixes to enable this, such as CORS (Cross-Origin Resource Sharing).

Update the UI to allow the user to perform all remaining Task API functions.

Let's apply a modern dark design

️ Stay up to date with the AI news impacting software development!

Subscribe to our bi-weekly newsletter “Programming the Future with AI” and get the latest insights, tips and trends on AI and programming directly to your inbox.

Subscribe here: https://coding-the-future-with-ai.ck.page/315a88776d

00:00 Introduction – Helfer and Claude 3.5
01:57 Let aider generate the REST API project
03:37 TIP: Give the helper only one task at a time
04:27 Starting the API
05:11 aider implements Create Task endpoint
06:09 aider implements the “Get all tasks” endpoint
06:46 aider implements remaining endpoints
07:50 aider implements unit tests for us
08:31 aider adds OpenAPI docs for API
09:32 aider creates project README file
10:30 aider creates Next.js UI for Task API
11:47 Building and running the Next.js UI
13:09 aider fixes CORS issue in task UI
13:58 aider solves CORS problem for REST API
14:49 aider implements remaining task functions
15:57 aider applies dark theme to the user interface

Please take the opportunity to connect with your friends and family and share this video with them if you find it useful.