<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Yashwanth Kothakota</title>
    <description>The latest articles on DEV Community by Yashwanth Kothakota (@yashwanthkothakota9).</description>
    <link>https://dev.to/yashwanthkothakota9</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1231070%2Fee055d14-5b4c-4a1b-8ded-4d51305e68a6.jpeg</url>
      <title>DEV Community: Yashwanth Kothakota</title>
      <link>https://dev.to/yashwanthkothakota9</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yashwanthkothakota9"/>
    <language>en</language>
    <item>
      <title>From Idea To Development: My Journey Completing the Cloud Resume Challenge AWS</title>
      <dc:creator>Yashwanth Kothakota</dc:creator>
      <pubDate>Wed, 08 Jan 2025 17:00:53 +0000</pubDate>
      <link>https://dev.to/yashwanthkothakota9/from-idea-to-development-my-journey-completing-the-cloud-resume-challenge-aws-37ip</link>
      <guid>https://dev.to/yashwanthkothakota9/from-idea-to-development-my-journey-completing-the-cloud-resume-challenge-aws-37ip</guid>
      <description>&lt;p&gt;I recently earned my &lt;a href="https://www.credly.com/badges/d2721c03-cdbd-426b-9c6d-aeebb5dcb874/public_url" rel="noopener noreferrer"&gt;AWS Solutions Architect&lt;/a&gt;. Following that I want to showcase my knowledge through a project. Through &lt;a href="https://x.com/home" rel="noopener noreferrer"&gt;X&lt;/a&gt; I discovered the &lt;a href="https://cloudresumechallenge.dev/" rel="noopener noreferrer"&gt;Cloud resume challenge&lt;/a&gt;. I thought it is a great way to present my skills and gain real-world experience. This blog is about how I completed this challenge, the decisions I made and why I made them.&lt;/p&gt;

&lt;p&gt;The Cloud Resume Challenge is a hands-on project that provides a taste of real-world tasks you might encounter in a cloud role. It involves a series of tasks ranging from creating a basic portfolio template to configuring CI/CD pipelines with automatic deployments. The full requirements can be found &lt;a href="https://cloudresumechallenge.dev/docs/the-challenge/aws/" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let me simplify the tasks involved:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a Portfolio website using &lt;code&gt;html&lt;/code&gt;, &lt;code&gt;css&lt;/code&gt; or any &lt;code&gt;framework&lt;/code&gt; of your choice.&lt;/li&gt;
&lt;li&gt;Upload the static website to &lt;code&gt;AWS S3&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Provide HTTPS for S3 url using &lt;code&gt;Amazon CloudFront&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Set up a custom domain name pointing to CloudFront distribution via &lt;code&gt;Amazon Route53&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Store website visitors count in &lt;code&gt;Amazon DynamoDB&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Write an &lt;code&gt;AWS Lambda&lt;/code&gt; function to fetch, increment, and return the visitor count from DynamoDB.&lt;/li&gt;
&lt;li&gt;Integrate the API call through Amazon API Gateway for loose coupling between the frontend and backend.&lt;/li&gt;
&lt;li&gt;Write &lt;code&gt;tests&lt;/code&gt; for the backend.&lt;/li&gt;
&lt;li&gt;Provision infrastructure using IaC tool like &lt;code&gt;Terraform&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;GitHub&lt;/code&gt; for source control.&lt;/li&gt;
&lt;li&gt;Implement separate CI/CD pipelines for the frontend and backend using &lt;code&gt;GitHub Actions&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Frontend:
&lt;/h2&gt;

&lt;p&gt;I used &lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Nextjs&lt;/a&gt; React framework along with &lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;TailwindCSS&lt;/a&gt; for the frontend. As the portfolio website consists of only one page,  I split it into different components and combined them in &lt;code&gt;page.tsx&lt;/code&gt;. Running npm run build generates an &lt;code&gt;out&lt;/code&gt; folder, which I uploaded to an &lt;code&gt;Amazon S3&lt;/code&gt; bucket. &lt;br&gt;
Initially, I encountered an issue with Next.js’s Image tag. After building, Next.js modifies the source URL as part of its optimization process, causing errors when the out folder is uploaded to S3. Adding the unoptimized attribute to the Image tag resolved the issue.&lt;/p&gt;

&lt;h2&gt;
  
  
  Backend:
&lt;/h2&gt;

&lt;p&gt;I used &lt;a href="https://www.python.org/" rel="noopener noreferrer"&gt;Python&lt;/a&gt; and &lt;a href="https://boto3.amazonaws.com/v1/documentation/api/latest/index.html" rel="noopener noreferrer"&gt;Boto3&lt;/a&gt; to write a Lambda function which retrieves and updates the &lt;code&gt;visitors_count&lt;/code&gt; in &lt;code&gt;DynamoDB&lt;/code&gt;. &lt;a href="https://boto3.amazonaws.com/v1/documentation/api/latest/index.html" rel="noopener noreferrer"&gt;Boto3&lt;/a&gt; is an AWS SDK for managing AWS resources through code. &lt;br&gt;
For testing, I used &lt;a href="https://docs.pytest.org/en/stable/" rel="noopener noreferrer"&gt;Pytest&lt;/a&gt; and &lt;a href="https://docs.getmoto.org/en/latest/" rel="noopener noreferrer"&gt;Moto&lt;/a&gt;, which mocks AWS services for testing purposes. Although I had no prior experience with Boto3 or Moto, I relied heavily on documentation to understand and implement them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Infrastructure:
&lt;/h2&gt;

&lt;p&gt;I used &lt;a href="https://www.terraform.io/" rel="noopener noreferrer"&gt;Terraform&lt;/a&gt; to provision the infrastructure on AWS. I created a new S3 bucket and DynamoDB table to store the Terraform state remotely and enable locking. &lt;br&gt;
This &lt;a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs" rel="noopener noreferrer"&gt;resource&lt;/a&gt; is immensely helpful. As a beginner with Terraform, this part took considerable time. I read the &lt;a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs" rel="noopener noreferrer"&gt;docs&lt;/a&gt; and practiced creating resources with examples before implementing the final setup. &lt;/p&gt;

&lt;h2&gt;
  
  
  CICD:
&lt;/h2&gt;

&lt;p&gt;For me most challenging part was this one. Initially, I created two pipelines: &lt;code&gt;frontend-ci&lt;/code&gt; and &lt;code&gt;backend-ci&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;frontend-ci&lt;/code&gt;: Installed dependencies, ran tests, built the project, deployed to S3, and invalidated the CloudFront cache.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;backend-ci&lt;/code&gt;: Installed dependencies, ran tests, created a deployment package, and deployed it to Lambda.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, this approach had limitations:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Future infrastructure changes would require manual updates.&lt;/li&gt;
&lt;li&gt;Frontend and backend pipelines needed resource names and IDs from terraform apply.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To address this, I created three pipelines:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;infrastructure-ci&lt;/code&gt;: Triggered by changes to *.tf files. It creates infrastructure, uploads Terraform outputs to an S3 bucket, and triggers the other pipelines.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;frontend-ci&lt;/code&gt;: Triggered by changes in frontend/* or events from &lt;code&gt;infrastructure-ci&lt;/code&gt;. It retrieves Terraform outputs from the S3 bucket.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;backend-ci&lt;/code&gt;: Triggered by changes in backend/* or events from &lt;code&gt;infrastructure-ci&lt;/code&gt;. It also retrieves Terraform outputs from the S3 bucket.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This approach decouples infrastructure, frontend, and backend, allowing minimal changes if switching cloud providers in the future.&lt;/p&gt;

&lt;p&gt;Final architecture:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe71hxh984y23t0wfmm33.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe71hxh984y23t0wfmm33.png" alt="HLD" width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Takeaways:
&lt;/h2&gt;

&lt;p&gt;Every project comes with challenges and hurdles, and this was no different. From debugging CI/CD errors to writing Terraform configurations with correct integrations, this project was a great learning experience.&lt;/p&gt;

&lt;p&gt;By the end of the challenge, I gained:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A clearer understanding of cloud concepts.&lt;/li&gt;
&lt;li&gt;Hands-on experience in cloud development.&lt;/li&gt;
&lt;li&gt;Problem-solving skills and knowledge of where to find resources.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want practical experience in the cloud, I highly recommend taking on the &lt;br&gt;
&lt;a href="https://cloudresumechallenge.dev/docs/the-challenge/aws/" rel="noopener noreferrer"&gt;challenge&lt;/a&gt; you will definitely love the journey.&lt;/p&gt;

&lt;p&gt;Finally, don’t give up! If you'd like to check out my implementation, here’s the &lt;a href="https://github.com/YashwanthKothakota9/myportfolio-aws" rel="noopener noreferrer"&gt;repo&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you have suggestions, best practices, or questions, feel free to comment. I would love to connect with you on &lt;a href="https://x.com/Yashcsp22" rel="noopener noreferrer"&gt;X&lt;/a&gt; and &lt;a href="https://www.linkedin.com/in/yashwanthkothakota/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Thanks for reading! 😊&lt;/p&gt;

</description>
      <category>aws</category>
      <category>awsjourney</category>
      <category>mycloudjourney</category>
      <category>cloud</category>
    </item>
  </channel>
</rss>
