Building a WeChat Mini‑Program Pet Adoption System in 20 Minutes with Cursor AI

Project Overview

The author tested Cursor + Opus 4.7’s AI programming capability and found it extremely powerful, claiming that future development will become faster, cheaper, and free of overtime. Using this capability, a full pet‑adoption solution is generated in about 20 minutes.

Business Features

Mini‑program (user side)

Home & carousel – displays banners and guides users to pets and activities.

Category & list – filters pets by category and paginates the adoptable list.

Pet details – shows image‑rich information for a single pet.

User authentication – registration and login using JWT (Bearer token).

Adoption request – users can submit a request for a chosen pet.

My requests – view the status flow of submitted requests, including audit results.

Favorites – add or remove pets from a personal collection.

Comments – public comment list; logged‑in users can post comments.

Announcements – public list and detail of platform notices.

Adoption feedback – adopters can upload text and images after a successful adoption.

Profile – view and update personal information.

Admin backend (operations side)

Dashboard – operational metrics and charts (pet distribution, monthly adoption trends, latest adoptions).

Admin accounts – management of backend administrator credentials.

Mini‑program users – query and manage registered users.

Pet categories – CRUD for pet classification.

Pet management – maintain pet records, status, and images.

Adoption review – paginate adoption applications and approve or reject them.

Announcement management – publish and maintain platform notices.

Comment management – view user comments and delete inappropriate content.

Carousel management – configure home and activity banners.

Adoption feedback management – audit and view post‑adoption feedback submitted by users.

Common Capabilities

Unified file upload : both admin and user sides can upload files (JWT required); uploaded files are stored under /uploads/** and served statically, with sub‑directories for pet images, banners, announcements, avatars, feedback images, etc.

Unified response body : backend wraps all responses in a standard JSON object (e.g., R) with pagination support for easy multi‑client integration.

Technical Architecture

Overall Structure

All clients share a single backend service with distinct API prefixes: /api/admin/** – admin portal APIs. /api/wx/** – WeChat mini‑program APIs. /api/common/** – shared utilities such as file upload.

Security Model

JWT is used to differentiate roles (admin vs. mini‑program user). JwtInterceptor validates tokens, applies role‑based access control, and defines a whitelist for public endpoints (e.g., pet list, announcements, login, registration).

Backend ( server/ )

Java 17 – runtime.

Spring Boot 4.x – web container and auto‑configuration.

Spring WebMVC – REST controllers and interceptors.

MyBatis Spring Boot Starter – SQL mapping via mapper/*.xml.

MySQL Connector/J – JDBC driver.

PageHelper – pagination plugin.

JJWT – JWT creation and parsing.

Hutool – utilities for JSON serialization and other helpers.

Lombok – reduces boilerplate in entities and configuration classes.

Layered convention: controller → service → mapper / entity, with DTOs for input parameters, global exception handling, and CORS configuration to facilitate front‑back separation.

Admin Frontend ( client/ )

Vue 3 – view layer.

Vite – development and build tooling.

Vue Router – routing and login guard.

Pinia – state management for admin token and user info.

Element Plus – UI components for the admin dashboard.

Axios – HTTP calls to backend APIs.

ECharts / vue‑echarts – charts for operational dashboards.

WeChat Mini‑program ( weixin/miniprogram/ )

TypeScript + native mini‑program framework – modular request wrapper calls the same /api/wx/** backend.

Tab navigation: Home, Category, My Requests, Profile; secondary pages include pet list/detail, adoption request, login/registration, favorites, announcements, feedback, etc.

Running & Configuration Tips (Brief)

MySQL : create a database (e.g., db_pet_adopt) and ensure the name, username, and password match the values in application.yml.

Backend port : default is 8080; configure the admin portal’s Axios base URL to point to this service (via Vite proxy or environment settings).

File upload : set file.upload-dir to a writable server directory (example: D:/uploads/) and map it to the static resource path.

Mini‑program : in the WeChat DevTools, configure legal domains and the backend Base URL to match the config file.

Repository Layout

sys4/
├── server/   # Spring Boot backend
├── client/   # Vue3 admin UI
└── weixin/   # WeChat mini‑program source

The document describes the current repository’s implementation capabilities and architectural division; the exact table structures follow the MyBatis mappers and database scripts.