DEV Community: jicoing

Building Paikari : A Real-Time Grocery Price Comparison App

jicoing — Mon, 24 Feb 2025 10:11:04 +0000

Paikari India - paikari-seven.vercel.app

Paikari India is a web-based application designed to provide users with real-time grocery price comparisons across the top 5 cities in India. Users can search for specific grocery items and instantly view the current prices in cities like Mumbai, Delhi, Bangalore, Chennai, and Kolkata.

Features

Real-time price comparison across major Indian cities
Search functionality with autocomplete
Dynamic price updates
City-based filtering
Optional user accounts for saving preferences
Mobile responsive design

Tech Stack

Frontend: Next.js, React, Tailwind CSS, ShadCN UI
Backend: Supabase (PostgreSQL)
Authentication: Supabase Auth
Deployment: Vercel

Getting Started

Clone the repository:

git clone https://github.com/your-repo/paikari-india.git
cd paikari-india

Install dependencies:

npm install

Set up environment variables: Create a .env.local file with the following:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Building Paikari : A Real-Time Grocery Price Comparison App

jicoing — Sun, 23 Feb 2025 09:06:01 +0000

Paikari India - paikari-seven.vercel.app

Features

Real-time price comparison across major Indian cities
Search functionality with autocomplete
Dynamic price updates
City-based filtering
Optional user accounts for saving preferences
Mobile responsive design

Tech Stack

Frontend: Next.js, React, Tailwind CSS, ShadCN UI
Backend: Supabase (PostgreSQL)
Authentication: Supabase Auth
Deployment: Vercel

Getting Started

Clone the repository:

git clone https://github.com/your-repo/paikari-india.git
cd paikari-india

Install dependencies:

npm install

Set up environment variables: Create a .env.local file with the following:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

SNS notification for S3 static website

jicoing — Mon, 19 Jul 2021 07:55:23 +0000

About

With S3 event notification we can configure our S3 bucket to easily send out event notification mail, on every visit to our static website. We need to setup our cloudfront distribution for standard logging. Once the log data is PUT into our S3 bucket, an notification is sent out via SNS topic to the subscription of our choice.

Cloudfront

First we need to setup our Cloudfront distribution for access logging.

Go the the distribution.
Edit settings
Enable Standard logging Mention the bucket name and optional prefix.
Once standard logging is setup we can see the log data periodically being PUT in the specified S3 bucket.

SNS

Now we can configure our SNS topic to send nofication mail on every log data PUT to our S3 bucket.

Create a SNS topic The SNS topic must be in the same region as the bucket. Mention name and display name and create Once the topic is created, add a subscription with protocol email and destination mail ID. You will be receiving a confirmation mail, go ahead and confirm it. Once it is confirmed it should look like this.

Configure SNS access policy

Now we have to configure the SNS topic access policy to access the S3 bucket.

Edit the SNS topic
Replace the access policy JSON with the below policy after replacing SNS-topic-ARN, bucket-name, bucket-owner-account-id with the required ones. Official guide.

S3

Go to properties tabs from inside your destination S3 bucket and create event notification.

Give an event name, and mention the optional prefix where Cloudfront log data is stored.

Check event type as PUT

Check SNS as your destination, your topic should show up in the drop down automatically, if the topic region matches the bucket region and the SNS policy is configured correctly.

Click finish.
We are now configured to receive notifications!

Sample notification mail showing event time and log file of type gz

Multi-tier Architecture on AWS

jicoing — Sun, 18 Jul 2021 18:30:16 +0000

About

Build a multi-tier architecture project with various AWS services for real time environments.

R53 - To create record sets within hosted zones.
VPC - To create subnets, internet gateway, route tables, security groups.
SNS - For notification services.
ELB - For load balancing.
ACM - For SSL certificates.
EC2 - Instances with elastic IP and Auto Scaling group attached.
RDS - Master database with multi - AZ configuration.

Steps :

1. Public and private subnets, IGW, NAT Gateway,etc.

VPC

Public Subnet - 1

Public Subnet - 2

Private Subnet - 1

Private Subnet - 2

Created

IGW

Attached to VPC

Private Route table for VPC

NAT Gateway with attached Elastic IP

Associate private subnets with NAT Gateway
Associate NAT gateway to Private RT

Attach private subnets to Private RT

Attach IGW to Public RT

VPC setup completed!

2. Create EC2 instance with Userdata (Bootstrapping) script.

Amazon Linux 2 -T2 micro
VPC - Komla-VPC

Create IAM role for EC2 service for S3 access

Attach it to the EC2 instance

Create SNS topic

Add subscription email

EC2 setup complete!

3. Create RDS Security Group and RDS subnet group with Private Subnets.

Create security group

Provided access to only webserver SG

Create Database
Type - MySQL
VPC - Komla-VPC
SG - Security group for incoming traffic from EC2 on port 3306.
Instance - db.t2.micro

Database created!
Create ELB

VPC - Komla-VPC

Spread across Public subnets

Create SG for load balancer

Health check parameters

Add EC2 instance

ELB created!

Apache server operating. EC2 instance healthy!

4. Launch RDS instance with Multi-AZ.

5. Install WordPress.

Latest version of WordPress requires atleast php 5.6. Amazon t2 micro comes with php 5.4 standard. To bypass this issue I installed php 7. Refer.

           sudo amazon-linux-extras install -y php7.2
           sudo service httpd restart

Installing Wordpress: Official tutorial
wget https://wordpress.org/latest.tar.gz

Extracted the downloaded package from wordpress with
tar -xzf latest.tar.gz

Moved the contents of wordpress directory to /var/www/html

cd /etc/httpd/conf
edit httpd.conf

Search for "AllowOverride None" change None to All.
It is in /var/www/html directory.
Change permissions on html directory.
chown -R apache:apache /var/www/html.

Wordpress opens on the Public IP of EC2 instance!
http://18.***.161.241/wp-admin/setup-config.php

Check whether RDS is accessible via EC2 instance.

After configuring the dbname,username, password, hostname the wordpress application is up and running on Public IP of EC2 instance on the browser!

6. Create Route53 hosted zone to map with domain.

The ELB DNS is configured as an A record for the domain name wordpress.komlalebu.com.

7. Create AMI for EC2.

8. Create ELB.

The EC2 instances are now accessed with the ELB DNS.

9. Create launch configuration from AMI.

Running two desired instances

10. Create ASG for launch configuration.

VPC - Komla-VPC
Subnets - Public subnets
ELB - Komla-ELB
Desired - 2 instances
Minimum - 1 instances
Maximun - 2 instances

Scaling policy

11. Health Check and fault tolerance.

Terminated all instances created by Auto Scaling for testing.

Health check failed and a new instance was created from AMI with ASG.

Notification received in mail whenever instances are terminated or launched.

Website up and running within minutes of server failure!

Mythical Mysfits

jicoing — Fri, 09 Jul 2021 05:28:33 +0000

About

A tutorial for developers that want to learn about how to build modern applications on top of AWS. We build a sample website that leverages infrastructure as code, containers, serverless code functions, CI/CD, and more.
Github: https://github.com/aws-samples/aws-modern-application-workshop/tree/python

Architecture

S3 web hosting with CloudFront and OAI

1. Cloned git repository

2. Git checkout branch python in VSCode

3. S3 bucket created

4. Index.html uploaded from github source code to S3.

5. Static website hosted in S3 bucket

6. Bucket policy changed

7. Static website is accessible from the URL endpoint

Cloudfront

8. Cloudfront distribution created

9. OAI created to restrict bucket access to Cloudfront user.

10. Bucket policy automatically updated to retrict access to only OAI

11. Verified the bucket is only accessible to OAI

Note:

If you are getting CloudFront Error: This XML file does not appear to have any style information associated with it [duplicate]
go to Cloud front -> Select you cloud distribution detail -> select tab General -> Select edit -> In this form Setup the property Default Root Object to index.html
Ref: https://stackoverflow.com/questions/44741287/cloudfront-error-this-xml-file-does-not-appear-to-have-any-style-information-as

Cloud9 - Secure static web hosting

In this module, we create a cloud-based IDE on AWS Cloud9 and deploy the first version of the static Mythical Mysfits website.

1. Cloned the git repository into Cloud9

2. Bucket created with CLI

3. Static website and Bucket policy added with CLI

4. index.html uploaded from module-1 to bucket

5. Website is visible - http://mythical-misfitfrontend.s3-website-us-east-1.amazonaws.com/

Creating the Core Infrastructure using AWS CloudFormation

1. create-stack from Cloud9

Describe stack

Created

Deploying a Service with AWS Fargate

1. Navigate to ~/environment/module-2/app

2. Build the docker image

3. Testing the Service Locally

Preview JSON response from running service

Pushing the Docker Image to Amazon ECR

1. ECR repository created

2. Login

3. Docker push to ECR

4. Describe image

Configuring the Service Prerequisites in Amazon ECS

1. Create ECS cluster

2. Task definition update

3. Task definition registered

Enabling a Load Balanced Fargate Service

1. Provision a new NLB

nlb.json

2. Create target group

target-group.json

3. Create listener

Console

Load balancer/Listeners

Target group

4. Updated service-definition.json

5. ECS service created

Service running in cluster

Testing the service

1. DNS copied from nlb-output.json

2. Running from browser to get json response

Updating frontend

1. index.html API Endpoint updated to NLB DNS

2. Updated index.html copied to S3 bucket - mythical-misfitfrontend

Verify S3 static website URL

Request going out to ELB DNS from static website URL

Frontend connected to backend container through the load balancer!

Automating Deployments using AWS Code Services

1. Creating a new bucket for artifacts

2. Updated artifacts bucket policy

3. Grant access to this bucket to your CI/CD pipeline

4. Create Code-Commit repository

5. Create code-build project

Create pipeline in Codepipeline

1. Update codepipeline.json

`2. Create codepipeline

3. Updated ECR policy

4. Enable Automated Access to ECR Image Repository

Test the CI/CD Pipeline

1. Configure git and clone

2. Copied the application files to ythicalMysfitsService-Repository

3. Run git commands to push in your code changes

4. CodePipeline in action on git push

Automated Deployment - Testing a code change in mysfits-response.json

Before

Change in mysfits-response.json

git push

CodePipeline triggered

After

Adding a Data Tier with Amazon DynamoDB

Create table with CLI

Table scan shows empty table

Website bucket updated with new URL

CRUD API

jicoing — Wed, 07 Jul 2021 04:30:20 +0000

About

Goal in this workshop is to build a very simple CRUD (Create, read, update, delete) API. Starting with creating a DynamoDB table using the DynamoDB console, to creating a Lambda function in the AWS Lambda console. Next you will configure an HTTP API using the API Gateway console and last, after launching an AWS Cloud9 IDE you will use it to test your API.
Read more: https://simple-crud-api.workshop.aws/

DynamoDB table created

Lambda function created

API is created

Routes created

Integration created

Integration attached

PUT confirm on API call with Cloud9

Item in DynamoDB table

GET all items

GET an item

Delete items

Migration with AWS

jicoing — Mon, 28 Jun 2021 22:30:53 +0000

About

In this workshop we focus on Migrate & Modernize phase, and learn how to migrate a fictional application to AWS.
Read more: https://application-migration-with-aws.workshop.aws/en/

Cloudformation Template

region - us-west-2

Stack details

Stack creation complete

Deployed environment

AWS Migration hub connected

Database migration

Setup networking

RI-SG security group

DB-SG security group

Create target DB

Database created

Created replication instance

DMS replication instance created

SSH into DbServer with Cloud9 and granted privileges

Created a folder for bin logs

MySQL service restarted

Binary logging status is now set to ON

Source and Target endpoints created

DMS task created

Demo cats and dogs

jicoing — Mon, 21 Jun 2021 19:44:05 +0000

About

We will manage Docker images of cats and dogs in Amazon ECR.
Create Amazon ECS cluster, task definitions, and services.Choose right launch type either EC2 or Fargate for each service. Deploy simple containerized application cats and dogs path-routed through ALB. Monitor ECS cluster and services in Amazon CloudWatch Container Insights. Centralize container logs using AWS FireLens and Amazon CloudWatch Logs. Scale ECS services and cluster automatically.
Read more:https://ecs-cats-dogs.workshop.aws/en/01_intro.html

IAM role created - Administrator access.

Cloudformation stack created.

Region: ap-northeast-2

What we will do.

Create Amazon ECR cats, dogs repositories.
build and tag cats, dogs docker images from AWS Cloud9 IDE.
Push the images to Amazon ECR.

AmazonEC2ContainerRegistryFullAccess policy attached to ecs-demogo

Cloud9 instance attached ecs-demogo IAM role.

AWS managed credentials turned off in Cloud9.

GetCallerIdentity command ran.

Updated and installed CLI tools

Current region set as default.

Cats, Dogs repository created in ECR.

cats image built with Dockerfile.

dogs image built with Dockerfile.

cats image pushed to ECR repository.

dogs image pushed to ECR repository.

Cats image in ECR.

Dogs image in ECR.

DEMOGO-ECS cluster created.

IAM policy attached to ecsInstancerole

Task definition created.

catsdef,dogsdef created.

ALB created

ECS services created.

Cats services created.

Dogs service created.

Failed to load application

Failure reason

Task did not run properly.

Codeguru-AWS

jicoing — Tue, 15 Jun 2021 14:56:29 +0000

About

This project integrates services such as CodeGuru service, CodeCommit, CodeBuild, CodePipeline, ALB and deploys a sample application.
Read more: https://codeguru-codereview-appperformance.workshop.aws/

Cloud9

Cloud9 setup done.
Region - us-east-1

Demo Profiling Group

Cloudformtion stack created

SSH to application to check running application

Checking DemoProfileGroup

Demo Flame group

Recommendations report

Codeguru connnected to Github

Sample app repository fetched

Copied the java class file to new location

Devops-ecs-fargate-terraform

jicoing — Fri, 11 Jun 2021 11:14:33 +0000

About

This workshop enables hands-on experience using Terraform with AWS Continuous Integration and Continuous Delivery (CI/CD) tools to deploy workloads to Amazon ECS and AWS Fargate.

Admin role created in IAM

workshop-admin role attached to Cloud9 EC2 instance

AWS managed temporary credentials disabled from Cloud9

Verified IAM role

Download and unzip

Verified terraform path

Text utilities installed

Configured the AWS cli with our current region as default

Setup environmeent variables for account Id

Downloaded workshop resources

Setup SSM parameter store password for DB

Edited terraform.tfvars

Terraform init

Built the infrastructure

ALB

ECS cluster

ECR repository

CodeCommit Repo

CodeBuild Repo

CodePipeline in failed state

Local Git setup

Setting remote repo

Code push to remote repo - pipeline started

ALB address retrieved from Terraform

Pet clinic app viewed from browser with ALB address

Welcome string changed

Changed code pushed to pipeline

Cleanup

All resources terminated.

Bucket deleted

AWS Workshop: cicd with Jenkins

jicoing — Thu, 10 Jun 2021 21:18:14 +0000

About

In this workshop, we integrate AWS CodeBuild and AWS CodeDeploy with Jenkins and execute the CICD pipeline to build and deploy the application. We will also spin up an infrastructure with ALB and EC2’s on which the application would be deployed.
Read more: https://third-party-integration-codebuild-codedeploy-plugins.workshop.aws/en/

Unzip Sample Application

Commit the files to Github Repo

Cloudformation stack contains

Amazon S3 bucket
IAM S3 bucket policy
JenkinsRole
CodeDeploy application
CodeDeploy service role
CodeDeployRole
CodeBuildRole
Jenkins server
CodeBuild project
Auto Scaling group
Auto Scaling launch configurations
Security groups

ELBDNS generated in output

Sample page generated by ELB

SSH into Jenkins server

Retrieve password for Jenkins server - SSH

/var/lib/jenkins/secrets/initialAdminPassword

Jenkins Configuration & deployment

Plugins installation

Starting a freestyle Project in Jenkins server

Build step failure

After multiple tries and debugging sessions the build step kept failing.
ERROR: Build step failed - response HTTP/1.1 301 Moved Permanently but no location header

AWS Workshop: CICD-pipeline-cfn-ecs-fargate-bluegreen

jicoing — Wed, 09 Jun 2021 16:52:05 +0000

About

In this workshop we learn how to build a CI/CD pipeline to develop, containerize and deploy a web-based application on AWS Fargate using lambda for blue/green deployment.
Read more: https://workshops.aws/card/CICD-Pipeline-Cfn-ECS-Fargate-BlueGreen

Cloud9

Cloud9 environment was setup in us-east-1.
Environment: AWS-Workshop

Github Token

Github access token was setup.

CI/CD Pipeline built

FORK THE REPO
CLONE THE REPO
SWITCH TO FARGATE BRANCH
RUN SCRIPT (IAC)

Inputs

S3 Bucket: jicoing-aws-bucket
CloudFormation Stack Name: Workshop-stack-jicoing
GitHubUser: jicoing
GitHubToken: *************

Stack

Workshop-stack-jicoing

Deployment Pipeline

Deployment pipeline is built using Cloudformation.

Deploy Approve

Load balancer URL

Output

Target groups

ECS Cluster

Commit new code - index.php modified

The index.php file is edited to give a new background colour #b03043.

Blue/Green swap approval - CodePipeline

Output

New background is red