How to get free YouTube subscribers, likes and views?
Get Free YouTube Subscribers, Views and Likes

Aider and Claude 3.5: Develop a Full-stack App Without Writing ANY Code!

Follow
Coding the Future With AI

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

Claude 3.5 Sonnet is the most capable LLM available for coding right now.

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 consumes this API. aider and Claude do all the work for us we never write or edit any code!

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

We do all this with 15 very simple prompts, which you'll find below.


✅Tutorial setup
(see video below the description for a stepbystep guide)


1. Create Anthropic API key (save this you'll need it to configure aider below): https://console.anthropic.com/setting...
2. Install Python 3.10 or later: https://wiki.python.org/moin/Beginner...
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/...
5. Install Node.js: https://nodejs.org/en/download/prebui...
6. Create 2 empty folders and open each in VS Code, one for the API code and another for the UI code:
taskapi
taskui


aider Prompts


taskapi:

Generate the initial 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 based on its ID. This is a Java project that uses Spring Boot 3.2 and Maven. Generate the Maven POM file, as well as the core Java interfaces and classes required. Do not attempt to implement methods, but instead insert comments as placeholders that describe what needs to be implemented.

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

Add appropriate entries to .gitignore based on this project's contents

Implement all functionality 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 docs

Create a README in markdown format for this project. Include what this app does, the major technologies used, the project's structure, the main components and their roles andrelationships. Also, describe how to build and run this app.

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

update `.gitignore` to ignore files in the root project directory that begin with testing

taskui:

/web http://localhost:8080/v3/apidocs

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

I want this app to call the Task API running on localhost at port 8080. Add any security updates, such as CORS (CrossOrigin Resource Sharing), required to allow this.

update the UI to allow the user to perform all remaining Task API functions

let's apply a modern dark theme

✉ Keep Up with the AI News Impacting Software Engineering!

Subscribe to our "Coding the Future With AI" biweekly newsletter and get the latest insights, tips, and trends in AI and coding delivered straight to your inbox.

Subscribe here: https://codingthefuturewithai.ck....

00:00 Intro aider and Claude 3.5
01:57 Let aider Generate the REST API Project
03:37 TIP: Give aider One Task at a Time
04:27 Starting the api
05:11 aider Implements Create Task Endpoint
06:09 aider Implements 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 Resolves CORS Issue in Task UI
13:58 aider Resolves CORS Issue for REST API
14:49 aider Implements Remaining Task Features
15:57 aider Applies Dark Theme to UI

posted by Rumburkau