Build a complete web-based file sharing system backed by S3
Duration: ~4 hours | Project: S3 File-Sharing System
Build a web-based file sharing system with S3 storage, DynamoDB for data management, API Gateway + Lambda for backend, and React for the frontend. Includes multiple user roles (Admin, Uploader, Reader, Viewer) with role-based permissions.
Make sure vision.md is in your workspace before starting. You kick off the entire workflow by pointing the AI to it — AI-DLC Workflow takes it from there.
Open a new chat and type:
Using AI-DLC, build the system described in vision.md.
AI-DLC Workflow activates and runs Workspace Detection automatically. It will display a welcome message, scan your workspace (including vision.md), set up the aidlc-docs/ directory with state and audit tracking, and proceed to the next stage.
The AI analyzes your request and the vision.md file, then asks clarifying questions about role permissions, file sharing workflows, storage limits, authentication approach, etc.
When the AI presents the questions file: Open it, fill in your [Answer]: tags. Then tell the AI:
I have answered the clarification questions. Please re-read the file and proceed.
The AI may ask follow-up questions. Once resolved, it generates a requirements document and presents an approval gate.
The AI creates user stories based on the vision.md requirements. It runs in two parts: first it plans how to structure the stories, then it generates them with personas and acceptance criteria.
Part 1 — Planning: The AI creates a story generation plan with questions. Open the plan file, fill in your answers, then tell the AI you're done.
Part 2 — Generation: The AI executes the plan step by step, marking checkboxes as it goes.
Go to aidlc-docs/aidlc-state.md, find the first unchecked item, then go to the corresponding plan file and resume from that point. For shorter workshops, you can skip this and continue in the same chat.The AI determines which Construction stages to run and decomposes the system into multiple units that can be built independently. Each unit contains highly cohesive user stories. The units are loosely coupled and ordered so everything is built properly.
Make sure Infrastructure Design is included. If it's marked SKIP:
Add Infrastructure Design to the plan. We need deployment to us-west-2.
AI-DLC Workflow designs the detailed component model — all components, attributes, behaviors, and how they interact to implement the user stories. Components should be at a business level, no code yet.
Review the design. If you want changes, tell the AI. When satisfied:
The main build activity. The AI creates a plan, gets your approval, then executes step by step. Code goes in the workspace root, documentation goes in aidlc-docs/.
npm install and npm run build — no dev server, deploy separatelyPart 1 — Planning: The AI creates a code generation plan with numbered, checkboxed steps. Review that it covers all units and components.
Part 2 — Generation: The AI executes each step, checking off tasks in both the plan and the spec task docs.
When complete, review the generated code and respond:
The AI designs the AWS deployment architecture and generates CloudFormation YAML. This covers:
<prefix>-react-app-bucket-s3-file-share-workshop)Version: '2012-10-17' (quoted) with proper resource ARNsThe AI will also handle deployment using AWS CLI:
AI-DLC Workflow generates build and test instructions. Check the TODO file for any post-deployment tasks that need to be executed.
AI-DLC Workflow's Operations phase is a placeholder for future expansion. This is a group discussion about what comes after building.
Discuss as a group:
Now that we've built and deployed our file sharing system, discuss how AI would help with: 1. Monitoring storage, API performance, and usage 2. Managing file lifecycle policies and versioning 3. Adding audit logging for file access and role changes 4. Scaling the system as users and files grow Please explain how this would work for our specific application.
[Answer]: tags, then tell the AI to re-read.aidlc-state.md. For short workshops, you can often skip this.aidlc-state.md to see where you are at any point.You are an expert product manager and are tasked with creating well defined user stories that becomes the contract for developing the system as mentioned in the Task section below. Plan for the work ahead and write your steps in a Markdown file: .aidlc/user_stories_plan.md with checkboxes for each step in the plan. List your Deliverables in the plan. If any step needs my clarification, add a note in the step to get my confirmation. Do not make critical decisions on your own. Upon completing the plan, ask for my review and approval. After my approval, you can go ahead to execute the same plan one step at a time. Once you finish each step, mark the checkboxes as done in the plan. Your Task: Build user stories for the high level requirements as described here in the markdown file vision.md Write the user stories to a .aidlc/user_stories.md file
Your Role: You are an experienced software architect. Before you start the task as mentioned below, please do the planning and write your steps in the .aidlc/units_plan.md file with checkboxes against each step in the plan. If any step needs my clarification, please add it to the step to interact with me and get my confirmation. Do not make critical decisions on your own. Once you produce the plan, ask for my review and approval. After my approval, you can go ahead to execute the same plan one step at a time. Once you finish each step, mark the checkboxes as done in the plan. Your Task: Group the user stories in .aidlc/user_stories.md into multiple units that can be built independently. Each unit contains highly cohesive user stories that can be built by a single team. The units are loosely coupled with each other. For each unit, create a spec folder in specs/ with requirements, design, and tasks. The units must be in order so everything is built properly.
Your Role: You are an experienced software architect and engineer. Before you start the task as mentioned below, please do the planning and write your steps in in a Markdown file named .aidlc/component_model_plan.md with checkboxes against each step in the plan. List your Deliverables in the plan file. If any step needs my clarification, please add it to the step to interact with me and get my confirmation. Do not make critical decisions on your own. Once you produce the plan, ask for my review and approval. After my approval, you can go ahead to execute the same plan one step at a time. Once you finish each step, mark the checkboxes as done in the plan. Your Task: Refer to all the specs/. Design the component model to implement all the user stories. This model shall contain all the components, the attributes, the behaviors and how the components interact to implement the user stories. - The components should be at a business level, do not generate any code yet. - Write the component model into a Markdown file: .aidlc/component_model.md.
Your Role: You are an experienced software engineer. Read the specs documents and proceed with building the application, task by task. Before you start building please do the planning and write your steps in the markdown file .aidlc/app_plan.md file with checkboxes against each step in the plan. List your Deliverables in the plan file. If any step needs my clarification, please add it to the step to interact with me and get my confirmation. Do not make critical decisions on your own. Once you produce the plan, ask for my review and approval. After my approval, execute the same plan and all the specs in specs/ folder, one step at a time. Remember to check off each task as it gets completed, check off the corresponding task in the spec task docs, and if the task involves a back-end, server-side, request make sure to test it with a real HTTPS request. NEVER mock up any data except when you need a placeholder. The final app should not have any mock data hardcoded anywhere. Task: You MUST refer to component design in the .aidlc/component_model.md file and the .aidlc/user_stories.md file. - Use modern design styling for the UX with Bootstrap CDN: icons, color theme, responsive layout, intuitive visual hierarchy, CSS for hover effects - Choose a creative professional color theme avoiding default blue (e.g. green, blue, teal, gray, purple, orange, teal etc.) - Do not run the npm dev server, only use npm-install and npm-run-build. We will deploy the app separately - Create a TODO file for post-deployment tasks where you keep track of actions that failed and you need to execute after a full deploy - Use SAM to test lambda functions locally - Verify Lambda layers structure before first deployment, create a layer verification script, and document the layer structure in code - Follow AWS Lambda Layer Best Practices from Start - Check Lambda Context Attributes and reference AWS documentation via the AWS Docs MCP server for the correct attribute names - Use SAM Local for Faster Iteration - Read CloudWatch Logs Immediately After First Deploy
Your Role: You are an experienced Cloud Architect. Before you start the task as mentioned below, please do the planning and write your steps in the markdown file .aidlc/deployment_plan.md file with checkboxes against each step in the plan. List your Deliverables in the plan file. If any step needs my clarification, please add it to the step to interact with me and get my confirmation. Do not make critical decisions on your own. Once you produce the plan, ask for my review and approval. After my approval, you can go ahead to execute the same plan one step at a time. Once you finish each step, mark the checkboxes as done in the plan. Task: Use the following steps to deploy the application code generated in the backend and react-app folders to AWS us-west-2 Region. This workstation already has appropriate permissions for the AWS CLI using an IAM Role with an EC2 instance profile. Step 1: Create and Deploy IaC for the React app Create a CloudFormation YAML file that defines: - A private S3 bucket with a random prefix. E.g.-react-app-bucket-s3-file-share-workshop - A CloudFront distribution with a path pattern pointing to the S3 origin with Origin Access Control and Bucket policy - CloudFormation Outputs: Buckets, Distribution ID, and CloudFront URL - Ensure all IAM policy documents are valid, including Version: '2012-10-17' (quoted) and use proper resource ARNs (e.g., arn:aws:s3:::bucket/* for object access). The app should be accessible at the default CloudFront distribution domain name at the root path. E.g. https:// .cloudfront.net/ Step 2: USE AWS CLI to deploy the CloudFormation template - Validate using validate-template command and edit if needed - Deploy using Stack names: s3-file-share-workshop - Monitor for successful completion and keep me updated with the Stack deployment status - Once complete, lookup the distribution ID and URL from the stack outputs. Step 3: Deploy the React App and Server Side components - Update the React application with any prefix and CloudFront URL. E.g. the React Router basename, package.json, .env file, and any other files you deem relevant - Build the React application - Copy the web assets to the S3 origin - curl the full URL to verify that the access works