DEV Community: Kyle Y. Parsotan

Meta VR Start Developer Competition 2026

Kyle Y. Parsotan — Thu, 12 Nov 2026 18:27:44 +0000

This is a submission for the MLH x DEV Writing Challenge

What I Built

IRON FRONT VR — Operation Black Iron
A Call of Duty-style first-person shooter for Meta Quest (WebXR in the Quest Browser) that also plays on desktop with mouse and keyboard. It has an open world, a 5-mission story campaign, round-based Zombies, Training, a squad mode and a Mixed Reality drill.

Enemies, squadmates and zombies are realistic skinned human characters with real walk, run and idle animations. Their arms are posed live with inverse kinematics, so soldiers actually aim their rifles at you.

Built with Meta's Immersive Web SDK
This project was generated with npm create @iwsdk@latest (IWSDK 1.1.0-rc.2, three.js via super-three r185) and the game was wired into it. If you'd rather stay on the last stable release, set @iwsdk/core, @iwsdk/cli and @iwsdk/vite-plugin-dev to 1.0.1 and three to npm:super-three@0.181.0 in package.json; the game works on both.

The game runs inside an IWSDK World (src/index.js). IWSDK owns the renderer, scene, player rig, XR session, controller input and frame loop, and the game is registered as an ECS System. It's configured in iwsdk.config.json (VR mode, local-floor, 75° FOV, 900 m far plane, Quest 3 emulator).

Ship to the Meta Horizon Store (immersive PWA)
The app is already prepared: there's public/manifest.webmanifest, the 192, 512 and maskable icons, and an auto-enter-VR step in src/index.js that runs only when installed as a Quest app (it's gated on getDigitalGoodsService). Browser tabs keep the Enter VR button.

Host it on a stable HTTPS origin, for example https://iron-front-vr.vercel.app, not a preview or tunnel URL.

Install Meta's bubblewrap with npm i -g @meta-quest/bubblewrap-cli, then run bubblewrap doctor once in a terminal and accept the JDK and Android SDK installs.

Create a signing key and keep it forever. You can't update the app without it: keytool -genkeypair -v -keystore twa/android.keystore -alias android -keyalg RSA -keysize 2048 -validity 10000
Copy twa/twa-manifest.template.json to twa/twa-manifest.json and fill in your domain, keystore path and (later) your Horizon App ID. Keep "isMetaQuest": true and "horizonOSAppMode": "immersive".

Build the APK: cd twa && BUBBLEWRAP_KEYSTORE_PASSWORD=… BUBBLEWRAP_KEY_PASSWORD=… bubblewrap update && bubblewrap build
Digital Asset Links: copy twa/assetlinks.template.json to public/.well-known/assetlinks.json with your keystore's SHA-256 (keytool -list -v -keystore twa/android.keystore), rebuild and redeploy. The Quest app won't launch until this URL is live.

Sideload and test with adb install -r twa/app-release-signed.apk, then upload to the Store with Meta's ovr-platform-util upload-quest-build --app-id … --app-secret … --apk app-release-signed.apk --channel ALPHA.

Web-only changes (gameplay, art, levels) only need a redeploy. The installed app loads the live site. You only rebuild the APK for package or name changes, the icon, version or signing.

Demo

iron-front-vr.vercel.app

Partner Technologies

Meta VR Developer website, Major League Hackathon

Hackathon Experience

This project is still in development and being tested for production however it is viewable via the web and VR. Built with Meta's Immersive Web SDK.

Devpost - Build, Ship, Shape: Amazon Developer Hackathon Build across Amazon Devices and shape what's next.

Kyle Y. Parsotan — Mon, 26 Oct 2026 20:49:06 +0000

This is a submission for the MLH x DEV Writing Challenge

What I Built

An AI-enhanced living-room workout coach for Amazon Fire TV devices running Vega OS, monetized through Amazon In-App Purchasing (IAP). Workouts adapt to the time you have, your experience and your equipment, with no camera. Everything is driven by the Fire TV remote.

Demo

This is a competition so no compensation was paid out and this TV app was not deployed in production.

Demo video:

Github Repo:
https://github.com/Kyl67899/DevPost_Hackathon_AmazonFireTV

What I learned

I learned how to apply react native to build not only a hybrid platfomr but an app for the TV as well. I was able to use the amazon provided template and some videos on youtube to think through how to use the emulator and the knowledge of react-native and web development to build an app called FitPilot TV.

Partner Technologies

I used Amazon Vega OS extension to build the react native TV app, claude AI assistant, and Amazon vega OS template to help me with getting started and submnit my work by the given deadline.

Hackathon Experience

I attended the online Amazon Developer Hackathon event which allowed me to pick a track such as Fire TV, Alexa+, Bee, or Ring. I used the resources for building the app for the Vega OS TV, reviewed the track details and requirements, and submitted my work by the deadline.

Extern - Wayfair's AI Automation

Kyle Y. Parsotan — Sun, 25 Oct 2026 04:54:42 +0000

I built an AI Automation that would be able to spy on Wayfair's products here is how I built the four automations.

I used the n8n local environment with Dockers to be able to run the local environment. Read more here on how to setup the n8n locally with Dockers.

Project 1 MoodBoard Generator - with n8n and different LLM models to generate the images. Understand how to be very descriptive in the prompts when prompting the LLM.

Project 2 Building the Consumer Trend Discovery AI Agent - Spot product trends before they go mainstream. Build an AI system that scans real world data sources such as Amazon and design blogs to identify what's rising in popularity and why. Build the foundation of a Consumer Trend Discovery AI Agent that helps Wayfair detec emerging design and product trends faster than traditional research teams, the kind of insight that drives smarter merchandising and faster product decisions.

Project 3 - Market Trend Discovery Agent Demo and HTML Reports:
https://www.loom.com/share/9f1010b088364d14b242afd497194d42

Project 4 - Content Strategy Generator v4 (Premium+) - Kyle Parsotan Demo:
https://www.loom.com/share/2768243fd9ea47d1bd086278f7b071e9

Built multiple AI Agents using n8n, enabling automated workflows for trend detection, competitor tracking, and marketing content generation.

Conducted in-depth trend analysis across the home good sector, identifying patterns in consumer demand, style preferences, and design narratives; tracked competitor pricing, launches, and campaigns to extract structured insights.

Consolidated agent outputs into a live updating google sheets dashboard, integrating trend signals, competitive benchmarks and AI generated insights to support category decision-making.

Github repo:

Kyl67899 / Wayfair-n8n-AI-Agent-Engineering-Externship

Extern - Wayfair AI Automation built with n8n and AI agent to help with the program manager with their data

Wayfair Internship - AI Automation Engineer - Extern Core Projects

Project 1: Creating a Moodboard Agent that connects design ideas to visuals

Level: Easy
Tech stack: n8n and AI or LLM
Description:

Project 2: Discovering Market Demand and Trends Across Products, Blogs, and Social Media

Level: Medium
Tech stack: n8n and AI or LLM
Description:
- Google Docs: https://docs.google.com/document/d/1y27bot3OTBOwsa_7k50HRN5ef1Y82OS9eWZPa7-gMpQ/edit?usp=sharing
- Loom Video: https://www.loom.com/share/9f1010b088364d14b242afd497194d42

Project 3: Benchmarking Competitors to find Whitespace Opportunities

Level: Medium
Tech stack: n8n and AI or LLM
Description:
- Google Docs: https://docs.google.com/document/d/1LtzChW81r2xWH9tWFZ4Ga_iLp1SmyqZH0JjKV1QTalQ/edit?usp=sharing
- Loom video: Coming Soon

Project 4: Generating AI-driven Insights and Marketing Content Ideas

Level: Medium
Tech stack: n8n and AI or LLM
Description:
- Google Docs: https://docs.google.com/document/d/11fzEWNcZdMXvBP4yIzxC_ENR-cW8j44dPhRK0XNKLzY/edit?usp=sharing
- Loom Videos: https://www.loom.com/share/2768243fd9ea47d1bd086278f7b071e9

Project 5: Building a Live Market Intelligence Dashboard that brings it all together

Level: Hard
Tech stack: n8n and AI or LLM
Description:
- Google Docs: https://docs.google.com/presentation/d/1eYAZR2zJOTK9uAstB5KzBLGt4u_0llFnTnfoLFC1vVE/edit?usp=sharing
- Loom Video:

Summary Built multiple AI Agents using n8n, enabling automated workflows for…

View on GitHub

Tidy - Cleaning Crew Co.

Kyle Y. Parsotan — Tue, 20 Oct 2026 05:17:21 +0000

This is a submission for the MLH x DEV Writing Challenge

What I Built

I built a frontend application for a cleaning company that provides cleaning services to people who would like to clean their apartment and houses. This is a schedule based service to prevent fraud and fake services apart of the Department of Labor. Users are able to submit the form for contacting the company for their services.

I built a tidy - cleaning company that provides services to people that are looking for a cleaning crew to clean apartments and houses. It is a landing page with cool animation, smooth scroll, contact service

Demo

Link to demo project: https://tidy-cleaning.vercel.app/
Demo video:

note: not a real website for actual use.

Partner Technologies

No. I used frontend tools and technologies to complete this hackathon without any distractions.

Hackathon Experience

I attended the HackGB with the University of Wisconsin but did not attend in person. I used Discord to be able to communicate with my mentor and peers to work on tidy the cleaning company project. I did not go all the way to Wisconsin to attend the in-person event because of how expensive it is to go there in the first place.

Secret Shortcuts on Samsung's Android Phones

Kyle Y. Parsotan — Sat, 03 Oct 2026 20:31:45 +0000

Build and Deploy a Weather Application with Django, PostgreSQL, and OpenWeatherMap (Step-by-Step Guide)

Kyle Y. Parsotan — Sat, 01 Aug 2026 03:06:21 +0000

Introduction

Modern web applications often combine a powerful backend framework, a reliable relational database, and third-party APIs to provide dynamic content. In this tutorial, you'll build a Weather Application using Django, PostgreSQL, and the OpenWeatherMap API.

Instead of simply displaying weather data, the application will also store each city search in a PostgreSQL database, allowing you to view search history and extend the project with additional features later.

By the end of this guide, you'll learn how to:

Install Django and PostgreSQL
Configure PostgreSQL with Django
Create a Django project and application
Build database models
Connect to the OpenWeatherMap API
Display live weather information
Save search history in PostgreSQL
Run the project locally
Prepare the project for production deployment

What You'll Build

The finished application includes:

Weather search by city
Live weather information
Temperature
Humidity
Wind speed
Weather icon
Search history
PostgreSQL database
Responsive interface

Technology Stack

Component	Technology
Backend	Django
Database	PostgreSQL
Database Tool	pgAdmin 4
API	OpenWeatherMap
Frontend	HTML, CSS, Bootstrap
Language	Python

Prerequisites

Install the following software before starting:

Python 3.10+
PostgreSQL
pgAdmin 4
Visual Studio Code
Git (optional)

Image Placeholder: Hero banner showing Django + PostgreSQL + OpenWeatherMap architecture.

Step 1: Create the Project

mkdir weather_project
cd weather_project

python -m venv venv

# Windows
venv\Scripts\activate

# Linux/macOS
source venv/bin/activate

Install Django and PostgreSQL support:

pip install django psycopg2-binary requests python-dotenv

Image Placeholder: Terminal showing project creation and package installation.

Step 2: Create the Django Project

django-admin startproject config .
python manage.py startapp weather

Project structure:

weather_project/
│
├── config/
├── weather/
├── templates/
├── static/
├── manage.py
└── requirements.txt

Image Placeholder: VS Code Explorer with the generated project tree.

Step 3: Install PostgreSQL and pgAdmin

Install PostgreSQL and launch pgAdmin.

Create:

Database: weatherdb
User: weatheruser
Password: yourpassword

Image Placeholder: pgAdmin dashboard showing the new database.

Step 4: Configure Django to Use PostgreSQL

Update config/settings.py:

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": "weatherdb",
        "USER": "weatheruser",
        "PASSWORD": "yourpassword",
        "HOST": "localhost",
        "PORT": "5432",
    }
}

Run migrations:

python manage.py migrate

Image Placeholder: Successful migration output in the terminal.

Step 5: Create the Weather Model

Create weather/models.py:

from django.db import models

class WeatherSearch(models.Model):
    city = models.CharField(max_length=100)
    temperature = models.FloatField()
    description = models.CharField(max_length=200)
    humidity = models.IntegerField()
    wind_speed = models.FloatField()
    searched_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.city

Create migrations:

python manage.py makemigrations
python manage.py migrate

Image Placeholder: Database table displayed in pgAdmin.

Step 6: Get an OpenWeatherMap API Key

Register for a free OpenWeatherMap account.
Generate an API key.
Store the key in a .env file.

Example:

OPENWEATHER_API_KEY=YOUR_API_KEY

Image Placeholder: OpenWeatherMap API dashboard with the API key section highlighted.

Step 7: Create the Weather View

Implement a Django view that:

Accepts a city name.
Calls the OpenWeatherMap API.
Parses the JSON response.
Saves the result in PostgreSQL.
Renders the weather details.

Image Placeholder: VS Code showing the view implementation.

Step 8: Build the User Interface

Create:

templates/weather/index.html
static/css/style.css

The interface should include:

Search form
Weather card
Weather icon
Search history table

Image Placeholder: Browser displaying the completed weather dashboard.

Step 9: Configure URLs

Add application routes:

urlpatterns = [
    path("", views.index, name="index"),
]

Image Placeholder: URL configuration highlighted in VS Code.

Step 10: Run the Application

Start the development server:

python manage.py runserver

Visit:

http://127.0.0.1:8000

Search for cities such as:

London
Paris
Tokyo
New York

The application retrieves the latest weather and stores the search in PostgreSQL.

Image Placeholder: Browser showing a successful weather search.

Step 11: Verify Data in PostgreSQL

Open pgAdmin.

Navigate to:

weatherdb
└── Schemas
    └── public
        └── weather_weathersearch

Run:

SELECT * FROM weather_weathersearch;

You should see all saved searches with timestamps and weather details.

Image Placeholder: pgAdmin query results displaying stored weather searches.

Step 12: Create a Search History Page

Display previous searches in a table:

City	Temperature	Humidity	Date

This demonstrates that the application is reading data from PostgreSQL.

Image Placeholder: Search history page in the browser.

Step 13: Project Architecture

Browser
    │
    ▼
Django Views
    │
    ├──────────────► OpenWeatherMap API
    │                     │
    │                     ▼
    │                JSON Response
    │
    ▼
PostgreSQL Database
    │
    ▼
Templates (HTML/CSS)
    │
    ▼
User Interface

Image Placeholder: Architecture diagram with icons for browser, Django, API, and PostgreSQL.

Step 14: Local Deployment

Collect static files:

python manage.py collectstatic

Apply migrations:

python manage.py migrate

Create an administrator account:

python manage.py createsuperuser

Start the application:

python manage.py runserver

Visit:

http://127.0.0.1:8000

The application is now running locally with PostgreSQL as its database.

Image Placeholder: Local deployment flow diagram.

Common Errors

psycopg2 Import Error

pip install psycopg2-binary

Database Connection Failed

Check PostgreSQL is running.
Verify credentials in settings.py.
Confirm port 5432 is open.

Invalid API Key

Confirm the API key is correct.
Wait a few minutes after generating a new key before first use.

Future Improvements

You can extend this project with:

Five-day weather forecast
User authentication
Favorite cities
Interactive weather maps
Charts with historical data
Docker support
Deployment to Render, Railway, or AWS
Celery for scheduled weather updates
REST API using Django REST Framework

Conclusion

You have successfully built a full-stack Weather Application using Django, PostgreSQL, pgAdmin, and the OpenWeatherMap API. The project demonstrates how to integrate a third-party API, persist data in a relational database, and build a responsive web interface using Django's Model–View–Template architecture. It provides a strong foundation for expanding into more advanced features and production deployments.

Build and Deploy a Weather Flask Application Using OpenWeatherMap (Step-by-Step Guide)

Kyle Y. Parsotan — Sat, 01 Aug 2026 02:58:57 +0000

Introduction

Want to learn Flask by building a real-world project? In this tutorial, you'll create a weather web application using Python Flask and the OpenWeatherMap API. The application allows user to search for any city and instantly view its current weather conditions.

By the end of this guide, you'll know how to:
Install Flask
Create a Flask project
Get a OpenWeatherMap API key
Connect the API to your application
Design a simple weather dashboard
Run the application on your local machine or use docker or a database.

Project Overview
The application includes:
City Search
Current temperature
Humidity
Wind Speed
Weather Icon
Responsive User Interface

Prerequisites

Project Overview

The application includes:
Prerequisites
Before starting, install:

Python 3.14 or later
pip
Visual Studio Code (recommended)

Step 1: Create the Project Folder

Open Terminal or Command Prompt.
mkdir weather-flask-app
cd weather-flask-app

Image 1: Terminal showing the project folder creation.

Step 2: Create a Virtual Environment

Windows
python -m venv venv
venv\Scripts\activate

Linux/MacOS
source venv/bin/activate

You should now see:
(venv)

Before your terminal prompt.

Image 2: Activate virtual environment in the terminal

Step 3: Install Required Packages

Install Flask and Requests.

pip install flask requests

Verify Installations:

pip list

📷 Image 3: Installed Flask packages.

Step 4: Create the Project Structure

Create the following folders and files.

weather-flask-app/
│
├── app.py
├── templates/
│ └── index.html
├── static/
│ └── style.css
└── venv/

📷 Image 4: Project structure in VS Code Explorer.

Step 5: Create an OpenWeatherMap API Key

Visit the OpenWeatherMap website.
Create a free account.
Log in.
Navigate to API Keys.
Copy your generated API key.

Example:

API_KEY = your_api_key_here

📷 Image 5: OpenWeatherMap dashboard displaying the API key page.

Step 6: Create the Flask Backend

Create app.py.

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

API_KEY = "YOUR_API_KEY"

@app.route("/", methods=["GET", "POST"])
def index():
    weather = None

    if request.method == "POST":
        city = request.form["city"]

        url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric"

        response = requests.get(url).json()

        if response.get("cod") == 200:
            weather = {
                "city": response["name"],
                "temperature": response["main"]["temp"],
                "description": response["weather"][0]["description"],
                "humidity": response["main"]["humidity"],
                "wind": response["wind"]["speed"],
                "icon": response["weather"][0]["icon"]
            }

    return render_template("index.html", weather=weather)

if __name__ == "__main__":
    app.run(debug=True)

python

📷 Image 6: app.py open in VS Code.

Step 7: Create the HTML Template

Create templates/index.html.

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>

<div class="container">

<h1>Weather Application</h1>

<form method="POST">
<input type="text" name="city" placeholder="Enter city name">
<button type="submit">Search</button>
</form>

{% if weather %}

<h2>{{ weather.city }}</h2>

<img src="https://openweathermap.org/img/wn/{{ weather.icon }}@2x.png">

<p>Temperature: {{ weather.temperature }} °C</p>

<p>Weather: {{ weather.description }}</p>

<p>Humidity: {{ weather.humidity }}%</p>

<p>Wind Speed: {{ weather.wind }} m/s</p>

{% endif %}

</div>

</body>
</html>

html

📷 Image 7: HTML page inside VS Code.

Step 8: Add CSS Styling

Create static/style.css.

body{
font-family:Arial;
background:#4facfe;
background:linear-gradient(to right,#00f2fe,#4facfe);
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:15px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.2);
}

input{
padding:10px;
width:220px;
}

button{
padding:10px 20px;
background:#2196F3;
color:white;
border:none;
cursor:pointer;
}

📷 Image 8: Styled weather application.

Step 9: Run the Flask Application

Run:

python app.py

Output:

Running on http://127.0.0.1:5000

Open your browser and visit:

http://127.0.0.1:5000

📷 Image 9: Terminal showing the Flask development server.

Step 10: Test the Application

Search for cities such as:

London
New York
Tokyo
Paris
Delhi

The application displays:

City name
Current temperature
Weather condition
Humidity
Wind speed
Weather icon

📷 Image 10: Weather results displayed after searching for a city.

How the Application Works
User enters a city name.
Flask receives the request.
Requests sends an HTTP request to the OpenWeatherMap API.
The API returns weather data in JSON format.
Flask extracts the required fields.
The template displays the weather information.
Common Errors
Invalid API Key

Error:

401 Unauthorized

Solution:

Use the correct API key and wait a few minutes after generating it if it is newly created.

City Not Found

Error:

404

Solution:

Check the spelling of the city name.

Module Not Found

Error:

ModuleNotFoundError

Solution:

Install the missing package:

pip install flask requests
Future Improvements

You can extend the application by adding:

5-day weather forecast
Air quality information
Geolocation support
Dark mode
Weather maps
Search history
Favorite cities
Temperature unit conversion (°C/°F)
Conclusion

Congratulations! You have built a complete Weather Flask application using Python and the OpenWeatherMap API. Along the way, you learned how to create a Flask project, integrate a third-party REST API, build a responsive web interface, and run the application locally. This project is an excellent starting point for learning web development with Flask and can be enhanced with additional features such as weather forecasts, user authentication, and cloud deployment.

Updates in Next.js 16.3: AI-Native Development, Better Security, and Instant Navigation

Kyle Y. Parsotan — Sat, 01 Aug 2026 01:57:30 +0000

The Next.js team continues to push the boundaries of modern web development with the Next.js 16.3 Preview. While previous releases focused on performance and caching, version 16.3 shifts its attention toward AI-native development, developer security, and instant application navigation.

As AI coding assistants become a core part of the development workflow, Next.js is evolving into a framework that not only builds applications but also helps AI agents understand, debug, and improve them safely.

Let's explore the biggest improvements in Next.js 16.3.

1. AI-Native Development Experience

One of the most exciting additions in Next.js 16.3 is its first-class support for AI coding assistants.

Instead of treating AI as an external tool, Next.js now includes built-in capabilities that help agents understand your project structure, documentation, and runtime behavior.

Key improvements include:

Version-aware documentation through AGENTS.md, ensuring AI assistants reference the correct framework version.
First-party Skills that guide AI through multi-step development workflows.
Agent Browser with React introspection, allowing compatible AI tools to inspect component state and application behavior.
Actionable errors with copy-ready prompts that make troubleshooting faster.

These enhancements reduce hallucinations from AI assistants and provide more accurate, context-aware code suggestions.

2. Safer AI Tooling

As developers increasingly rely on AI to generate and modify code, security has become a critical concern.

Added 'skills' that would be useful for multi-step workflow. Visit skills.sh

The Skill requires agent-browser version 0.27 or later.

npx skills add vercel/next.js --skill next-dev-loop

Next.js 16.3 introduces several improvements that make AI interactions safer and more reliable:

Smaller MCP Server

The built-in Model Context Protocol (MCP) server now exposes only the tools required for build diagnostics while separating larger knowledge-base functionality.

Benefits include:

Reduced attack surface
Better isolation of tooling
More predictable AI interactions
Improved maintainability

Better Diagnostic Tools

Instead of allowing AI to freely inspect an application, Next.js now provides structured diagnostic capabilities that expose only the information necessary for debugging.

This improves both developer productivity and security by limiting unnecessary access to project internals.

3. Instant Navigations

Perhaps the most noticeable user-facing feature is Instant Navigations.

Instead of waiting for an entire page to load, Next.js intelligently streams or caches route content to make navigation feel nearly instantaneous.

Highlights include:

Instant route transitions
Streaming page updates
Intelligent route caching
Configurable navigation strategies

Applications now feel much closer to native desktop or mobile experiences.

4. Partial Prefetching

Building on previous routing improvements, Next.js 16.3 introduces Partial Prefetching.

Rather than downloading an entire route ahead of time, the framework caches reusable layout shells and streams only the dynamic content when users navigate.

Benefits include:

Lower bandwidth usage
Faster perceived performance
Reduced redundant downloads
Improved scalability for large applications

5. Improved AI Debugging Workflow

Debugging AI-generated code is often harder than writing it.

Next.js 16.3 addresses this by introducing:

More descriptive compiler diagnostics
Actionable error messages
Copy-ready prompts for AI assistants
Better build insights

These improvements help developers quickly identify problems and collaborate more effectively with AI coding tools.

6. Documentation Designed for AI

Documentation has traditionally been written for humans.

With Next.js 16.3, documentation is also optimized for AI systems.

New capabilities include:

Markdown versions of documentation pages
Easier machine-readable content
Version-specific references
Better retrieval for coding assistants

This helps reduce outdated or incorrect suggestions from AI tools by ensuring they consume the most relevant documentation.

7. Faster Development Builds

Although AI is the headline feature, developers also benefit from continued performance improvements.

Next.js 16.3 includes:

Persistent Turbopack caching
Faster incremental builds
Reduced compilation times
Better memory management during development

Large projects see noticeable improvements in rebuild speed and overall responsiveness.

Why Next.js 16.3 Matters

The 16.3 Preview represents a shift in how frameworks are built.

Rather than simply optimizing rendering performance, Next.js now embraces a future where AI coding assistants are part of every developer's toolkit. By combining AI-aware documentation, structured diagnostics, secure tooling, and faster navigation, the framework helps teams build applications more efficiently without sacrificing reliability or security.

Final Thoughts

Next.js 16.3 is more than an incremental update. It introduces a new direction for modern web development—one where AI assistants, developers, and the framework work together seamlessly.

The standout additions include:

AI-native development tools
Improved security through a more focused MCP server
Version-aware documentation for AI agents
Instant Navigations
Partial Prefetching
Better diagnostics and debugging
Faster Turbopack builds

While still in Preview, these features provide a glimpse into the future of full-stack React development and position Next.js as one of the most forward-looking frameworks in the ecosystem.

End-to-End (E2E) testing pipeline

Kyle Y. Parsotan — Sat, 23 May 2026 21:02:29 +0000

Let’s build a real End-to-End (E2E) testing pipeline like teams use in production using Playwright (recommended) and GitHub Actions.

I’ll show you:

🧪 What E2E testing is
⚙️ Playwright setup (React app example)
🚀 GitHub Actions CI pipeline
📸 Test reports + screenshots on failure
🧠 Production best practices

🧠 0. What is E2E testing?

E2E (End-to-End) testing means:

“Test your app like a real user would use it.”

Instead of testing functions, you test:

Clicking buttons
Filling forms
Navigation
API + UI together

⚔️ Playwright vs Cypress (quick decision)

Feature	Playwright	Cypress
Speed	🚀 Faster	متوسط
Multi-browser	✅ Yes	Limited
CI friendly	⭐ Excellent	Good
Modern apps	⭐ Best choice	Good

👉 We’ll use Playwright (industry standard in 2025)

🧱 1. Install Playwright (React project)

```bash id="pw1"
npm init playwright@latest




When prompted choose:

* JavaScript or TypeScript (TS recommended)
* Tests folder: `tests`
* GitHub Actions: YES

---

# 📁 2. Project structure



```plaintext id="pw2"
my-app/
 ├── tests/
 │    ├── example.spec.ts
 ├── playwright.config.ts
 ├── package.json

🧪 3. First E2E test (real user flow)

Example: Login flow test

```ts id="test1"
import { test, expect } from '@playwright/test';

test('user can login successfully', async ({ page }) => {
await page.goto('http://localhost:3000/login');

await page.fill('input[name="email"]', 'test@example.com');
await page.fill('input[name="password"]', 'password123');

await page.click('button[type="submit"]');

await expect(page).toHaveURL(/dashboard/);
});




---

# 🚀 4. Run tests locally



```bash id="run1"
npx playwright test

Open UI mode (very useful):

```bash id="ui1"
npx playwright test --ui




---

# 📸 5. Auto screenshots on failure

Playwright automatically captures:

* screenshots
* videos
* traces

Enable in config:



```ts id="cfg1"
use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
  trace: 'on-first-retry'
}

⚙️ 6. GitHub Actions CI pipeline (E2E automation)

📁 `.github/workflows/e2e.yml`

```yaml id="ci1"
name: E2E Tests (Playwright)

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
test:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Setup Node
    uses: actions/setup-node@v4
    with:
      node-version: 20

  - name: Install dependencies
    run: npm install

  - name: Install Playwright browsers
    run: npx playwright install --with-deps

  - name: Run Playwright tests
    run: npx playwright test




---

# 🧠 7. What happens in CI



```plaintext id="flow1"
Push code
   ↓
GitHub Actions starts
   ↓
Install dependencies
   ↓
Install browsers (Chromium, Firefox, WebKit)
   ↓
Run E2E tests
   ↓
Pass → allow merge
Fail → block PR + show report

📊 8. Add HTML test report

Enable report:

```ts id="rep1"
reporter: [['html'], ['list']]




Then in CI:



```yaml id="rep2"
- name: Upload Playwright report
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report

🌐 9. Test real deployed app (PRO setup)

Instead of localhost:

```ts id="prod1"
await page.goto('https://your-app.vercel.app/login');




👉 This turns it into **true production E2E testing**

---

# 🧪 10. Advanced real-world test examples

---

## 🟢 UI navigation test



```ts id="nav1"
test('navigate to dashboard', async ({ page }) => {
  await page.goto('/');
  await page.click('text=Dashboard');
  await expect(page).toHaveURL(/dashboard/);
});

🟡 Form validation test

```ts id="form1"
test('shows error for empty email', async ({ page }) => {
await page.goto('/login');
await page.click('button[type="submit"]');

await expect(page.locator('.error')).toContainText('Email is required');
});




---

## 🔵 API + UI combined test



```ts id="api1"
test('data loads after API call', async ({ page }) => {
  await page.goto('/dashboard');

  await expect(page.locator('.loading')).toBeHidden();
  await expect(page.locator('.chart')).toBeVisible();
});

🔐 11. CI best practices (IMPORTANT)

✔ Run E2E after build

```yaml id="bp1"

run: npm run build
run: npm start & ```

✔ Use staging environment

staging.example.com
production.example.com

✔ Retry flaky tests

```ts id="rt1"
retries: 2




---

# ⚠️ 12. Common mistakes

### ❌ Testing implementation instead of behavior

Bad:



```ts id="bad1"
expect(component.state).toBe(true)

Good:

```ts id="good1"
expect(page).toHaveText('Welcome')




---

### ❌ No stable selectors

Use:



```html id="sel1"
data-testid="login-button"

Then:

```ts id="sel2"
page.getByTestId('login-button')




---

### ❌ Running E2E without CI

Always run in GitHub Actions

---

# 🧠 Final architecture



```plaintext id="final1"
Push / PR
   ↓
CI (unit tests)
   ↓
E2E tests (Playwright)
   ↓
Build app
   ↓
Deploy to staging/production
   ↓
Report + screenshots stored in GitHub

🚀 What you just built

You now have:

🧪 Real user simulation testing
🚀 CI/CD integrated E2E pipeline
📸 Failure screenshots + videos
🌍 Production-ready test system
🔒 Safe deployment gating system

Auto versioning + changelog generation using Github Action

Kyle Y. Parsotan — Sat, 23 May 2026 21:01:19 +0000

Auto versioning + changelog generation is a very real production pattern used in open-source and SaaS teams to avoid messy release notes and manual tagging.

We’ll build a clean system using:

🧠 Conventional commits (rules for commit messages)
🤖 Semantic versioning automation
📜 Auto-generated CHANGELOG
🚀 GitHub Actions workflow

🧠 0. What we’re building

```plaintext id="flow0"
commit → push → GitHub Action
↓
analyze commits
↓
bump version (patch/minor/major)
↓
generate changelog
↓
create git tag
↓
create GitHub release




---

# 📦 1. Install required tool (standard approach)

We’ll use:

👉 **semantic-release** (industry standard)



```bash id="inst1"
npm install --save-dev semantic-release @semantic-release/changelog @semantic-release/git @semantic-release/github

🧠 2. Use Conventional Commits (VERY important)

Your commits MUST follow this format:

✅ Examples

Feature (minor version bump)

```bash id="c1"
feat: add user login system




### Fix (patch version bump)



```bash id="c2"
fix: resolve navbar bug on mobile

Breaking change (major version bump)

```bash id="c3"
feat!: redesign API structure




or



```bash id="c4"
BREAKING CHANGE: remove old auth system

⚙️ 3. Create semantic-release config

📁 `.releaserc.json`

```json id="r1"
{
"branches": ["main"],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
"@semantic-release/github",
[
"@semantic-release/git",
{
"assets": ["package.json", "CHANGELOG.md"],
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
]
]
}




---

# 📜 4. Create CHANGELOG file



```bash id="ch1"
touch CHANGELOG.md

Start empty:

```md id="ch2"

Changelog

All notable changes will be documented here.




---

# 🚀 5. GitHub Actions workflow (AUTO VERSION + CHANGELOG)

## 📁 `.github/workflows/release.yml`



```yaml id="w1"
name: Auto Version & Changelog

on:
  push:
    branches:
      - main

jobs:
  release:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm install

      - name: Run semantic release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npx semantic-release

🧠 6. What this does automatically

When you push to main:

It will:

Analyze commits
Decide version bump:
- fix → 1.0.1
- feat → 1.1.0
- breaking → 2.0.0
Generate changelog
Create Git tag
Create GitHub Release
Update CHANGELOG.md

📜 7. Example auto-generated changelog

```md id="log1"

1.2.0 (2026-05-23)

Features

add user authentication system
add dashboard analytics

Bug Fixes

fix navbar alignment on mobile
fix API timeout issue ```

🏷️ 8. Example GitHub releases

GitHub will automatically create:

```plaintext id="rel1"
v1.2.0 - Production Release

Features:

user auth system
analytics dashboard

Fixes:

mobile navbar bug ```

🔐 9. GitHub Secrets needed

Make sure this exists:

```plaintext id="sec1"
GITHUB_TOKEN (auto provided by GitHub Actions)




No extra setup required.

---

# 🧪 10. Real workflow in action

### Developer flow:



```plaintext id="flow1"
git commit -m "feat: add dashboard UI"
git push origin main

GitHub automatically:

Detects commit type (feat)
Bumps version → minor update
Updates CHANGELOG.md
Creates git tag (v1.3.0)
Publishes GitHub release

🔥 11. Pro upgrades (used in companies)

🟢 Auto publish npm package

```yaml id="npm1"

run: npm publish ```

🟡 Slack release notification

```yaml id="slack1"

name: Notify Slack run: curl -X POST $SLACK_WEBHOOK ```

🔵 Multi-branch releases

```json id="branch1"
"branches": ["main", "next"]




---

## 🟣 Changelog formatting customization

You can group commits like:

* Features
* Fixes
* Performance
* Breaking changes

---

# ⚠️ 12. Common mistakes

### ❌ Not using conventional commits

→ versioning won’t work properly

### ❌ Pushing messy commit messages



```bash id="bad1"
fix stuff
update

❌ Forgetting fetch-depth: 0

→ release history breaks

🧠 Final architecture

```plaintext id="final1"
Commit (feat/fix/breaking)
↓
GitHub Action triggers
↓
semantic-release analyzes commits
↓
bumps version automatically
↓
updates CHANGELOG.md
↓
creates git tag + GitHub release




---

# 🚀 What you just built (REAL DEVOPS LEVEL)

You now have:

* 🤖 Automated versioning
* 📜 Auto changelog generation
* 🏷️ Git tags + GitHub releases
* 🚀 CI/CD-ready release pipeline

Auto PR + Auto Deploy workflow using CI/CD Pipline

Kyle Y. Parsotan — Sat, 23 May 2026 21:00:37 +0000

Here’s a real production-style Auto PR + Auto Deploy workflow using GitHub Actions. This is the kind of setup used in teams to keep main stable and deployments automatic.

We’ll build it in 3 parts:

🤖 Auto-create Pull Requests (from feature → main)
🧪 Run CI checks on PRs
🚀 Auto-deploy when merged to main

🧠 0. What we are building

```plaintext id="flow1"
feature branch push
↓
Auto PR created (GitHub Action)
↓
CI runs (tests, lint)
↓
PR merged to main
↓
Auto deploy to production




---

# 🤖 1. Auto Create Pull Request Workflow

This automatically creates a PR when you push a feature branch.

## 📁 `.github/workflows/auto-pr.yml`



```yaml id="pr1"
name: Auto Create Pull Request

on:
  push:
    branches-ignore:
      - main

jobs:
  create-pr:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Create Pull Request
        uses: repo-sync/pull-request@v2
        with:
          destination_branch: main
          github_token: ${{ secrets.GITHUB_TOKEN }}
          pr_title: "Auto PR: ${{ github.ref_name }}"
          pr_body: |
            ## 🤖 Auto-generated PR

            Branch: `${{ github.ref_name }}`
            Please review changes before merging.

🧠 What this does:

Push to feature/login
GitHub Actions triggers
Automatically opens PR → feature/login → main

🧪 2. CI Pipeline (runs on PRs)

This ensures only clean code gets merged.

📁 `.github/workflows/ci.yml`

```yaml id="ci1"
name: CI Checks

on:
pull_request:
branches: [ main ]

jobs:
test:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Setup Node
    uses: actions/setup-node@v4
    with:
      node-version: 20

  - name: Install dependencies
    run: npm install

  - name: Run lint
    run: npm run lint

  - name: Run tests
    run: npm test




---

## 🧠 What this does:

Before merge:

* Runs lint checks
* Runs tests
* Blocks bad code from merging

---

# 🚀 3. Auto Deploy on Merge to Main

This deploys your app when PR is merged.

## 📁 `.github/workflows/deploy.yml`

### Example: Deploy React + Node (Vercel + Render)



```yaml id="deploy1"
name: Auto Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy-frontend:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Install frontend
        working-directory: client
        run: npm install

      - name: Build frontend
        working-directory: client
        run: npm run build

      - name: Deploy to Vercel
        run: npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

  deploy-backend:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Install backend
        working-directory: server
        run: npm install

      - name: Deploy backend (Render webhook)
        run: curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK }}

🔐 4. GitHub Secrets Setup

Go to:

👉 Repo → Settings → Secrets → Actions

Add:

```plaintext id="sec1"
VERCEL_TOKEN=your_vercel_token
RENDER_DEPLOY_HOOK=https://api.render.com/deploy/xxx




---

# 🧭 5. Full Workflow in action

## Developer flow:



```plaintext id="flow2"
git checkout -b feature-login
git push origin feature-login

Then GitHub automatically:

🤖 Creates Pull Request
🧪 Runs CI checks
👀 Waits for review (optional)
🔀 Merge to main
🚀 Auto deploys frontend + backend

🔥 6. Upgrade (what real companies add)

🟢 Add approval rule (recommended)

In GitHub:

Require 1–2 reviewers
Require CI to pass before merge

🟡 Add branch protection

Settings → Branches → main

Enable:

Require PR before merging
Require status checks
Block direct pushes

🔵 Add notifications (Slack/Discord)

```yaml id="notif1"

name: Notify Slack run: | curl -X POST -H 'Content-type: application/json' \ --data '{"text":"New deployment to production 🚀"}' \ ${{ secrets.SLACK_WEBHOOK }} ```

🟣 Add version tagging

```bash id="tag1"
git tag v1.0.0
git push origin v1.0.0




---

# ⚠️ Common mistakes

### ❌ Auto-deploy without tests

→ leads to broken production

### ❌ No branch protection

→ anyone can push to main

### ❌ Missing secrets

→ deployment fails silently

---

# 🧠 Final Architecture (Pro level)



```plaintext id="final1"
Feature Branch
   ↓
Auto PR Created
   ↓
CI (tests + lint)
   ↓
Review + Approval
   ↓
Merge to main
   ↓
CD Pipeline
   ↓
Frontend deploy (Vercel)
Backend deploy (Render/AWS)
   ↓
Slack/Discord notification

CI/CD Pipline

Kyle Y. Parsotan — Sat, 23 May 2026 20:58:51 +0000

Here’s a real-world CI/CD pipeline setup for a React frontend + Node.js backend + deployment using GitHub Actions**. This is very close to what startups actually use.

🚀 Full CI/CD Pipeline (React + Node + GitHub Actions)

🧱 Architecture

Frontend (React)  →  Backend (Node/Express)  →  Deployment (Vercel / Render / AWS)
        ↑                    ↑
     CI tests            CI tests
        ↓                    ↓
   GitHub Actions runs everything automatically

📁 Example Project Structure

```plaintext id="7p0k1m"
my-app/
├── client/ # React app
├── server/ # Node.js API
├── .github/
│ └── workflows/
│ └── ci-cd.yml
├── package.json




---

# ⚙️ CI Pipeline (Testing both React + Node)

This workflow runs on every push and pull request.



```yaml id="ci1234"
name: Full CI Pipeline

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test-frontend:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install frontend dependencies
        working-directory: client
        run: npm install

      - name: Run frontend tests
        working-directory: client
        run: npm test

  test-backend:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install backend dependencies
        working-directory: server
        run: npm install

      - name: Run backend tests
        working-directory: server
        run: npm test

🚀 CD Pipeline (Deployment)

Now we deploy when everything passes.

Example: Deploy backend + frontend

```yaml id="cd5678"
name: Deploy Pipeline

on:
push:
branches: [ main ]

jobs:
deploy-backend:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Install backend
    working-directory: server
    run: npm install

  - name: Build backend
    working-directory: server
    run: npm run build

  - name: Deploy backend to Render
    run: |
      curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK }}

deploy-frontend:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Install frontend
    working-directory: client
    run: npm install

  - name: Build React app
    working-directory: client
    run: npm run build

  - name: Deploy to Vercel
    run: |
      npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}




---

# 🔐 GitHub Secrets (IMPORTANT)

You must store sensitive keys in:

👉 GitHub Repo → Settings → Secrets and Variables

Example secrets:



```plaintext id="sec123"
VERCEL_TOKEN=your-vercel-token
RENDER_DEPLOY_HOOK=https://api.render.com/deploy/xxx

🧪 What happens when you push code?

Example flow:

```plaintext id="flow123"

You push code to GitHub
GitHub Actions starts CI
Runs:
- React tests
- Node API tests
If ALL pass:
- Builds frontend
- Builds backend
CD triggers:
- Deploy backend (Render/AWS)
- Deploy frontend (Vercel) ```

🧠 What real companies add on top

🔥 1. Linting

```yaml id="lint1"
run: npm run lint




---

### 🔥 Code formatting check



```yaml id="fmt1"
run: npm run format:check

🔥 Caching (faster builds)

```yaml id="cache1"
uses: actions/cache@v4




---

### 🔥 Database migrations (backend)



```yaml id="db1"
run: npm run migrate

🔥 Parallel jobs

Frontend + backend run at the same time (already shown above)

🚀 Real-world deployment options

Frontend

Vercel (most common)
Netlify
AWS S3 + CloudFront

Backend

Render
Railway
AWS EC2 / ECS
DigitalOcean

⚠️ Common mistakes in CI/CD

❌ No environment variables

→ app works locally but fails in CI

❌ Missing build step

→ deployment breaks

❌ Not separating frontend/backend

→ messy pipeline

❌ No test stage

→ broken code gets deployed

🧭 Production-grade CI/CD flow

```plaintext id="prod1"
Push → CI Tests → Build → Approval (optional) → Deploy → Monitor




---

# 💡 Final Summary

A real CI/CD pipeline:

* Tests frontend + backend automatically
* Builds apps only if tests pass
* Deploys without manual work
* Prevents broken code from reaching users

DEV Community: Kyle Y. Parsotan

Meta VR Start Developer Competition 2026

What I Built

Demo

Partner Technologies

Hackathon Experience

Devpost - Build, Ship, Shape: Amazon Developer Hackathon Build across Amazon Devices and shape what's next.

What I Built

Demo

What I learned

Partner Technologies

Hackathon Experience

Extern - Wayfair's AI Automation

Kyl67899 / Wayfair-n8n-AI-Agent-Engineering-Externship

Extern - Wayfair AI Automation built with n8n and AI agent to help with the program manager with their data

Wayfair Internship - AI Automation Engineer - Extern Core Projects

Project 1: Creating a Moodboard Agent that connects design ideas to visuals

Project 2: Discovering Market Demand and Trends Across Products, Blogs, and Social Media

Project 3: Benchmarking Competitors to find Whitespace Opportunities

Project 4: Generating AI-driven Insights and Marketing Content Ideas

Project 5: Building a Live Market Intelligence Dashboard that brings it all together

Tidy - Cleaning Crew Co.

What I Built

Demo

Partner Technologies

Hackathon Experience

Secret Shortcuts on Samsung's Android Phones

Build and Deploy a Weather Application with Django, PostgreSQL, and OpenWeatherMap (Step-by-Step Guide)

Introduction

What You'll Build

Technology Stack

Prerequisites

Step 1: Create the Project

Step 2: Create the Django Project

Step 3: Install PostgreSQL and pgAdmin

Step 4: Configure Django to Use PostgreSQL

Step 5: Create the Weather Model

Step 6: Get an OpenWeatherMap API Key

Step 7: Create the Weather View

Step 8: Build the User Interface

Step 9: Configure URLs

Step 10: Run the Application

Step 11: Verify Data in PostgreSQL

Step 12: Create a Search History Page

Step 13: Project Architecture

Step 14: Local Deployment

Common Errors

psycopg2 Import Error

Database Connection Failed

Invalid API Key

Future Improvements

Conclusion

Build and Deploy a Weather Flask Application Using OpenWeatherMap (Step-by-Step Guide)

Step 1: Create the Project Folder

Step 2: Create a Virtual Environment

Step 3: Install Required Packages

Step 4: Create the Project Structure

Step 5: Create an OpenWeatherMap API Key

Step 6: Create the Flask Backend

Step 7: Create the HTML Template

Step 8: Add CSS Styling

Step 9: Run the Flask Application

Step 10: Test the Application

Updates in Next.js 16.3: AI-Native Development, Better Security, and Instant Navigation

1. AI-Native Development Experience

2. Safer AI Tooling

Smaller MCP Server

Better Diagnostic Tools

3. Instant Navigations

4. Partial Prefetching

5. Improved AI Debugging Workflow

6. Documentation Designed for AI

7. Faster Development Builds

Why Next.js 16.3 Matters

Final Thoughts

Further Reading

End-to-End (E2E) testing pipeline

🧠 0. What is E2E testing?

⚔️ Playwright vs Cypress (quick decision)

🧱 1. Install Playwright (React project)

📁 `.github/workflows/e2e.yml`

📁 `.releaserc.json`

📁 `.github/workflows/ci.yml`