DEV Community: Arya Narayan Tiwari

New Year, New You: A Luxury iOS Dev Portfolio Powered by Antigravity

Arya Narayan Tiwari — Sun, 01 Feb 2026 20:04:41 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI.

About Me

I’m Arya Narayan Tiwari, an iOS Developer based in Indore. My day-to-day involves crafting high-end applications for luxury hotels worldwide at DigiValet. After a long break since my college days, I’m excited to be back in the DEV community to share how I’ve integrated AI into my development workflow.

Portfolio

How I Built It

To ensure a smooth, app-like experience that mirrors the quality of the hospitality software I build for iOS, I chose a modern web stack:

Framework: React + Vite
Styling: Tailwind CSS
Animations: Framer Motion (for that "premium" feel)
Deployment: Google Cloud Run

Google AI Tools Used: The Antigravity Edge

I leveraged Antigravity as my primary AI collaborator throughout this project. It provided a significant edge in three specific areas:

Bridging the Paradigm Gap: As an iOS dev moving into a React/Vite stack, Antigravity helped me translate complex Swift UI patterns into functional Tailwind and Framer Motion components instantly.
Predictive Refactoring: The IDE anticipated structural needs for my Cloud Run deployment, suggesting Docker optimizations and containerization best practices before I even ran into build errors.
Design-to-Code Synergy: It helped me maintain a "luxury" aesthetic—clean, bold typography and snappy transitions—by rapidly iterating on CSS variables to match my professional vision.

What I'm Proud Of

AI-Driven Interaction: Creating a rich, interactive way to showcase my journey through a portfolio built alongside AI.
Performance: Ensuring the site is responsive, snappy, and maintains a high-performance feel across all devices.
Community Return: Being back on DEV! It feels great to contribute to the community again after my journey from student to professional.

Reflection

Building this reminded me that while the platforms change—from Swift/Xcode to React/Antigravity—the goal remains the same: creating seamless, high-quality user experiences.

Happy Coding! 🚀

Atlas Store - E Commerce web app with Next.js and TailwindCSS

Arya Narayan Tiwari — Thu, 13 Jan 2022 10:09:30 +0000

Overview of My Submission

I created an E-Commerce store using Atlas search and Realm functions to make the web app serverless. Atlas search's fuzzy logic is enabled so that even if search term is not completely correct you can still receive result. You can browse, search for product and add the products to cart. Also localStorage is enabled so that even if you close the browser, the items in your cart stay. The website is responsive for smaller screens.

Submission Category: E-Commerce Creation

Link to Code

aryanarayantiwari / atlas-store

Atlas Store - An E commerce store using Next.js, TailwindCSS and MongoDB Atlas.

Atlas Store

Atlas Store is an E-commerce store project for MongoDB Atlas Hackathon on DEV Community. This project is build using Next.js and TailwindCSS for Frontend and MongoDB Atlas for Backend and is hosted on Vercel.

Live Demo: Atlas Store

It uses MongoDB Realm functions and Atlas Search for browsing and searching of products and react-use-cart npm package to handle cart.

License

Apache 2.0

View on GitHub

Live Demo

Additional Resources / Info

I'm still learning Next and TailwindCSS and this project was a great learning experience for me as a beginner. Here are some resources that helped me build this project.

1.MongoDB Jumpstart 2021
2.React Use Cart NPM Package
3.freeCodeCamp's Article on Routing in Next.js
4.MongoDB Crash Course

Landing Page

Product Component

Atlas Search Implementation

Cart Functionality

Hacktoberfest Action

Arya Narayan Tiwari — Wed, 10 Nov 2021 19:12:08 +0000

My Workflow

I created my workflow by customizing the pr-labeler github action by TimonVS on github action marketplace. This workflow works by matching branch patterns name such that whenever a branch with matching pattern makes a pull request and when that branch is merged and closed it adds the hacktoberfest and hacktoberfest-accepted label to the PRs, which automates the task for hacktoberfest maintainers to manually add the labels.

What the workflow does ?

When a pull request is closed with the branch name hack/[anything] the Action will automatically apply the hacktoberfest and hacktoberfest-acccepted label once the PR is merged.

Example

I created a new file index.js in a new branch with the matching pattern name hack/test then committed the change and opened a pull request to the master branch.
As you can see currently there are no labels assigned to the pull request also no workflow has been run yet.
Now I merge the PR to the master branch to run the worklfow.
The merge action here triggers the workflow
Finally when the pull request is closed and merged the labels hacktoberfest and hacktoberfest-accepted have been added to the pull request.

Submission Category: Maintainer Must-Haves

Yaml File or Link to Code

Github Repository Link

aryanarayantiwari / hacktoberfest-action

This is a github action that adds hacktoberfest and hacktoberfest-accepted label to a merged pull request with matching branch name patterns.

Hacktoberfest Action

Merge pull request with ease

This is a github action made by using and customizing the pr-labeler github action by TimonVS from the github actions marketplace.

Features

Add labels to pull request with matching patterns in branch-name.
Automatically adds the lables once the PR is merged.
The current matching pattern for branchname is 'hack/*' but one can customise it by editing the 'pr-labeler.yml' file in .github folder.
Easy to Use
Automates the task of adding labels manually to a PR while merging during Hacktoberfest

Usage

Add .github/workflows/pr-labeler.yml with the following:

name: PR Labeler
on:
  pull_request:
    types: [closed]

jobs:
  pr-labeler:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
      - uses: TimonVS/pr-labeler-action@v3
        with:
          configuration-path: .github/pr-labeler.yml # optional, .github/pr-labeler.yml is the default value
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Configuration

Configure by creating a .github/pr-labeler.yml file.

For example:

hacktoberfest

…

View on GitHub

Yaml File

name: PR Labeler
on:
  pull_request:
    types: [closed]

jobs:
  pr-labeler:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
      - uses: TimonVS/pr-labeler-action@v3
        with:
          configuration-path: .github/pr-labeler.yml # optional, .github/pr-labeler.yml is the default value
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Additional Resources / Info

TimonVS PR-labeler

Halloween🎃 with JS!

Arya Narayan Tiwari — Sat, 30 Oct 2021 18:22:35 +0000

Make your first project in JavaScript with DOM manipulation and surprise your friends on halloween.

About the Project

So, I was watching Dev Ed latest YouTube video where he recreated the classic scary maze game with JS, and that's where I got idea for my project. I wanted to create something similar to his project but not wanted it to be a maze game. So I thought I would apply his logic to the classic switch bulb project in JS where a user clicks on a button to turn the light 'on' or 'off'. Here when a user click on the button to turn the lights off we have a horror sound playing and Pennywise from IT movie series showing up with a laugh.

Setting up HTML

There isn't much required in html file just the starting state of
the contents of file.

    <h1 class="head">Don't turn off the lights 💡</h1>
    <button class="btn">💡LIGHTS ON</button>
    <img src="./img/pennywise.png" class="penny" alt="pennywise">
    <audio src="./audio/scream.mp3" class="spooky-audio"></audio>
    <audio src="./audio/laugh.mp3" class="laugh"></audio>
    <script src="./js/main.js"></script>

Setting up CSS

CSS adds a little bit of styling to the project also with some spooky font styles.

@import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Fruktur',sans-serif;
    color: #fff;
    background-color: #485461;
    background-image: linear-gradient(0deg,#485461 0%, #28313b 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 25px auto;
    margin: 80px auto;
    font-weight: 600;
    letter-spacing: 5px;
    overflow: hidden;
}
button{
    margin: 25px auto;
    padding: 10px 20px;
    color: #fff;
    background-color: #28313b;
    outline: none;
    border: 2px solid #28313b;
    border-radius: 5px;
    font-weight: 800;
    cursor: pointer;
}
button:hover{
border: 2px solid orange;
}
img{
    display:none;
}

Setting up JS

First we get all the DOM items whose behavior we want to change.

const btn = document.querySelector(".btn")
const head = document.querySelector(".head")
const penny = document.querySelector(".penny")
const audio = document.querySelector(".spooky-audio")
const laugh = document.querySelector(".laugh")

Then we get to the event listener part to listen for click events on button.

The event listener just contains a bunch of if and else statements that check the current value of the heading and button text with the innerHTML method and takes actions based on these values.

btn.addEventListener("click",(e) => {
    if(btn.innerHTML == "💡LIGHTS ON"){
        btn.innerHTML = "🎈LIGHTS OFF"
    }
    else{
        btn.innerHTML = "💡LIGHTS ON"
    }
    if(penny.style.display == "block"){
        penny.style.display = "none"
    }
    else{
        penny.style.display="block"
    }
    if(head.innerHTML == "Don't turn off the lights 💡"){
        head.innerHTML="You shouldn't have done that!🎃"
    }
    else{
        head.innerHTML="Don't turn off the lights 💡"
    }
    laugh.volume = 1
    audio.volume = 1
    if(btn.innerHTML=="🎈LIGHTS OFF"){
    laugh.play()
    audio.play()    
    }
    else{
        laugh.pause()
        audio.pause()
    }
})

That's it, you have just created a fun JS DOM manipulation project within an hour and you can show it your friends and surprise them on Halloween 👍.

Important links -

Source Code
Project Demo