The post has been translated automatically. Original language: Russian
Cursor + React + Go: how to create modern products using AI and automate the entire development cycle
A few years ago, creating a SaaS product required a team of a frontend developer, a backend developer, a DevOps engineer, a QA engineer, and a technical supervisor.
Today, a significant part of this work can be automated using AI tools. One of the most popular solutions is Cursor, an AI editor that allows you to work with the codebase at the project—wide level.
However, the real performance boost does not come when AI writes individual functions, but when the entire development is built around an AI-first approach.
Let's look at the full cycle of creating a product in React and Go using Cursor, modern language models and GitHub Actions.
Stage 1. Project preparation
Most developers make a mistake even before writing the first line of code.
They open Cursor and write:
"Create a CRM system on React and Go."
They receive several thousand lines of code and a project that cannot be maintained in a month.
The right approach starts with design.
Creating a document requirements.md:
# CRM System
## Frontend
- React
- TypeScript
- Vite
- TailwindCSS
- React Query
- Zustand
## Backend
- Go 1.24
- Gin
- PostgreSQL
- Redis
## Authentication
- JWT
- Refresh Tokens
## Architecture
- Clean Architecture
- Repository Pattern
- Feature Based Frontend Structure
After that, Cursor gets a lot more context.
Step 2. Configuring Cursor Rules
Most experienced teams use uniform rules for AI.
Creating a file:
.cursor/rules/backend.mdc
Content:
You are a senior Go developer.
Rules:
- Use Clean Architecture
- Follow SOLID principles
- Never use global variables
- Always return typed errors
- Add unit tests
- Use context.Context
- Use dependency injection
- Write production-ready code
For React:
You are a senior React engineer.
Rules:
- Use TypeScript strict mode
- No any types
- Use functional components
- Use React Query for API calls
- Use TailwindCSS
- Separate UI and business logic
- Optimize re-renders
After that, Cursor starts producing significantly better code.
Stage 3. Backend Generation on Go
Instead of:
Create a backend
It is better to use detailed tasks.
For example:
Create a user module.
Requirements:
- Clean Architecture
- PostgreSQL
- JWT
- CRUD operations
- Unit tests
- Swagger comments
The result is a structure:
internal/
├── domain
├── repository
├── service
├── handler
├── middleware
└── dto
Example of a domain model:
package domain
type User struct {
ID string
Email string
Password string
CreatedAt time.Time
}
The Repository:
type UserRepository interface {
Create(ctx context.Context, user *User) error
FindByEmail(ctx context.Context, email string) (*User, error)
}
Service:
type UserService struct {
repo UserRepository
}
func (s *UserService) Register(
ctx context.Context,
email string,
password string,
) error {
hashed, err := bcrypt.GenerateFromPassword(
[]byte(password),
bcrypt.DefaultCost,
)
if err != nil {
return err
}
return s.repo.Create(ctx, &User{
Email: email,
Password: string(hashed),
})
}
Stage 4. Generation of the React Frontend
Now you can go to the interface.
Prompt:
Create a customer page.
Use it:
- React
- TypeScript
- React Query
- TailwindCSS
Add:
- the table
- search
- pagination
- download status
- error handling
Data request example:
export const useCustomers = () => {
return useQuery({
queryKey: ['customers'],
queryFn: getCustomers,
});
};
Component:
export function CustomerTable() {
const { data, isLoading } = useCustomers();
if (isLoading) {
return <div>Loading...</div>;
}
return (
<table>
{data?.map(customer => (
<tr key={customer.id}>
<td>{customer.name}</td>
</tr>
))}
</table>
);
}
Stage 5. Using AI for Code Review
One of the strongest features of Cursor.
Select the Pull Request and write:
Conduct a senior-level code review.
Check:
- security
- performance
- scalability
- readability
- possible race conditions
- violations of SOLID
AI often finds errors that the developer misses.
Stage 6. Automatic testing
AI generates tests perfectly.
Request example:
Write unit tests
for the UserService.
Cover all edge cases.
Result:
func TestRegister(t *testing.T) {
repo := new(MockRepository)
service := UserService{
repo: repo,
}
err := service.Register(
context.Background(),
"testtest.com",
"password",
)
assert.NoError(t, err)
}
Stage 7. Docker
The next stage is containerization.
Dockerfile for Go:
FROM golang:1.24 AS builder
WORKDIR /app
COPY . .
RUN go build -o server .
FROM alpine
COPY --from=builder /app/server .
CMD ["./server"]
Frontend:
FROM node:22
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD ["npm","run","preview"]
Stage 8. GitHub Actions CI/CD
After each push, you can automatically:
- run tests;
- checking the linter;
- building a Docker image;
- upload to the server.
Creating a file:
.github/workflows/backend.yml
name: Backend CI
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-go@v5
with:
go-version: "1.24"
- run: go test ./...
- run: go build ./...
Stage 9. Automatic Docker Build
You can immediately publish images to the GitHub Container Registry.
- name: Login
uses: docker/login-action@v3
with:
registry: ghcr.io
username: $
password: $
- name: Build Image
run: |
docker build -t ghcr.io/company/api:latest .
Stage 10. Automatic deployment to the server
The simplest option is a VPS.
GitHub Actions can connect via SSH.
- name: Deploy
uses: appleboy/ssh-action@v1.0.3
with:
host: $
username: ubuntu
key: $
script: |
cd app
docker compose pull
docker compose up -d
After each merge in the main, the update occurs automatically.
Without manually connecting to the server.
Stage 11. Fully AI-Driven Workflow
Today, the typical process looks like this:
- The Product Manager writes the task.
- Cursor creates the code.
- AI writes tests.
- AI conducts a code review.
- GitHub Actions launches CI.
- Docker collects containers.
- GitHub Actions performs a deployment.
- Users receive an update.
What used to take a few days of team work can now be implemented in a few hours.
Results
AI does not replace developers.
He's changing their role.
Previously, a specialist who wrote code quickly was appreciated.
Today, an engineer who knows how to:
- design the architecture;
- correctly formulate tasks for AI;
- quality control;
- build automated development processes.
Cursor, React, Go, Docker, and GitHub Actions allow a single engineer to create startup-level products much faster than was possible a few years ago.
Exactly Therefore, AI-first development is gradually becoming the new industry standard.
Cursor + React + Go: как создавать современные продукты с помощью AI и автоматизировать весь цикл разработки
Еще несколько лет назад создание SaaS-продукта требовало команды из frontend-разработчика, backend-разработчика, DevOps-инженера, QA-инженера и технического руководителя.
Сегодня значительную часть этой работы можно автоматизировать с помощью AI-инструментов. Одним из самых популярных решений стал Cursor — AI-редактор, который позволяет работать с кодовой базой на уровне всего проекта.
Однако настоящий прирост производительности появляется не тогда, когда AI пишет отдельные функции, а когда вся разработка строится вокруг AI-first подхода.
Рассмотрим полный цикл создания продукта на React и Go с использованием Cursor, современных языковых моделей и GitHub Actions.
Этап 1. Подготовка проекта
Большинство разработчиков совершают ошибку еще до написания первой строки кода.
Они открывают Cursor и пишут:
"Создай CRM систему на React и Go."
Получают несколько тысяч строк кода и проект, который через месяц невозможно поддерживать.
Правильный подход начинается с проектирования.
Создаем документ requirements.md:
# CRM System
## Frontend
- React
- TypeScript
- Vite
- TailwindCSS
- React Query
- Zustand
## Backend
- Go 1.24
- Gin
- PostgreSQL
- Redis
## Authentication
- JWT
- Refresh Tokens
## Architecture
- Clean Architecture
- Repository Pattern
- Feature Based Frontend Structure
После этого Cursor получает гораздо больше контекста.
Этап 2. Настройка Cursor Rules
Большинство опытных команд используют единые правила для AI.
Создаем файл:
.cursor/rules/backend.mdc
Содержимое:
You are a senior Go developer.
Rules:
- Use Clean Architecture
- Follow SOLID principles
- Never use global variables
- Always return typed errors
- Add unit tests
- Use context.Context
- Use dependency injection
- Write production-ready code
Для React:
You are a senior React engineer.
Rules:
- Use TypeScript strict mode
- No any types
- Use functional components
- Use React Query for API calls
- Use TailwindCSS
- Separate UI and business logic
- Optimize re-renders
После этого Cursor начинает выдавать значительно более качественный код.
Этап 3. Генерация Backend на Go
Вместо:
Создай backend
Лучше использовать детальные задачи.
Например:
Создай модуль пользователей.
Требования:
- Clean Architecture
- PostgreSQL
- JWT
- CRUD операции
- Unit тесты
- Swagger комментарии
В результате получится структура:
internal/
├── domain
├── repository
├── service
├── handler
├── middleware
└── dto
Пример доменной модели:
package domain
type User struct {
ID string
Email string
Password string
CreatedAt time.Time
}
Репозиторий:
type UserRepository interface {
Create(ctx context.Context, user *User) error
FindByEmail(ctx context.Context, email string) (*User, error)
}
Сервис:
type UserService struct {
repo UserRepository
}
func (s *UserService) Register(
ctx context.Context,
email string,
password string,
) error {
hashed, err := bcrypt.GenerateFromPassword(
[]byte(password),
bcrypt.DefaultCost,
)
if err != nil {
return err
}
return s.repo.Create(ctx, &User{
Email: email,
Password: string(hashed),
})
}
Этап 4. Генерация React Frontend
Теперь можно перейти к интерфейсу.
Промпт:
Создай страницу клиентов.
Используй:
- React
- TypeScript
- React Query
- TailwindCSS
Добавь:
- таблицу
- поиск
- пагинацию
- состояние загрузки
- обработку ошибок
Пример запроса данных:
export const useCustomers = () => {
return useQuery({
queryKey: ['customers'],
queryFn: getCustomers,
});
};
Компонент:
export function CustomerTable() {
const { data, isLoading } = useCustomers();
if (isLoading) {
return <div>Loading...</div>;
}
return (
<table>
{data?.map(customer => (
<tr key={customer.id}>
<td>{customer.name}</td>
</tr>
))}
</table>
);
}
Этап 5. Использование AI для Code Review
Одна из самых сильных возможностей Cursor.
Выделяем Pull Request и пишем:
Проведи senior-level code review.
Проверь:
- безопасность
- производительность
- масштабируемость
- читаемость
- возможные race conditions
- нарушения SOLID
Зачастую AI находит ошибки, которые разработчик пропускает.
Этап 6. Автоматическое тестирование
AI отлично генерирует тесты.
Пример запроса:
Напиши unit тесты
для UserService.
Покрой все edge cases.
Результат:
func TestRegister(t *testing.T) {
repo := new(MockRepository)
service := UserService{
repo: repo,
}
err := service.Register(
context.Background(),
"testtest.com",
"password",
)
assert.NoError(t, err)
}
Этап 7. Docker
Следующий этап — контейнеризация.
Dockerfile для Go:
FROM golang:1.24 AS builder
WORKDIR /app
COPY . .
RUN go build -o server .
FROM alpine
COPY --from=builder /app/server .
CMD ["./server"]
Frontend:
FROM node:22
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD ["npm","run","preview"]
Этап 8. GitHub Actions CI/CD
После каждого push можно автоматически:
- запускать тесты;
- проверять линтер;
- собирать Docker-образ;
- деплоить на сервер.
Создаем файл:
.github/workflows/backend.yml
name: Backend CI
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-go@v5
with:
go-version: "1.24"
- run: go test ./...
- run: go build ./...
Этап 9. Автоматический Docker Build
Можно сразу публиковать образы в GitHub Container Registry.
- name: Login
uses: docker/login-action@v3
with:
registry: ghcr.io
username: $
password: $
- name: Build Image
run: |
docker build -t ghcr.io/company/api:latest .
Этап 10. Автоматический деплой на сервер
Самый простой вариант — VPS.
GitHub Actions может подключаться по SSH.
- name: Deploy
uses: appleboy/ssh-action@v1.0.3
with:
host: $
username: ubuntu
key: $
script: |
cd app
docker compose pull
docker compose up -d
После каждого merge в main обновление происходит автоматически.
Без ручного подключения к серверу.
Этап 11. Полностью AI-Driven Workflow
Сегодня типичный процесс выглядит так:
- Product Manager пишет задачу.
- Cursor создает код.
- AI пишет тесты.
- AI проводит code review.
- GitHub Actions запускает CI.
- Docker собирает контейнеры.
- GitHub Actions выполняет деплой.
- Пользователи получают обновление.
То, что раньше занимало несколько дней работы команды, сегодня можно реализовать за несколько часов.
Итоги
AI не заменяет разработчиков.
Он меняет их роль.
Раньше ценился специалист, который быстро писал код.
Сегодня ценится инженер, который умеет:
- проектировать архитектуру;
- грамотно формулировать задачи для AI;
- контролировать качество;
- строить автоматизированные процессы разработки.
Cursor, React, Go, Docker и GitHub Actions позволяют одному инженеру создавать продукты уровня стартапа значительно быстрее, чем это было возможно еще несколько лет назад.
Именно поэтому AI-first разработка постепенно становится новым стандартом индустрии.
Share
