Building Your First Full-Stack App with AWS Blocks and Kiro: A Beginner-Friendly Student Task Manager
A beginner-friendly guide to building a full-stack Student Task Manager using AWS Blocks, Kiro, and vanilla JavaScript with local development and authentication.
Building a full-stack application usually means setting up a frontend, backend, authentication, database, APIs, and then figuring out how everything connects.
For a beginner, that can become overwhelming very quickly.
I wanted to try something different.
As part of my AWS UG Madurai DevTools Month activities, I conducted a hands-on session where we introduced beginners to AWS Blocks and Kiro IDE by building a simple full-stack application.
The goal was simple:
Build a real full-stack application, understand how the pieces work together, and run everything locally without needing an AWS account.
The result was a beginner-friendly Student Task Manager.
What are AWS Blocks?
AWS Blocks provides reusable building blocks for common backend capabilities such as authentication, data storage, APIs, and more.
The interesting part is that the same application can use local implementations during development and AWS implementations when deployed. This means we can build and test locally without immediately setting up cloud infrastructure.
For local development, AWS Blocks provides the
npm run dev workflow, with local storage and services. No AWS account is required for this development flow.That makes it especially interesting for students and beginners who want to learn AWS development without worrying about cloud setup at the beginning.
Why a Student Task Manager?
I wanted the project to be simple enough for someone who is learning full-stack development for the first time.
Instead of building a large application with dozens of features, I focused on the fundamentals:
- Authentication
- Create
- Read
- Update
- Delete
So we built a Student Task Manager.
A student can:
- Create a task
- View their tasks
- Edit a task
- Mark a task as completed
- Delete a task
Each user should only see their own tasks.
This makes the application small, but it still covers the important concepts of a real full-stack application.
The AWS Blocks Architecture
For this project, I intentionally kept the backend architecture very small.
We used three main pieces:
1
2
3
4
5
AuthBasic
+
KVStore
+
ApiNamespaceThe overall flow looks like this:
1
2
3
4
5
6
7
8
9
10
11
HTML + CSS + JavaScript
|
↓
ApiNamespace
|
┌───────┴───────┐
↓ ↓
AuthBasic KVStore
| |
↓ ↓
Users TasksAuthBasic
We use
AuthBasic for simple username/password authentication.It handles signup, signin and signout with JWT-based sessions. AWS describes
AuthBasic as a good fit for prototypes, internal tools and MVPs that need simple username/password authentication.KVStore
For our task data, I chose
KVStore.It is a simple key-value storage Block, which makes it a good fit for a small beginner project. AWS Blocks provides a local implementation for development, while the AWS implementation maps to DynamoDB when deployed.
We keep the task data scoped to the logged-in user.
For example:
1
userId:taskIdThis is important because we don't want one student to access another student's tasks.
ApiNamespace
ApiNamespace is the bridge between our frontend and backend.Instead of directly accessing the storage from the frontend, we expose simple backend operations such as:
1
2
3
4
createTask()
getTasks()
updateTask()
deleteTask()The frontend calls these API methods, and the backend handles authentication and data access. AWS Blocks recommends validating the authenticated user in every API method that accesses user data.
Building It with Kiro
This was one of my favorite parts of the project.
Instead of manually writing every file from scratch, I used Kiro IDE with the AWS Blocks Power.
Kiro Powers provide additional, focused knowledge and guidance to the agent. AWS's AWS Blocks Kiro Power packages AWS Blocks APIs, patterns, common pitfalls, deployment workflows and scaffolding guidance so the agent can work with AWS Blocks more effectively.
The AWS Blocks Power can be installed from GitHub using:
1
https://github.com/awsdataarchitect/aws-blocksThe installation flow is available through Kiro's Powers panel.
I then gave Kiro a simple requirement:
Build a beginner-friendly Student Task Manager using AuthBasic, KVStore and ApiNamespace.
The important part was not asking it to build a huge application.
I wanted the architecture to stay simple.
Keeping the Frontend Simple
For the frontend, I intentionally used:
1
2
3
HTML
CSS
JavaScriptNo React.
No large UI framework.
No complicated state management.
This was an intentional choice.
The purpose wasn't to show how many technologies we could use. The purpose was to make it possible for a beginner to open the project and understand what is happening.
The frontend contains:
- Login/signup interface
- Task input
- Task list
- Add task
- Edit task
- Complete/incomplete
- Delete task
- Sign out
- Loading and error states
The UI can still look polished without introducing a large frontend framework.
Running the Project Locally
One of the nicest parts of AWS Blocks is the local development experience.
After creating the project and installing the dependencies, we can simply run:
1
npm run devAWS Blocks starts the full-stack development server with hot reload. The frontend is served locally and the backend API runs locally as well. AWS's CLI documentation states that this development flow uses local in-memory and filesystem implementations and does not require an AWS account.
That gives us a workflow like:
1
2
3
4
5
6
7
8
9
10
11
Write Code
↓
npm run dev
↓
Test Locally
↓
Make Changes
↓
Hot Reload
↓
Test AgainNo waiting for cloud deployment just to test a small change.
Authentication and User-Specific Tasks
There is one important lesson hidden inside this simple project.
Imagine two users:
1
2
Student A
Student BStudent A should only see Student A's tasks.
It isn't enough to hide Student B's tasks in the frontend.
The backend needs to verify who is making the request.
Our API methods authenticate the user and use the user's ID when accessing the KVStore.
Conceptually:
1
2
3
4
5
6
7
8
9
User signs in
↓
Authenticated user ID
↓
ApiNamespace
↓
userId:taskId
↓
User's own taskAWS Blocks' best practices specifically recommend doing this authorization check on the server side rather than relying on frontend checks.
This was a simple project, but it gave us the opportunity to introduce an important real-world security concept.
The Development Flow
The complete project flow was kept intentionally simple:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. Create AWS Blocks project
↓
2. Configure AuthBasic
↓
3. Configure KVStore
↓
4. Create ApiNamespace
↓
5. Build CRUD operations
↓
6. Build HTML/CSS/JavaScript UI
↓
7. Connect frontend to API
↓
8. Run with npm run dev
↓
9. Test locallyThis approach also made the project suitable for a short workshop.
What I Learned
The biggest thing I learned from this project was that learning cloud development doesn't always have to start with cloud deployment.
AWS Blocks gives a local-first development experience where we can understand the application architecture first.
For beginners, that changes the learning experience.
Instead of:
"How do I configure this AWS service?"
we can first focus on:
"How does my application actually work?"
Once the application is understood and working locally, AWS Blocks can resolve the Blocks to AWS implementations when you're ready to deploy. For example, AWS documents that
KVStore can map to DynamoDB and ApiNamespace can map to API Gateway/Lambda in AWS environments.What Beginners Can Take Away
From this small project, a beginner can understand:
- What a full-stack application looks like
- How authentication works
- How frontend and backend communicate
- What an API does
- How data storage works
- Why backend authorization matters
- How CRUD operations work
- How local development can work without an AWS account
- How AWS Blocks connects application code to AWS infrastructure
And most importantly, they get a working project instead of only reading about these concepts.
Final Thoughts
This project started with a very simple idea:
Can beginners build a real full-stack application with AWS without getting overwhelmed by infrastructure?
AWS Blocks made that experiment much easier.
By combining:
1
2
3
4
5
AWS Blocks
+
Kiro
+
HTML/CSS/JavaScriptwe can keep the application simple while still introducing real backend concepts.
The Student Task Manager isn't meant to be a production-scale application.
That's the point.
It is a small project that gives beginners a place to start, understand the fundamentals, experiment, break things, fix them, and slowly move toward larger applications.
And after conducting the workshop with 60+ active participants, seeing people actually build and experiment with the project made the idea even more meaningful for me.
Start small. Understand the building blocks. Then build bigger.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article