Course 6: Full-Stack AI-Assisted Development

I need to set up a development environment on [Windows/Mac]. I need to install: Go 1.22 or later, Node.js 20 LTS, Git, and VS Code. Give me step-by-step instructions for my operating system, including how to verify each installation works. After installation, I should be able to run: go version, node --version, npm --version, git --version — and see version numbers for all four.

I’m starting a new full-stack web application. Create the initial project structure with a Go backend and React frontend. The project should be called “my-staff-app” with this structure:

• Root directory: my-staff-app/
• Go module initialized as “my-staff-app” in the root
• Backend entry point at cmd/server/main.go
• Internal packages directory at internal/
• React app (Vite + TypeScript) in web/ subdirectory
• Data directory at data/ for JSON seed files

Give me the exact terminal commands to create this structure and initialize both the Go module and the React app. Use Vite with the React-TypeScript template.

Create a Go HTTP server in cmd/server/main.go that:

• Starts on port 8080
• Uses only the Go standard library (net/http), no frameworks
• Has a health check endpoint at GET /api/v1/health that returns {"status": "ok"}
• Uses Go 1.22 ServeMux pattern matching (method + path)
• Logs the server start address to stdout
• Accepts a -port flag to change the port
• Accepts a -dev flag for development mode

Now create a separate router file at internal/api/router.go. Move the route registration into a SetupRouter function that returns an *http.ServeMux. Also create helper functions writeJSON(w, status, data) and writeError(w, status, message) in the same package. Keep the health endpoint. The main.go should call api.SetupRouter() instead of defining routes directly.

Add a new endpoint GET /api/v1/items that returns a hardcoded JSON array of 5 items. Each item should have: id (string), title (string), status (string: “active” or “pending”), and priority (string: “high”, “medium”, “low”). Make the items relevant to a military unit — things like “Complete range safety brief” or “Submit PFT scores.”

Create a Go interface in internal/data/store.go for a DataStore that manages items for a military unit application. The interface should have these methods:

• ListItems() — returns all items
• GetItem(id string) — returns one item by ID
• CreateItem(item) — adds a new item
• UpdateItem(id string, updates) — modifies an existing item

Also define the Item struct with fields: ID, Title, Description, Status, Priority, AssignedTo, CreatedAt. Use proper JSON tags. Then implement a JSONStore that reads from and writes to a JSON file in the data/ directory.

Create a JSON seed file at data/items.json with 20 realistic items for a military training unit. Include a mix of statuses (active, pending, completed) and priorities (high, medium, low). Items should be things like equipment checks, training events, qualification deadlines, and admin tasks. Use military formatting for dates and descriptions.

Update cmd/server/main.go to:

• Load the JSONStore from the data/ directory on startup
• Pass the store to the router/handlers
• Replace the hardcoded items endpoint with one that reads from the store
• Add a GET /api/v1/items/{id} endpoint that returns a single item

I have a React app created with Vite in my web/ directory. I need to:

• Install and configure Tailwind CSS for styling
• Set up a Vite proxy so /api requests forward to my Go server on port 8080
• Create a simple API client at web/src/lib/api.ts that has a function to fetch items from /api/v1/items
• Replace the default App.tsx with a clean starting point that shows “My Staff App” as the heading

Give me the exact commands and file contents. Use Tailwind CSS v3 with the default config.

Create a React component at web/src/pages/ItemsPage.tsx that:

• Fetches items from the API on mount using useEffect
• Displays them in a table with columns: Title, Status, Priority, Assigned To
• Color-codes the Status column (green for active, yellow for pending, gray for completed)
• Color-codes the Priority column (red for high, yellow for medium, green for low)
• Uses Tailwind CSS classes for styling
• Shows a loading state while fetching
• Shows an error message if the fetch fails

Add client-side routing to my React app using react-router-dom. Create:

• A layout component with a dark sidebar on the left (like a military application)
• Navigation links in the sidebar: Dashboard, Items, Settings
• A Dashboard page that shows summary stats (total items, items by status, items by priority)
• The existing Items page at /items
• A placeholder Settings page
• A header bar at the top with the app name and a user role indicator

Use Tailwind CSS. The sidebar should be dark navy (#1a1f36), links should highlight when active, and the main content area should have a light background.

Add an item detail page at /items/:id that:

• Fetches a single item from GET /api/v1/items/{id}
• Shows all fields in a clean card layout
• Has a back button that returns to the items list
• Shows a 404 message if the item doesn’t exist

Also make the item titles in the table on the Items page clickable links that navigate to the detail page.

Create a Dashboard page that fetches all items and shows:

• Four stat cards at the top: Total Items, Active, Pending, Completed (with counts)
• Each card should have a colored indicator (green, yellow, blue, gray)
• Below the cards, show a “Recent Items” section with the 5 most recent items
• Add a “Quick Actions” panel on the right with links to the Items page and Settings

Create a chat service in internal/ai/chat.go that:

• Connects to the OpenAI API using net/http (no SDK, just raw HTTP)
• Reads the API key from the OPENAI_API_KEY environment variable
• Sends messages to gpt-4o with a system prompt that says: “You are a staff officer assistant for a military unit. You help manage tasks, track items, and answer questions about unit operations.”
• Supports tool use — define a “lookup_items” tool that searches the DataStore
• Returns the AI’s response as a string

Also create a POST /api/v1/chat endpoint that accepts {"message": "..."} and returns {"response": "..."}.

Define an OpenAI tool for the chat service called “lookup_items” with these parameters:

• status (optional string) — filter by status: “active”, “pending”, “completed”
• priority (optional string) — filter by priority: “high”, “medium”, “low”
• query (optional string) — search term to match against title or description

When the AI calls this tool, execute the search against the DataStore and return the matching items as JSON. The AI will then use this data in its response to the user.

Create a Chat page at web/src/pages/ChatPage.tsx that:

• Has a message input at the bottom with a send button
• Displays conversation history with user messages on the right (blue) and AI responses on the left (gray)
• Shows a loading indicator while waiting for the AI response
• Auto-scrolls to the latest message
• Renders markdown in the AI’s response (bold, lists, headers)
• Disables the input while a request is in flight

Create a middleware package at internal/middleware/ with:

• A CORS middleware that allows requests from localhost:5173 in dev mode
• A SecurityHeaders middleware that sets standard security headers (X-Content-Type-Options, X-Frame-Options, etc.)
• An Auth middleware that reads a “role” cookie and sets the role in the request context
• A Chain function that composes multiple middleware together
• Helper functions: GetRole(ctx) returns the role string from context

Valid roles are: “admin”, “staff”, “user”. If no cookie is set, default to “user”.

Add two auth endpoints:

• GET /api/v1/auth/me — returns the current user’s role from the cookie
• POST /api/v1/auth/switch — accepts {"role": "admin"} and sets the role cookie

On the frontend, add a role picker dropdown in the header that lets users switch between Admin, Staff, and User roles. When switched, the page should reload to reflect the new role.

Update the API handlers to filter data based on role:

• Admin sees all items and all endpoints
• Staff sees all items but cannot access Settings endpoints
• User sees only items assigned to them (filter by AssignedTo field)

Also conditionally show/hide the Settings link in the sidebar based on role.

Create a multi-stage Dockerfile for my application:

• Stage 1 (web-builder): Use node:22-alpine. Copy web/ directory, run npm ci and npm run build. Output goes to web/dist/.
• Stage 2 (go-builder): Use golang:1.24-alpine. Copy Go source, run go build with CGO_ENABLED=0 and -trimpath -ldflags=”-s -w”. Output is a single binary.
• Stage 3 (runtime): Use alpine:3.21. Copy the binary, the web/dist directory, and the data/ directory. Run as non-root user. Expose port 8080. Add a health check.

The Go server should serve the React build from web/dist/ in production mode (when -dev is not set). Add a SPA fallback that serves index.html for any non-API, non-asset route.

Give me the Azure CLI commands to deploy my Docker container to Azure Container Apps. I need to:

• Create a resource group
• Create an Azure Container Registry (ACR)
• Push my Docker image to ACR
• Create a Container App that runs the image
• Set environment variables for OPENAI_API_KEY
• Get the public URL of the deployed app

Use the Azure CLI (az command). My app name is “my-staff-app”.