DEV Community: Shreya Nalawade

Build a Website Using S3 and CloudFront with Terraform

Shreya Nalawade — Wed, 28 Jan 2026 15:13:04 +0000

Introduction

Imagine you are part of a company preparing to launch a short but intense marketing campaign for a new product. Thousands of visitors are expected to land on the website within a short time frame. Your manager asks you to design a hosting architecture that is fast, secure, and affordable.

In this guide, we focus on the infrastructure design rather than the website content itself. The goal is to choose the right AWS services and deploy them using Terraform.

Key Requirements

Before selecting any technology, we must understand the constraints:

The campaign will only run for a limited time.
Traffic volume is unpredictable, but could reach thousands of users per day.
Protection against DoS and DDoS attacks is critical.
The solution must remain cost-effective.
Users should experience fast load times regardless of their geographic location.

Choosing the Hosting Platform

To satisfy global reach and performance, AWS provides two ideal services:

Amazon S3 for storing and serving static website files
AWS CloudFront as a global content delivery network (CDN)

Together, these services create a scalable and highly available solution.

Architecture Diagram

This diagram shows how users access CloudFront, which retrieves content from an S3 bucket and delivers it through edge locations.

Why Terraform?

Terraform allows infrastructure to be defined in code and deployed automatically.

Using Terraform ensures that infrastructure is:

Reproducible
Version-controlled
Easy to audit and modify

Instead of repeatedly configuring resources in the AWS Console, we write declarative code and deploy everything with simple CLI commands.

Terraform Template Example

resource "random_string" "bucket_rs" {
  count   = var.s3_count
  length  = 4
  special = false
  upper   = false
}

resource "aws_s3_bucket" "exos_bucket" {
  count  = var.s3_count
  bucket = join("-", ["exos-bucket", random_string.bucket_rs[count.index].result])
  acl    = "public-read-write"
}

resource "aws_cloudfront_distribution" "exos_distribution" {
  count = var.s3_count

  origin {
    domain_name = aws_s3_bucket.exos_bucket[count.index].bucket_regional_domain_name
    origin_id   = "exos_distribution"

    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "match-viewer"
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
    }
  }

  enabled             = true
  default_root_object = "index.html"

  default_cache_behavior {
    viewer_protocol_policy = "redirect-to-https"
    compress               = true
    allowed_methods        = ["GET", "HEAD", "OPTIONS", "PUT", "POST", "PATCH", "DELETE"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "exos_distribution"

    min_ttl     = 0
    default_ttl = 86400
    max_ttl     = 31536000

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }
  }

  price_class = "PriceClass_All"

  restrictions {
    geo_restriction {
      restriction_type = "whitelist"
      locations        = ["US", "CA", "GB", "DE"]
    }
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }
}

Understanding CloudFront

AWS CloudFront is a content delivery service that caches and distributes data from locations close to end users.

CloudFront improves performance by delivering:

Images
Videos
Static files (HTML, CSS, JS)

from global edge locations instead of a single origin server.

Built-in Security Features

Automatic DDoS mitigation
Support for Origin Access Identity (OAI)
Country-based access controls (geo-restriction)

This makes CloudFront both a performance and security layer in front of S3.

Understanding Amazon S3

Amazon S3 is an object storage service designed for durability and massive scale.

S3 can also function as a static website host by serving files such as:

HTML
CSS
JavaScript

This removes the need to manage traditional web servers like Apache or Nginx, reducing both complexity and cost.

Why S3 + CloudFront?

When a user accesses your website:

The request goes to CloudFront.
CloudFront checks its cache.
If content is missing, it fetches it from S3.
The content is cached and delivered to the user.

Benefits

Fast global CDN delivery
Low-cost storage
Free data transfer from S3 to CloudFront
Strong built-in security

Step-by-Step Implementation

Step 1: Install Terraform

terraform -v
terraform init

Step 4: Validate Configuration

terraform validate

Step 5: Deploy Infrastructure

terraform apply

Step 6: Upload Website Files

aws s3 sync ./website s3://your-bucket-name

Step 7: Access via CloudFront

https://<distribution-id>.cloudfront.net

Conclusion

Amazon S3 and CloudFront work together to provide a powerful platform for hosting static websites. This combination delivers:

Global performance
Built-in security
Low operational cost

The architecture can be further improved by integrating:

AWS WAF
AWS Shield
Amazon Route53

Terraform makes it easy to deploy, destroy, and reproduce this environment across multiple stages such as development, testing, and production.

Kiro: Instant Finance & Expense Tracking

Shreya Nalawade — Sun, 04 Jan 2026 18:04:44 +0000

A lightweight finance and budget calculator built using Kiro, designed to help users quickly calculate expenses, track budgets, and understand their financial status in a fraction of a second.

This project is intentionally kept simple and beginner-friendly, making it ideal for learning Kiro, building demos, or showcasing how Kiro’s chat-based intelligence can power practical applications.

📌 Overview

Managing finances does not always require complex accounting software. Many users simply need a fast way to:

Enter a budget
Add expenses
See how much they have spent
Know how much money is left

Kiro – Simple Finance & Budget Calculator solves exactly this problem using a clean UI and Kiro’s AI-driven chat assistance.

✨ Features

Budget Input – Enter a total budget or income
Expense Tracking – Add multiple expenses with name and amount
Instant Calculations
- Total expenses
- Remaining balance
Overspending Detection – Alerts when expenses exceed the budget
Kiro Chat Interface – Ask finance questions in natural language
Minimal & Clean UI – Easy to understand for all users

🛠️ Tech Stack

Kiro – AI assistant and chat logic
JavaScript / HTML / React
Node.js
python

Note: This project focuses on logic simplicity rather than heavy backend architecture.

⚙️ Installation & Setup

1️⃣ Prerequisites

Node.js (v16 or above recommended)
npm or yarn
Kiro account

2️⃣ Install Kiro

Follow the official Kiro getting started guide:

🔗 kiro docs

3️⃣ Clone the Repository

git clone https://github.com/Shreya111111/tracker-kiro

▶️ How It Works

User enters a budget amount
User adds individual expenses
Processes the data instantly
App calculates:

Total expenses
Remaining balance
1. Results are displayed clearly on the screen

How Kiro Helps

Understands user intent
Performs calculations accurately
Responds with simple, human-readable answers

💬 Using Kiro Chat & Spec for Design & Implementation Phases

Kiro Chat was used throughout this project as a design-thinking and implementation assistant, helping move step by step from idea to a working finance and budget calculator.

Instead of directly writing all logic or UI upfront, the development followed phased guidance using Kiro Chat, as recommended in Kiro’s official workflow approach.
Core Components of a Kiro Spec
Kiro typically generates three primary markdown files for every new feature or project to ensure alignment between requirements and code:

requirements.md: Captures user stories and acceptance criteria, often using EARS (Easy Approach to Requirements Syntax) notation to make intent explicit and testable.
design.md: Documents the technical architecture, including sequence diagrams (often via Mermaid) and data flow models.
tasks.md: Provides a detailed, trackable implementation plan. Kiro breaks the design into discrete tasks that agents can execute one by one

🧠 Phase 1: Problem Understanding & Scope Definition

The first step was to clearly define what the app should and should not do.

Kiro Chat Usage

Example prompts used:

Help me define a finance and budget calculator for beginners
What features should a basic budget calculator include?
What should I avoid to keep the app simple?

Outcome

Clear scope defined
No complex finance rules
Focus on budget, expenses, and balance only

This aligns with Kiro’s guidance to start with clarity before implementation.

🎨 Phase 2: UI / UX Design Assistance

Kiro Chat was then used to assist with basic UI planning.

Kiro Chat Usage

Example prompts:

Suggest a UI layout for a budget calculator
What input fields are required for this app?
How should results be displayed clearly?

Outcome

Budget input field
Expense name + amount inputs
Summary section for totals
Minimal, clean layout

Kiro helped translate functional requirements into simple UI components.

🧩 Phase 3: Logic & Calculation Design

Before coding, Kiro Chat was used to validate the calculation logic.

Kiro Chat Usage

Example prompts:

How to calculate total expenses and remaining budget?
What happens if expenses exceed the budget?
Explain the logic in simple steps

Outcome

Clear calculation flow
Overspending condition defined
Easy-to-implement logic

This phase reduced errors before implementation.

💻 Phase 4: Implementation Support

During development, Kiro Chat acted as a real-time coding assistant.

Kiro Chat Usage

Example prompts:

Help me write simple logic for adding expenses
How to update total dynamically when a new expense is added?
Explain this code in simple terms

Outcome

Faster implementation
Cleaner logic
Better understanding of each step

💬 Phase 5: Chat-Based User Interaction

Kiro Chat was also integrated as a user-facing feature.

Example User Queries

What is my total expense?
How much budget is left?
Am I overspending?
Summarize my expenses

Kiro interprets these queries and responds with calculated results in plain language.

🔁 Phase 6: Review & Refinement

Finally, Kiro Chat was used to:

Review app flow
Identify missing edge cases
Suggest small UX improvements

Example prompts:

Review my budget calculator flow
What improvements can make this more user-friendly?

✅ Alignment with Kiro Best Practices

As referenced from the Kiro official documentation and guides, this phased approach follows:

Clear problem definition
Iterative design
Incremental implementation
Continuous validation using chat

Kiro Chat proved effective not just for coding, but for thinking, designing, and refining the application end to end.

📸 Screenshots

Attached screenshots

Budget input screen
Expense entry screen
Expense summary
Kiro chat interaction

📂 Project Structure

kiro-finance-budget-calculator/
├── kiro.
├── vscode/
├── index.html
├── script.js
├── styles.css
└── README.md

🔗 GitHub Repository

🔗 Repo Link

🎯 Use Cases

Personal monthly budgeting
Student expense tracking
Kiro learning project
Demo or hackathon submission
Proof of concept for AI-powered calculators

🚀 Added features

Expense categories (Food, Rent, Travel, etc.)
Monthly history tracking
Visual charts
Mobile-friendly UI

🤝 Contributing

Contributions are welcome!

Fork the repository
Create a feature branch
Commit your changes
Open a pull request

If you found this project useful, please ⭐ the repository and share your feedback!

KendoManage - Personal Task Scheduler & Manager( 30+ Kendo components + Built using KendoReact AI Code assistant)

Shreya Nalawade — Sun, 28 Sep 2025 18:16:30 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

🚀 What I Built

I created KendoManager, a 🌟 feature-rich, enterprise-grade project management & collaboration platform with modern UI/UX patterns. Here's what it offers:

📋 Task Management: Create, edit, delete tasks; track progress 📊; assign priorities 🔝; attach files 📎; manage due dates 🗓️; support parent-child tasks 🌱.
👥 Team Collaboration: Real-time member status 🟢🟡🔴; task-based comments 💬; @mentions with notifications 🔔; team profiles 🧑‍💼.
📅 Calendar & Scheduling: Event scheduling 🕒; multiple calendar views 🗓️; date marking 🎯; visual analytics 📈.
📊 Analytics & Reporting: Task distribution charts 📊; monthly trends 📅; KPI tracking 🎯; interactive dashboards 🖥️.
📂 File Management: Upload/download files ⬆️⬇️; categorize and search files 🔍; share files with team members 🤝.

All of this is built using 30+ KendoReact components 🎨, ensuring a polished, interactive, and scalable experience 💻✨.

⚡ Parts of the UI scaffolding were generated and refined using the Kendo AI Coding Assistant 🤖, speeding up development and improving code quality.

Demo

Source Code : https://github.com/Shreya111111/Kendomanager_new
Demo Live Link : https://kendomanager-new.vercel.app/

KendoReact Components Used

📦 KendoReact Components & Installation Commands(30+ KendoUI free components used)

Category	Components	Installation Command
Data Management	`Grid`, `GridColumn`	`npm install @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-intl`
Charts & Visualization	`Chart`, `ChartSeries`, `ChartSeriesItem`, `ChartCategoryAxis`, `ChartCategoryAxisItem`	`npm install @progress/kendo-react-charts hammerjs`
Form Controls	`Button`, `Input`, `TextArea`, `Switch`, `Slider`, `Form`, `Field`	`npm install @progress/kendo-react-buttons @progress/kendo-react-inputs @progress/kendo-react-form`
Dropdowns & Selection	`DropDownList`, `MultiSelect`, `ComboBox`, `AutoComplete`	`npm install @progress/kendo-react-dropdowns`
Date & Time	`Calendar`, `DatePicker`, `DateRangePicker`, `Scheduler`	`npm install @progress/kendo-react-dateinputs @progress/kendo-react-scheduler`
Layout & UI	`Card`, `CardBody`, `CardTitle`, `Avatar`, `Badge`, `Dialog`, `TabStrip`, `TabStripTab`	`npm install @progress/kendo-react-layout @progress/kendo-react-dialogs @progress/kendo-react-indicators`
Indicators	`ProgressBar`, `Badge`	`npm install @progress/kendo-react-progressbars @progress/kendo-react-indicators`
File Handling	`Upload`	`npm install @progress/kendo-react-upload`

🔑 Notes

All KendoReact packages require installing KendoReact Base & Styling:

npm install @progress/kendo-react-intl @progress/kendo-theme-default

Prize Code Smarter, Not Harder prize category- AI Coding Assistant Usage

🔧 Installation

To integrate the KendoReact AI Coding Assistant into my development environment, I followed these steps:

Set Up a React Application: I created a new React project using Vite:

   npm create vite@latest kendo-manager
   cd kendo-manager
   npm install

Install KendoReact Components: I installed the necessary KendoReact components for UI elements:
npm install @progress/kendo-react-grid @progress/kendo-react-charts @progress/kendo-react-inputs @progress/kendo-react-buttons @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-react-scheduler @progress/kendo-react-layout @progress/kendo-react-dialogs @progress/kendo-react-progressbars @progress/kendo-react-upload @progress/kendo-react-intl @progress/kendo-theme-default

Install the AI Coding Assistant: I added the KendoReact AI Coding Assistant to enhance development efficiency:

npm install @progress/kendo-react-mcp

Configure the AI Coding Assistant: I integrated the assistant into my development environment, enabling it to provide context-aware code suggestions and enhancements.

🧠 Usage

The KendoReact AI Coding Assistant significantly improved my development workflow in the following ways:

Initial Code Generation: It helped me quickly scaffold components like Grids, Forms, and Charts, allowing for rapid prototyping and development.
Component Configuration: The assistant provided guidance on configuring complex components, such as setting up multi-column headers in Grids or configuring recurring events in the Scheduler.
Data Binding Assistance: It assisted in binding dummy data to components for testing and prototyping purposes, streamlining the development process.
Step-by-Step Explanations: The assistant offered detailed explanations of the code snippets it generated, helping me understand the implementation and learn best practices.
Troubleshooting: It provided preliminary solutions to common issues, saving time on debugging and problem-solving.

Screenshots of KendoReact AI coding Assistant

What I Liked in the KendoReact AI Coding Assistant

⚡ Accelerated Component Development:
The AI assistant rapidly generates code for various KendoReact components, enabling faster prototyping and reducing time spent on boilerplate code.
🎯 Expert Configuration Guidance:
It provides detailed assistance with complex component configurations, such as setting up multi-column headers in Grids and managing advanced Scheduler features.
🔗 Simplified Data Binding:
The assistant streamlines the process of binding data to components, making it easier to set up testing environments and prototypes quickly.
📚 Clear Code Explanations:
It offers step-by-step breakdowns of generated code, helping developers understand implementation details and best practices more effectively.
🔧 Efficient Troubleshooting:
By providing preliminary solutions to common issues, the assistant reduces debugging time and helps resolve problems faster.

Iris- Your AI Interviewer(Audio+ Visual+ Live Cam+ Feedback)🎙️📹✨

Shreya Nalawade — Sun, 14 Sep 2025 16:40:10 +0000

This is a submission for the Google AI Studio Multimodal Challenge

💡 What I Built

Iris is an AI-powered Interview Coach designed to help candidates practice, improve, and excel in interviews.
Instead of reading generic interview guides, Iris creates a personalized interview experience by combining resume understanding, live camera interaction, and structured feedback — powered by Google AI Studio (Gemini multimodal models).

It feels just like a face-to-face mock interview with a professional hiring manager, but available anytime, anywhere.

🌟 Iris Features

📄 Resume Scan – Upload PDF/image, extracts key skills, experience, education & generates a concise summary.
🎤 Live AI Interview – Face-to-face AI interviewer with camera & mic, adapting questions to your resume & responses.
🤖 Personalized Feedback & Coaching – Gets strengths, areas to improve, and STAR method evaluation from your session.
💾 Download Feedback Report – Save detailed feedback as a document.
🔗 Share Progress – Share reports with friends/mentors for collaborative review.
📜 Interview History – Timeline of past interviews with scores & feedback summaries.
📂 Previous Transcripts – View transcripts with questions & answers to track progress over multiple sessions.

🎥 Demo

👉 Video

Note : You might be not able to hear AI Voice in the video because my system is not able to catch system audio when doing screen recording because of some issue. I am attaching the deployed link below so that you can try it out yourself. All you have to do is upload the resume(PDF) format. Avoid using app repeatedly at a particular time frame as it might exhaust the API credits.

Deployed Cloud Run Link : https://iris-your-ai-interviewer-47821800150.us-west1.run.app/

Screenshots

App Source Code : Link

🧑‍💻 Features in Detail
1. 📄 Resume Scan + AI Summary

Upload your resume as a PDF or image.

Iris uses Gemini multimodal capabilities to extract:

✅ Key skills
✅ Experience highlights
✅ Education & certifications
Generates a concise summary to guide the interview.

2. 🎤 Live AI Interview (Audio + Visual + Camera)

Iris acts as a virtual interviewer.
You interact face-to-face using your camera and microphone.
The AI adapts its questions to your resume and responses.
Covers both behavioral (STAR method) and technical questions.

3. 🤖 Personalized Feedback & Coaching

After the session, Iris analyzes the entire transcript.

Feedback includes:
🌟 Strengths (clarity, confidence, relevance)
📌 *Areas to Improve *(with actionable advice)
🎯 STAR Method Evaluation (Situation, Task, Action, Result)
Output is structured, easy to understand, and encouraging.

4. 📑 Save & Share Your Progress

💾 Download Feedback Report as a document.

🔗 Share with friends/mentors for collaborative review.

📜 Include Interview History

Show a timeline of past interviews:
Date & time of each interview
Overall score or feedback summary

📂 Include Previous Interview Transcripts

Provide transcripts or summaries of past interviews
Questions asked
Candidate answers Helps track progress across multiple practice sessions.

🛠️ How I Used Google AI Studio

Iris is powered by Gemini multimodalfeatures:

Resume Parsing (File + Text Input)
Uses gemini-2.5-flash to extract structured insights from resumes.
Interview Simulation (Chat API)
Creates a dynamic chat session where Gemini acts as a hiring manager.
Feedback Analysis (JSON Schema)
Ensures structured responses:

{
  "strengths": ["Good clarity", "Relevant examples"],
  "areasForImprovement": ["Expand on technical depth", "Use STAR format"]
}

📦 Gemini Services Used

1. gemini-2.5-flash ⚡

Why used:

Fastest multimodal Gemini model.
Handles resume parsing from PDFs/images quickly.
Great for interactive chat-based interviews where low latency is critical.

import { GoogleGenAI, Chat, Type } from "@google/genai";


✅ generateContent() → Resume extraction + feedback generation

✅ chats.create() → Interactive interview simulation

✅ JSON schema → Well-structured coaching insights

🚀 Why Iris?

🎯 Problem: Many candidates struggle with interview preparation — either they don’t know what to expect or lack constructive feedback.
🌟 Solution: Iris provides a safe, intelligent, and supportive environment to practice, with AI that:
Understands your resume
Conducts live interviews
Gives actionable coaching feedback
Helps you improve over time
With Iris, you no longer have to walk into an interview unprepared.

Atomica- Turn Science into understandable concepts (Audio+Visual+ Tutoring)

Shreya Nalawade — Sun, 07 Sep 2025 08:33:49 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Atomica is an AI-powered educational app that transforms science learning into an interactive, visual, auditory, and engaging experience. It helps students understand complex concepts through diagrams, explanations, quizzes, flashcards, AI-powered tutoring, and audio narration. By combining multimodal AI capabilities, Atomica addresses the common problem of abstract science topics being hard to visualize, understand, and memorize, creating a hands-on, multisensory learning experience for students of all ages.

Atomica User Input

👤 Your Level

Who are you learning for?

🧒 Kid
🎓 High School Student
🎓👩‍🎓 College Student

🔬 Scientific Concept

Type the science topic you want to learn:

Examples: Photosynthesis, Newton’s Laws, DNA replication

🌐 Language

Choose the language you want:

🇬🇧 English
🇮🇳 Hindi
🇫🇷 French
🇩🇪 German
🇪🇸 Spanish

📚 Learning Mode

How do you want to learn?
🖼️ Diagrams & visuals
🎧 Audio explanations
📝 Quizzes & flashcards
🤖 AI tutor guidance

Demo

Demo Link

Deployed Cloud Run App: Atomica Live Demo

Screenshots

How I Used Google AI Studio

1. Diagram Generation

What it does: Converts a text prompt (like “Photosynthesis” or “Black Hole”) into a visual diagram.
How it works: Uses AI to generate a clean, modern, educational illustration, highlighting only the key components with minimal text.
Why it’s valuable: Makes abstract scientific concepts visible and easier to understand, helping visual learners quickly grasp ideas that are otherwise hard to imagine.

2. Multimodal Explanations

What it does: Provides explanations based on the generated diagrams, combining both visual and textual information.
How it works: AI analyzes the diagram and the topic prompt, then generates a concise, context-aware explanation. It can also use analogies for easier understanding.
Why it’s valuable: Supports deep comprehension, allowing learners to connect the visual information to the underlying science in a meaningful way.

3. Audio Narration

What it does: Reads explanations aloud to students.
How it works: Uses AI to generate natural-sounding speech from the text explanations.
Why it’s valuable: Supports auditory learners and makes the platform accessible to students with visual impairments. It also allows multitasking or studying on the go.

4. Interactive Q&A (AI Chat Tutor)

What it does: Allows students to ask follow-up questions about any topic.
How it works: AI uses the context of the explanation and diagram to provide relevant, accurate answers in real time.
Why it’s valuable: Creates a personalized learning experience, helping students clarify doubts instantly instead of waiting for a teacher or searching elsewhere.

5. Quiz and Flashcard Generation

What it does: Automatically creates multiple-choice quizzes and flashcards from the explanation text.
How it works: AI extracts key concepts and formulates questions, answers, and concise definitions for flashcards.
Why it’s valuable: Encourages active recall and spaced repetition, which are proven techniques for memory retention and mastery of concepts.

6. Translation Support

What it does: Converts explanations, quizzes, and flashcards into multiple languages.
How it works: AI translates text while maintaining clarity and scientific accuracy.
Why it’s valuable: Makes learning accessible to non-English speakers and supports global users, expanding the app’s usability and reach.

✅ Summary

Together, these features make Atomica a complete multisensory learning platform. Students can:

See diagrams,
Read and hear explanations,
Test themselves with quizzes and flashcards,
Interact with an AI tutor, and
Learn in multiple languages, all in one place.

Multimodal Features

Image Generation: The imagen-4.0-generate-001 model is used to generate clear, educational diagrams from text prompts. Note that this model may require a paid tier, and free-tier access may not be available.
Multimodal Explanation: The gemini-2.5-flash model analyzes both diagrams and text prompts to provide context-aware explanations, making complex science concepts easy to understand. This is fully supported in the free tier.
Quiz Generation: Also using gemini-2.5-flash, Atomica automatically generates multiple-choice quizzes based on the explanations, helping students test their understanding. Free-tier usage is supported.
Flashcards: The same gemini-2.5-flash model creates memorization flashcards for key concepts, aiding active recall and long-term retention. Free-tier access is available.
Chat Tutor: gemini-2.5-flash powers the interactive Q&A feature, allowing students to ask follow-up questions and receive accurate, context-aware answers. This feature is supported on the free tier.
Translation: Using gemini-2.5-flash, Atomica can translate explanations, quizzes, and flashcards into multiple languages, expanding accessibility for global learners. Free-tier usage is supported.

🎯 9-to-Alive: The Intranet Homepage Reinvented with Axero’s Vision

Shreya Nalawade — Sun, 20 Jul 2025 16:06:05 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
"Where employees go to get things done."

Inspired by Axero's core principles—Productivity, Collaboration, Beautiful UI, People-Centric Design, and Instant Access to Information—this intranet homepage brings together purpose, aesthetics, and smart interactivity.

What I Built

🌟 Main Features Overview
🎯1. Smart Navigation & UX

Sticky Tab Navigation that follows the user as they scroll.

Keyboard Shortcuts for instant access:

⌘+H – HR Portal
⌘+I – IT Help Desk
⌘+T – Timesheets
⌘+S – Team Chat
Notification Badges for unread announcements or messages.
Animated Active Tab Indicators and toast notifications.

🗂️ Interactive Core Tabs
📅 2. Events Tab

"Plan, RSVP, and participate with ease."
RSVP-enabled interactive event cards with hover details.
Advanced filtering by type: Meetings, Lunches, Hackathons, Holidays.
Real-time search with suggestions.
Event creation modal + notification system.

👥 3. Teams Tab

"Know your people. Celebrate them."
Expandable team member profiles with click-to-reveal contact info.
Department filters and search.
Work anniversary trackers and online/offline status indicators.
“Connect” and “Message” buttons with animations.

📁 4. Resources Tab

"Everything you need. Instantly."
Downloadable documents with rating system.
Bookmark functionality using localStorage.
Sorting by name, downloads, rating, date.
Category and tag filters.

📢 5. Announcements Tab

"Stay informed, stay ahead."
Priority levels: Urgent, High, Medium, Low.
Visual indicators for read/unread.
Like/comment system.
Search + category filter.
“Mark as Read” notifications.

⭐ 6. Highlights Tab

"Capture moments that matter."
Achievements, milestones, and news in visual cards.
Masonry layout for a beautiful gallery effect.
Persistent like/bookmark features.
Sharing and reactions.

🎮7. Interactive Games Tab: Gamified Learning Center

🧠 Company Trivia Game

Timed Q&A with:
Score tracking
Global leaderboard
Confetti for high scores
Progress indicators and question explanations

🧩 Memory Challenge

Classic card matching gameplay.
Score, move counter, reset.
LocalStorage for personal score tracking.
Confetti celebration on completion.
Bonus: Global leaderboard for friendly competition!

🔋 Enhanced Interactivity & Persistence

Real-time Feedback: Toasts, micro-interactions, hover states.
Confetti Animations: For achievements and game completions.
LocalStorage Integration:
Bookmarks, likes
Announcements read status
Game scores
Mood check-in data

💼Axero Signature Widgets

🏆 8. Team Spotlight (Axero Core Feature)

"Celebrate excellence and foster culture."
Employee of the Month (e.g. Sarah Chen – Senior Developer, Engineering)
Click to appreciate (heart or kudos system)
Highlights major contributions (e.g. “Outstanding performance in Q4 2024”)

📈 9. Project Dashboard

"Track progress. Deliver with confidence."
Projects with:
Status indicators (active, overdue)
Due dates and percentage completion
Assigned team member avatars

Examples:

Customer Portal v2.0 – 75%
Mobile App Redesign – 45%
API Security Audit – 90%, Overdue

💬 10. Daily Check-in & Leadership Corner
"Prioritize mental wellbeing. Hear from leadership."

Daily Mood Check-in: Emoji-based (Happy, Okay, Stressed)
Personalized response messages - Stored in localStorage for trend tracking
Tip card: "Regular check-ins help us improve your work experience."
Leadership Corner:
Weekly message from CEO/Managers

Example:

“Excited to announce our Q4 results exceeded expectations! Thank you all for your incredible dedication.”
– Jennifer Walsh, CEO

🎯 Principle of the Day

"Be Customer-Obsessed: Every decision should benefit our customers first."
Auto-rotating display of Axero’s core principles.
Smooth transitions every 10 seconds using JS.

💌 Kudos Wall

"Shoutouts that shape culture."
Peer-to-peer appreciation board
Like system (❤️)
Timestamped kudos with sender & receiver cards

Demo

Live Demo

Explore the full interactive intranet experience here: Link

Shreya111111 / Intranet1

🎯 9-to-Alive: The Intranet Homepage Reinvented with Axero’s Vision

Welcome to Office Haven — a modern, people-first digital workspace crafted to elevate team collaboration, boost morale, and make workdays more intuitive, engaging, and productive.

🌐 Live Demo: Check it out on Netlify!

💡 Features at a Glance

🔧 Feature	📝 Description
📅 Live Events	RSVP-enabled event tiles with countdowns & speaker highlights.
🧠 Knowledge Center	Searchable documentation, team resources, and SOPs.
🎮 Gamification Hub	Badge rewards, levels, and XP-based interactions.
🌈 Mood Check-ins	Anonymous emoji-based status updates to support mental wellness.
🌟 Team Spotlights	Auto-rotating member highlights to boost morale and visibility.
📢 Announcement Carousel	Company-wide updates in a rotating banner format.
🔍 Quick Links Panel	Instant access to HR tools, payroll, IT support, and more.
📈 Productivity Dashboard	Track daily goals, completed tasks, and focus timers.
🤝 Collaboration Feed	Shout-outs, polls, and quick wins posted by the team.

…

View on GitHub

Journey

Designing Office Haven was an exciting opportunity to reimagine what a modern intranet could be. I focused on combining Axero’s core principles with engaging interactivity, ensuring a people-first experience that’s both functional and fun. From implementing 📅 live RSVP-enabled events to building a 🎮 gamified center and 😊 mood check-ins, each feature was crafted to promote productivity and culture. The result is a digital workspace that feels alive, intuitive, and truly collaborative.

🛠️ My process began with deep research into Axero’s core values and product philosophy, which helped guide every 🧩 design and interaction choice. I 🧾 wireframed the layout to prioritize ease of navigation and 🔍 information accessibility, then built the interface using clean, modular code. ✨

License : MIT ❤️

Made in ❤️ by Shreya N

AI E-CommerceWatch – Product Research Agent for E-Commerce By RunnerH

Shreya Nalawade — Thu, 19 Jun 2025 16:36:06 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I created an AI-powered autonomous product research agent using Runner H, focused on helping e-commerce sellers identify high-potential products for platforms like Amazon, Etsy, and Shopify.

This Runner H agent performs:

Trend analysis across platforms (Amazon, TikTok Shopping, Google Trends)
Product data aggregation (prices, reviews, profit margins)
Competition scoring
Supplier discovery
Launch strategy generation

All of this is saved in a structured PDF and Google Sheet for actionable insights.

Demo

Prompt Used

Agent Objective:
You are an AI Agent designed to help Amazon sellers identify profitable product opportunities by scanning e-commerce trends, evaluating market demand and competition, and shortlisting suppliers.

Inputs Required:
- A keyword or niche idea (e.g., “portable blender”, “eco-friendly yoga mat”)
- Minimum profit margin (%)
- Minimum monthly search volume
- Maximum competition threshold (scale of 1–10)
- Target region (e.g., US, India)

Tasks:
1. Trend Research:
   - Search Amazon, Google Trends, Etsy, and TikTok Shopping to evaluate the popularity of the keyword.
   - Capture top 5 trending related keywords.
   - Summarize seasonality insights if any (e.g., spikes during summer).

2. Market Evaluation:
   - Find 5 top-selling listings on Amazon for the keyword.
   - Collect price, estimated monthly sales, reviews, rating, and fulfillment type (FBA, FBM).
   - Calculate rough profit margin: (Price – Est. Cost) / Price.
   - Flag products meeting the margin & volume criteria.

3. Competition Analysis:
   - Count total number of sellers.
   - Analyze top 3 sellers’ review counts.
   - Estimate barrier to entry (low/medium/high).
   - Score the competition level from 1–10.

4. Supplier Discovery:
   - Search Alibaba or IndiaMART for potential suppliers.
   - List top 3 suppliers with MOQ, cost per unit, and contact info.

5. Launch Plan Generation:
   - Recommend pricing strategy.
   - Suggest 3 key differentiators or features.
   - Suggest initial launch platform (Amazon, Etsy, own store).
   - List recommended ad budget and keywords.

Youtube Link

RUNNER H LINK : Prompt Link
Outputs:

Write all outputs in a structured PDF with fields matching the Google Sheet schema below.

Generated PDF
AI Market Analysis - Google Sheets

How I Used Runner H

Workflow Structure

Input Collection
User enters a niche or product idea (e.g., "phone")
Trend Analysis (Runner H agent)
Scrapes Amazon bestsellers, Google Trends, TikTok Shopping
Extracts seasonality, rising interest, top keywords
Market Evaluation
Collects top listings from Amazon (price, reviews, rating)
Estimates profit margin, average monthly sales
Assigns a competition score
Supplier Sourcing
Pulls top matches from Amazon / IndiaMART with MOQ and pricing
Launch Strategy Generator
Recommends pricing, ad budget, key differentiators, and best platform
Data Export

All data saved to a structured Google Sheet: AI Market Watch – Q2

Use Case & Impact

Who it helps:

Indie e-commerce founders
Amazon FBA sellers
Product researchers
DTC brands

What it solves:

Manual product validation is time-consuming. This solution speeds up:
Market research
Competitor tracking
Sourcing suppliers
Launch planning

Social Love

// Detect dark theme var iframe = document.getElementById('tweet-1942117136442490900-631'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1942117136442490900&theme=dark" }
Made with ❤️ by Shreya N

Cloud Networking Showdown: AWS VPC vs. Azure VNET vs. Google Cloud VPC

Shreya Nalawade — Thu, 30 Jan 2025 13:54:14 +0000

Cloud computing has transformed how businesses operate, and at the heart of most cloud infrastructures are networking solutions. AWS VPC, Azure VNET, and Google Cloud VPC each offer ways to manage and connect virtual networks, but each has its own unique features and nuances. To make this comparison more relatable, let’s explore these cloud networking solutions through a simple analogy—think of them like different types of highways connecting cities (your servers and applications).

AWS VPC: The Established Highway System

AWS Virtual Private Cloud (VPC) is like a mature, well-maintained highway network—comprehensive, reliable, and familiar to many. AWS VPC gives you full control over your network environment, letting you create isolated virtual networks in the cloud, akin to building your own private highways.

Key features:

Customizable Network: You can design your VPC with subnets, route tables, and gateways to control how traffic flows.
Security: Features like security groups (firewalls for individual instances) and Network ACLs (access control lists for subnets) offer strong protections.
VPC Peering and Transit Gateway: You can connect multiple VPCs (think of them as different cities) using peering or Transit Gateways for broader network integration.

AWS has a robust ecosystem, with a wide variety of additional networking tools and services, such as Direct Connect (dedicated network links) and PrivateLink (secure access to services), making it a great option for organizations that require flexibility and scalability.

Azure VNET: The Highway with Easy On-Ramps

Azure’s Virtual Network (VNET) is like a highway system with smooth on-ramps and off-ramps that make it incredibly easy for developers to plug into. If you’re already in the Microsoft ecosystem, Azure VNET is designed with integrations in mind, making it simple to extend your existing Active Directory or hybrid workloads.

Key features:

Ease of Use: Azure VNET has built-in integration with many Microsoft tools, making it a seamless option for enterprises using Windows Server, Active Directory, or SQL Server.
Subnets and Network Security Groups: Just like AWS VPC, Azure VNET lets you segment your network into subnets. Network Security Groups (NSGs) are like custom rules that control traffic flow, providing a firewall-like protection.
Hybrid Connectivity: Azure provides strong hybrid connectivity options, including Azure ExpressRoute (similar to AWS Direct Connect) for establishing private connections between on-premises and the cloud.

While it might not be as feature-packed as AWS VPC, Azure VNET’s tight integration with other Microsoft services makes it ideal for businesses already working with Microsoft technologies.

Google Cloud VPC: The Smart, Adaptive Network

Google Cloud VPC is like a modern, smart highway system that adapts and grows based on the city’s needs. It’s optimized for simplicity, innovation, and low-latency services, leveraging Google’s expertise in networking and data management.

Key features:

Global Network: One of Google Cloud’s standout features is its global VPC. Unlike AWS or Azure, Google VPC allows you to create a single VPC across regions without needing to set up complex inter-region peering. It’s as if you could have a highway that seamlessly connects cities worldwide.
Simple and Flexible: Google VPC’s user interface is intuitive, making it easy to set up and manage. The VPC supports both private and public IPs, and firewall rules can be set at the global level, simplifying configuration.
Private Google Services Access: With Private Google Access, you can access Google Cloud services (like Cloud Storage and BigQuery) from within your VPC without needing to use the public internet.

Google Cloud VPC may not have the same depth of services as AWS or Azure, but it’s perfect for developers and businesses looking for a simple, highly scalable, and globally connected networking solution.

How They Compare: Highway Systems

Feature	AWS VPC	Azure VNET	Google Cloud VPC
Ease of Use	Feature-rich but complex	Simple with Microsoft integrations	Highly intuitive, simple setup
Global Connectivity	Limited to region-based VPCs	Region-based, with VPN support	Global VPC, no need for complex peering
Security	Granular control with SGs, ACLs	NSGs and firewall rules	Global firewall rules, customizable access
Hybrid Cloud Support	Direct Connect and VPN	ExpressRoute and VPN	Cloud Interconnect and VPN
Integration	Strong ecosystem, many tools	Best for Microsoft-heavy environments	Seamless integration with Google services

Conclusion: Which Highway is Right for You?

Choosing between AWS VPC, Azure VNET, and Google Cloud VPC boils down to your specific needs:

AWS VPC is ideal if you need a comprehensive, highly customizable, and scalable network, especially if you're dealing with complex applications or large enterprises.
Azure VNET is a solid choice for businesses heavily invested in Microsoft technologies, as it integrates seamlessly with on-premises solutions and Microsoft cloud tools.
Google Cloud VPC stands out if you need a global, simple, and high-performance network with ease of use and tight integration with Google Cloud services, especially for big data or machine learning workloads.

Just like choosing the right highway depends on where you need to go, selecting the right cloud provider’s networking solution depends on your company’s goals, existing infrastructure, and long-term strategy.

DBaaS Unleashed: Exploring DyanamoDB & RDS in the AWS

Shreya Nalawade — Tue, 31 Dec 2024 18:29:27 +0000

Database As A Service:
Database as a service (DBaaS) is a cloud computing managed service offering that provides access to a database without requiring the setup of physical hardware, the installation of software, or the need to configure the database. Most maintenance and administrative tasks are handled by the service provider, freeing up users to quickly benefit from using the database. DBaaS uses The DBaaS model is ideal for small to medium-sized businesses that do not have well-staffed IT departments. Offloading the service and maintenance of the database to the DBaaS provider enables small to medium-sized businesses to implement applications and systems that they otherwise could not afford to build and support on-premises. Workloads involving data with stringent regulatory requirements may not be suitable for a DBaaS model. Furthermore, mission-critical applications that require optimal performance and 99.999% of uptime may be better suited for on-premises implementation. This is not to say that mission-critical workloads cannot run on cloud services, but much of the DBaaS adoption to date has been for less crucial applications, such as development and pilot programs.

Detailed Implementation Steps: DynamoDB

Step 1: Select Database in AWS Services

Log in to the AWS Management Console.
Navigate to Services in the top menu.
Under the Database category, select DynamoDB.
- DynamoDB is a fully managed NoSQL database service designed for high availability and scalability.

Step 2: Go to DynamoDB Dashboard

Once inside DynamoDB, you'll see the dashboard where you can manage tables, monitor usage, and configure settings.
Familiarize yourself with the key sections, such as Tables, Metrics, and Global Tables, for future use.

Step 3: Create a Table

Click "Create Table" to open the table creation wizard.
Provide a Table Name (e.g., MyFirstTable). This must be unique within your AWS account.
Define the Primary Key:
- Partition Key: The unique identifier for each item (e.g., UserID).
- Sort Key (Optional): Used to sort items with the same Partition Key (e.g., OrderDate).
Configure additional settings (optional):
- Provisioned Throughput: Choose between "On-Demand" or "Provisioned" based on expected traffic.
- Encryption: Enable encryption at rest for enhanced security.
- Global Secondary Indexes (GSIs) or Local Secondary Indexes (LSIs) can be added for optimized querying.
Click "Create Table" to initiate table creation. It may take a few moments for the table to be ready.

Step 4: Confirm Table Creation

Once the table is created, it will appear in the Tables list.
Click on the table name to view its details, including schema, items, metrics, and indexes.

Step 5: Add Items to the Table

Navigate to the Items tab within your table.
Under Actions, click Create Item.

Step 6: Enter Item Data

The Create Item interface will open.
Enter values for the Partition Key and Sort Key (if applicable).
- Example: UserID = "12345", OrderDate = "2024-01-01".
Add additional attributes as key-value pairs, such as:
- Name = "John Doe"
- Email = "john.doe@example.com"
- OrderAmount = 150.25
Once all required attributes are added, click Save.

Step 7: View and Explore Items

Go back to the Items tab.
You’ll see a list of all items in the table.

Step 8: Query and Filter Data

In the Explore Items section, use the Scan operation to retrieve all items in the table.
Apply filters to refine your results:
- Example: Filter items where OrderAmount > 100.
Use the Query operation for more precise lookups, especially if your table has a Sort Key.

Step 9: Monitor Table Metrics

Go to the Metrics tab to view performance data, such as read/write capacity usage, throttling events, and storage utilization.
Adjust provisioned throughput if necessary to optimize performance.

Step 10: Delete the Table

Navigate to the DynamoDB dashboard and select the table you created.
Under Actions, choose Delete Table.
Confirm the deletion in the pop-up dialog.
- Note: Deleting a table is irreversible and removes all associated data.

Detailed Implementation Steps: RDS

Step 11: Navigate to AWS RDS

Log in to your AWS Management Console.
Click on Services in the top menu bar.
Under the Database section, select RDS.
- RDS (Relational Database Service) is a fully managed service that allows you to easily set up, operate, and scale a relational database in the cloud. It supports multiple database engines, including MySQL, PostgreSQL, Oracle, SQL Server, and Amazon Aurora.

Step 12: Create a Database in RDS

Once inside the RDS dashboard, click on "Databases" in the left navigation panel.
Click on the "Create database" button to start the database creation process.

Step 13: Configure Database Settings

Select the Database Engine: Choose the database engine you wish to use (e.g., MySQL, PostgreSQL, MariaDB, etc.).
- Example: Select MySQL for a relational database setup.

Choose a Template: You can choose between:
- Production: For highly available and scalable environments.
- Dev/Test: For lower cost, non-production environments.
- Free Tier: If you're eligible, this option provides limited free usage (1 GB of storage, 20 GB backup).

Settings:
- DB Instance Identifier: Choose a unique name for the instance (e.g., mydatabaseinstance).
- Master Username: Choose a username for the database administrator (e.g., admin).
- Master Password: Enter a strong password and confirm it.

DB Instance Class: Select the instance size (e.g., db.t3.micro for smaller, cost-effective setups or larger instance sizes for production workloads).
Storage:
- Storage Type: Choose between General Purpose (SSD) or Provisioned IOPS (SSD) for higher performance.
- Allocated Storage: Set the size for your database storage (e.g., 20 GB).
VPC and Network Configuration: Choose the VPC (Virtual Private Cloud) in which the RDS instance will run.
- Ensure you select the correct subnet group and security group. This will define the network and access permissions for the database.
Backup and Maintenance:
- Set the Backup Retention Period (how long backups are kept).
- Configure Automated Backups, Multi-AZ Deployment, and Maintenance window if needed.
Click on Create Database to start the database creation process.
- Note: The process may take a few minutes to complete.

Step 14: Access the Database Instance

After the database instance is created, click on the Database name (e.g., mydatabaseinstance) in the Databases tab to view its details.
You can see important information such as:
- Endpoint: The address you will use to connect to the database.
- VPC Security Group: The security group that controls access.
- DB Parameter Group: Configuration settings that define behavior of the database.
From this page, you can monitor performance, set up additional options, and access the database instance’s logs.

Step 15: Delete the Database Instance

To delete the database instance, go to the Databases page in the RDS dashboard.
Select the database instance you want to delete (e.g., mydatabaseinstance).
From the Actions dropdown menu, select Delete.
- A confirmation window will appear asking if you’re sure about deleting the instance.
You will be prompted to:
- Create a final snapshot (optional). You can choose to create a snapshot before deletion if you wish to back up the database’s current state.
- Retain automated backups: You can also choose whether to keep automated backups after deletion.
Click Delete to start the deletion process.
- The deletion of the instance may take some time, depending on the instance size and configuration.

Final Notes:

VPC Settings: Be cautious about the VPC (Virtual Private Cloud) settings as this dictates which resources can access your RDS instance. If your VPC is misconfigured, it may block the connection to your database.
Backups: Before deleting any instance, ensure that you have backed up any important data, as deleting the database is irreversible if you don’t retain backups.
Monitoring: After creation, use the CloudWatch monitoring tool to keep track of database performance (CPU usage, memory consumption, etc.).

Efficient S3 Uploads: Your Cloud Guide

Shreya Nalawade — Tue, 31 Dec 2024 17:53:14 +0000

Storage as a service (STaaS) is a cloud business model in which a company leases or rents its storage infrastructure to another company or individuals to store data. Small companies and individuals often find this to be a convenient methodology for managing backups, and providing cost savings in personnel, hardware and physical space. As an alternative to storing magnetic tapes offsite in a vault, IT administrators are meeting their storage and backup needs by service level agreements (SLAs) with an SaaS provider, usually on a cost-per-gigabyte-stored and cost-per-data-transferred basis. The client transfers the data meant for storage to the service provider on a set schedule over the SaaS provider’s wide area network or over the Internet

Amazon S3
Amazon S3 (Simple Storage Service) provides object storage, which is built for storing and recovering any amount of information or data from anywhere over the internet. It provides this storage through a web services interface. While designed for developers for easier web-scale computing, it provides 99 percent durability and 99.99 percent availability of objects. It can also store computer files up to 5 terabytes in size.

Step 1: Navigating AWS S3

To begin implementing "Storage as a Service," log in to your AWS Management Console and head over to the Services menu. Under the Storage section, select S3 (Simple Storage Service).

AWS S3 is a highly scalable, secure, and durable storage solution where you can store and retrieve any amount of data at any time. Once you select S3, you’ll be greeted by the S3 dashboard, which serves as the central hub for managing your buckets, objects, and permissions. From here, you can create new storage buckets, define access policies, and integrate S3 with various applications. This step is foundational for setting up your cloud storage environment.

Step 2: Creating a Bucket in S3

After navigating to the S3 dashboard, the next step is to create a storage container, known as a bucket. Buckets are the foundational storage units in S3, where you can upload, organize, and manage your data.

Click "Create Bucket": On the S3 dashboard, locate the "Create Bucket" button at the top. Click it to open the bucket creation wizard.

Specify Bucket Details:
- Bucket Name: Provide a unique name for your bucket. AWS requires bucket names to be globally unique and follow specific naming conventions (e.g., no spaces, only lowercase).
- Region: Select the AWS region closest to your users or application to minimize latency and reduce costs.

Configure Options (Optional):
- Set versioning, tags, or server-side encryption as needed.
- Decide on access permissions. You can leave the bucket private or configure it for public access, depending on your use case.

Review and Create: Review your settings and click "Create Bucket." Your bucket is now ready to use for storing and managing objects.

Step 3: Verify Bucket Creation

Once you have successfully completed the previous steps, you will see a confirmation message indicating that the bucket has been created. In this example, the bucket is named 'bucketshreyacloud'.

To verify the creation:

Navigate back to the S3 dashboard.
Locate your newly created bucket in the list of buckets displayed.
Click on the 'bucketshreyacloud' in this case name to open its details page.

From here, you can begin configuring the bucket, uploading objects, and managing permissions to tailor it to your use case. Each bucket comes with its own settings, allowing you to customize features such as versioning, encryption, and public access.

Step 4: Uploading an Object to the Bucket

With the 'bucketshreyacloud' bucket created, the next step is to upload an object (a file or piece of data) to it. Here's how:

Open the Bucket:

From the S3 dashboard, click on the 'bucketshreyacloud' bucket name to open it.
Click "Upload":

On the bucket's details page, you'll see the "Upload" button. Click it to open the upload wizard.
Add Files:
- In the upload wizard, click "Add files" to select files from your local system.
- Alternatively, you can drag and drop files directly into the wizard.
Set Permissions (Optional):
- Adjust the object's access permissions if needed (e.g., make it public or restrict access).
- By default, objects inherit the bucket's permissions.
Review and Upload:

After selecting your files and configuring any necessary options, click "Upload".
Confirmation:

Once the upload completes, the object will appear in the bucket's object list. You can click on the object name to view details, including its URL, size, and metadata.

Congratulations! You've successfully uploaded an object to your 'bucketshreyacloud' bucket.

"Smart Solutions with Serverless: Event-Driven AWS Lambda in Action & Accessing in VPC"

Shreya Nalawade — Sat, 28 Dec 2024 20:32:17 +0000

Serverless computing is a cloud computing paradigm that abstracts away server management, allowing developers to focus solely on writing and deploying code. Here's a breakdown of the core concepts:

No Server Management: In traditional deployments, developers manage servers, including provisioning, scaling, and patching. Serverless computing eliminates this burden. The cloud provider handles infrastructure management, freeing developers to concentrate on application logic.
Pay-Per-Use Model: Serverless platforms charge based on resource consumption, typically execution time and memory used. This translates to cost-effectiveness, especially for applications with variable workloads. You only pay for the resources your code utilizes.
Event-Driven Architecture: Serverless functions are often triggered by events. These events can originate from various sources like file uploads to cloud storage, changes in databases, or HTTP requests. Functions execute in response to these events, enabling a highly responsive and scalable architecture.
Scheduled Execution: Functions can also be triggered based on schedules. This is useful for tasks that need to run periodically, such as sending automated reports or data backups.

Popular Serverless Platforms:

AWS Lambda: A serverless compute service offered by Amazon Web Services (AWS). It allows developers to upload code and define triggers for execution.
Google Cloud Functions: A serverless offering by Google Cloud Platform (GCP). Similar to AWS Lambda, it provides a platform for deploying and running code triggered by events or schedules.

Benefits of Serverless Computing:

Faster Development and Deployment: Eliminating server management streamlines development and deployment cycles.
Scalability: Serverless functions automatically scale based on demand, handling traffic spikes efficiently.
Cost-Effectiveness: The pay-per-use model ensures you only pay for the resources your code consumes.
Focus on Code: Developers can focus on writing code without being bogged down by infrastructure management.

Function Creation — Lambda

Creation of functions with Lambda can take two forms, either direct access of the Lambda Console or through the Serverless framework. I chose to use the Serverless framework, as it made deployment (later) much easier.

Serverless encourages centralizing all configuration of your functions into a single YML file. The YML file requires the function name as it will be displayed on the Lambda console, the name of the function in your code base, and some configuration on when to execute the function. In our case, we wanted to execute the function on an incoming HTTP request with a method of POST.

Implementation :

Go to AWS Lambda function

Create a Lambda function

To create a Lambda function, start by signing in to your AWS Management Console. Navigate to the "Services" tab and select Lambda under the "Compute" category. Once on the Lambda page, click on Create Function and choose the option Author from scratch. You will then need to provide essential details for your function, including a unique Function name (e.g., EventProcessor) and selecting your preferred Runtime, such as Python 3.x or Node.js 14.x. These initial steps set the foundation for building and deploying your serverless function effectively.

Lambda function created successfully

After completing the setup, your Lambda function is successfully created and ready for use. AWS provisions the necessary resources in the background, making your function available to handle triggers and execute code as configured. You can now test the function, integrate it with event sources like API Gateway or S3, and monitor its performance using the built-in tools provided by AWS Lambda.

Type the python code

A simple AWS Lambda function written in Python can be designed to process events and return a response. The lambda_handler serves as the entry point, logging the received event, extracting relevant data and constructing a JSON response. For example, the function can greet a user by Hello from lambda when provided in the event. Once deployed, this Lambda function can be tested with custom events in the AWS Lambda Console, where it processes the input and returns a dynamic response.

Add trigger via API Gateway

To trigger an AWS Lambda function using API Gateway in parallel (executing multiple Lambda functions simultaneously), follow these steps:

Set Up Your Lambda Functions
Ensure that each Lambda function you want to invoke is already created and deployed in AWS. These functions will be triggered by API Gateway.
Create an API in API Gateway
Go to the API Gateway service in the AWS Management Console.
Create a new HTTP API or REST API.

Great! Now that the trigger is created, you can test and optimize it as needed.

Configure API Gateway

Go to API Gateway in the AWS Management Console.
Choose the Lambda function you just wrote.
Deploy the API to a stage (e.g., dev).

Run the Code
Click on the API Gateway to get the function running. Thus, Event-Driven AWS Lambda in Action

Create a VPC for the serverless Lambda setup:

1. Create a New VPC

Go to the VPC dashboard in AWS and create a new VPC with a CIDR block (e.g., 10.0.0.0/16).

2. Create Subnets

Public Subnet: Assign a CIDR block (e.g., 10.0.0.0/24), enable public IP assignment, and tag it.
Private Subnets: Assign different CIDR blocks (e.g., 10.0.1.0/24), and do not assign public IPs.

3. Set Up an Internet Gateway

Create an Internet Gateway, attach it to the VPC, and update the Public Subnet's route table to route internet traffic (0.0.0.0/0) to the gateway.

4. Set Up a NAT Gateway (for Private Subnets)

Allocate an Elastic IP, create a NAT Gateway in the Public Subnet, and update the Private Subnets' route tables to route internet traffic (0.0.0.0/0) to the NAT Gateway.

5. Configure Security Groups

Create and configure Security Groups for Lambda, API Gateway, RDS, and any other services, ensuring the appropriate inbound and outbound rules.

6. Configure Lambda to Use VPC

In the Lambda Console, configure the function to run in the created VPC, attach it to the Private Subnets, and use the correct Security Group.

7. Set Up API Gateway

Create an API Gateway, integrate it with the Lambda function, and deploy the API to a stage (e.g., dev).

8. Test and Monitor

Test the Lambda function via API Gateway, and monitor performance using CloudWatch logs.

This VPC setup allows Lambda to run in private subnets, access RDS or other private services, and still have internet access via the NAT Gateway for external API calls.

Conclusion

By understanding serverless computing and implementing a basic function with event-driven or scheduled execution, you've gained valuable practical experience in this rapidly evolving cloud development paradigm. This knowledge can be applied to build more complex serverless applications that are scalable, cost-effective, and agile.

Integrating React with Django

Shreya Nalawade — Mon, 31 Jul 2023 17:59:59 +0000

Integrating React with Django involves setting up Django to serve the React frontend and enabling communication between the frontend and backend. Here's a detailed step-by-step guide to achieve this integration. Integrating React with Django offers numerous benefits and opens up a world of possibilities for building modern web applications. By combining these technologies, developers can leverage the strengths of both frameworks to create highly interactive, dynamic, and responsive user interfaces while utilizing Django's robust backend capabilities.

One of the primary advantages of using React with Django is the seamless user experience it provides. React's component-based architecture enables developers to build reusable UI components, resulting in a more modular and maintainable codebase. This modularity allows for easier code organization and promotes collaborative development among frontend and backend teams.

Moreover, React's virtual DOM efficiently updates only the necessary parts of the user interface, reducing the number of full page reloads and enhancing overall application performance. This optimization can significantly improve the user experience, making the application feel snappy and responsive.

Integrating React with Django also enables developers to create single-page applications (SPAs). SPAs offer a more fluid and seamless user experience by loading the initial page and subsequently updating the content dynamically without requiring a full page reload. Django serves as the backend API, providing data to React, which handles the frontend rendering and user interactions. This architecture enhances application performance and reduces server load, leading to faster load times and better scalability.

Another advantage lies in the vibrant React ecosystem, which offers a plethora of third-party libraries and tools for tasks such as state management (e.g., Redux, MobX), form handling (e.g., Formik, React Hook Form), and data visualization (e.g., Victory, Chart.js). Developers can easily integrate these libraries into their React components to add advanced functionality to the application. Furthermore, React's mobile development counterpart, React Native, can be seamlessly integrated with Django as well. This allows developers to share a significant portion of the application's codebase between the web and mobile versions, reducing development.

Create a new Django project

django-admin startproject projectname

Create a new Django app

cd projectname
python manage.py startapp appname

Set Up React App

mkdir appname/frontend

Initialize a new React app

npx create-react-app .

Build the React app to generate the production build files:

npm run build

Open the Django app's views.py file (appname/views.py) and create a view to serve the React app's index.html.

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/build/index.html')

Set Up URLs

from django.urls import path
from . import views

urlpatterns = [
    # Other URL patterns go here
    path('', views.index, name='index'),
]

Configure Django to serve static files from the React build directory. Add the following to the project's settings.py file.

import os

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'appname/frontend/build/static'),
]

Run Django Development Server

python manage.py runserver

Visit http://localhost:8000 to see your Django app with the integrated React frontend.