DEV Community: Kyle Y. Parsotan

🎧 SpinTicket – DJ Ticket Management System

Kyle Y. Parsotan — Wed, 18 Mar 2026 22:40:37 +0000

🌟 Inspiration Managing event tickets as a DJ or event organizer is often chaotic—spreadsheets, screenshots, scattered guest lists, and last‑minute changes. I wanted a system that felt simple, fast, and built for real‑world nightlife workflows, not corporate event software. SpinTicket was born from the idea of giving DJs and promoters a clean, modern, and secure way to manage ticketing without friction.

🎟️ What It Does SpinTicket is a full-featured ticket management platform designed specifically for DJs, promoters, and small event organizers. It provides:

Ticket creation & management

Real‑time notifications using WebSockets

Secure ticket storage using encrypted data

Instant email confirmations via Resend

LocalStorage persistence for fast client-side access

A clean, responsive UI built with TailwindCSS

QR code ticket validation (optional future feature)

It’s built to be fast, intuitive, and reliable during high‑pressure event situations.

🛠️ How I Built It SpinTicket is built with a modern, scalable stack:

Next.js – for routing, server actions, and API endpoints

TailwindCSS – for rapid UI development

Resend – for sending ticket confirmations and updates

WebSockets – for real‑time ticket status updates

LocalStorage – for client-side session persistence

Custom encryption layer – to protect sensitive ticket data

The architecture focuses on speed, security, and simplicity, making it ideal for DJs who need tools that work instantly.

⚠️ Challenges I Ran Into Designing a real-time system that stays lightweight

Ensuring secure encryption without slowing down performance

Handling email deliverability and formatting across devices

Creating a UI that works well in dark club environments

Managing state between server actions and client-side storage

Each challenge pushed the system to become more polished and reliable.

🏆 Accomplishments That I’m Proud Of Building a fully functional real-time ticketing workflow

Implementing industry-level encryption for ticket data

Creating a smooth, mobile-first interface

Integrating instant email notifications that feel professional

Making a system that DJs can actually use during live events

It’s a project that solves a real problem in a clean, modern way.

📚 What I Learned How to architect real-time WebSocket systems

Best practices for secure data handling and encryption

How to design UX for fast-paced environments

Advanced Next.js server actions and API routes

Email templating and delivery optimization with Resend

This project pushed my full-stack skills to a new level.

🚀 What’s Next for SpinTicket QR code scanning for ticket validation

Multi‑DJ / multi‑event dashboards

Analytics for event attendance

Stripe integration for paid ticketing

Mobile app version

Role-based access for promoters, staff, and DJs

SpinTicket is just getting started—there’s a lot of room to grow into a full event‑management ecosystem.

Demo it today
Spin Ticket

Barbershop Web App

Kyle Y. Parsotan — Wed, 18 Mar 2026 22:38:56 +0000

✂️ Barbershop Web App — Simple, Rebuild‑Friendly Summary This project is a full-featured barbershop website built with Next.js, React, TypeScript, Tailwind CSS, Firebase, and a collection of reusable UI components. It includes booking, service pages, a chatbot, gallery, testimonials, and contact forms.

Below is a streamlined breakdown of what the project is, how it works, and what you need to recreate it.

🚀 1. What the Project Is A modern, responsive barbershop website with:

A homepage featuring hero, services, gallery, testimonials, and booking sections.

Individual service pages (haircut, beard trim, kids haircut, hair coloring, etc.).

A dynamic booking system (via JotForm).

A contact form with validation + email notifications.

A chatbot powered by AI logic.

A gallery with tabbed navigation.

Firebase analytics integration.

A fully modular component architecture.

🧱 2. Core Technologies Used Area Tools Frontend Next.js, React, TypeScript Styling Tailwind CSS, PostCSS, Autoprefixer Backend / Services Firebase, Resend (email) Forms JotForm embeds Maps Leaflet / OpenStreetMap Validation Zod Linting ESLint Utilities date-fns, clsx, tailwind-merge 📁 3. Project Structure (Simplified) Code barbershop/ │ app/ → All pages (home, services, booking, contact, gallery) │ components/ → Reusable UI + feature components │ lib/ → Backend logic (emails, validation, chatbot, reviews) │ hooks/ → Custom hooks (toast system) │ public/ → Images │ styles/ → Global CSS + Tailwind configs │ config files → next.config, tailwind.config, tsconfig, etc. 🧩 4. Key Features Explained Simply Homepage Uses components like:

Hero

Services preview

About section

Gallery preview

Testimonials

Booking CTA

Contact section

Services System Each service has:

A dedicated page

Pricing, duration, description

Inquiry form (JotForm embed)

Layout wrapper for consistent design

Booking System Booking form embedded via iframe

URL parameters prefill user info

Email confirmations sent via Resend

Validation handled in lib/ai-chat.ts and lib/appointment-actions.ts

Contact System Contact form with validation

Sends emails to both user + barbershop

Uses toast notifications for feedback

Chatbot AI-powered quick responses

Saves state via cookies

Can fill JotForm data automatically

Gallery Tabbed interface

Organized by categories (haircuts, beard trims, etc.)

Testimonials Stored in lib/reviews.ts

Displayed on homepage + dedicated page

Demo

Cyber Sentinel Skills Challenge

Kyle Y. Parsotan — Wed, 04 Mar 2026 21:57:43 +0000

Test your skills in CyberSecurity with the Cyber Sentinel Skills. It is open to anyone in CyberSecurity - 18 yrs or older, must be a U.S. Citizen, and be interested in cybersecurity (beginner or advanced level).

Gain hands-on experience with DoD Cyber Sentinel Challenges and tackle real-world cybersecurity threats.

Read More about the CyberSecurity Challenges here:

https://www.correlation-one.com/blog/how-the-cyber-sentinel-skills-challenge-prepares-you-for-military-grade-security-threats

Payment Success UI

Kyle Y. Parsotan — Wed, 04 Mar 2026 19:43:02 +0000

How to Build a Modern Payment Success UI with Animated SVG & Confetti 🎉

A polished Payment Success UI is more than just a confirmation message — it reassures users, builds trust, and adds a delightful finishing touch to the checkout experience.

In this tutorial, you’ll learn how to build a modern dark-themed payment confirmation card with:

✅ Animated SVG checkmark
⭕ Drawing circle animation
✨ Soft glow effect
🎉 Confetti celebration
💳 Clean transaction details layout

You can follow along step-by-step and copy the provided code snippets.

🎨 Final Result Preview


![Final Results of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq37h9prl0sk6aoum14u.png)

1️⃣ Project Structure

Create this simple folder structure:

payment-success-ui/
├── index.html
├── style.css
├── js.js
└── assets/

2️⃣ HTML Structure

Here’s the core layout of the card.

📄 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Payment Successful UI</title>

  <!-- Confetti Library -->
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
</head>

<body>
  <main class="card">

    <!-- Animated Success Icon -->
    <div class="card__icon">
      <svg class="success-icon" viewBox="0 0 100 100">
        <circle class="glow" cx="50" cy="50" r="40" />
        <circle class="success-ring" cx="50" cy="50" r="30" fill="none"/>
        <path class="success-check" fill="none" d="M38 52l8 8 18-18"/>
      </svg>
    </div>

    <h1 class="card__title">Payment Successful!</h1>

    <p class="card__description">
      Your payment has been processed successfully.
    </p>

    <div class="payment-box">
      <div class="row">
        <span>Amount</span>
        <strong>$149.99</strong>
      </div>

      <hr />

      <div class="row">
        <span>Transaction ID</span>
        <span class="badge">TXN-789123456</span>
      </div>

      <div class="row">
        <span>Payment Method</span>
        <span>**** 4242</span>
      </div>
    </div>

    <button class="btn btn-primary">
      Download Receipt
    </button>

  </main>

  <script src="js.js"></script>
</body>
</html>

3️⃣ Styling the Card

🎨 style.css

Start with base styling:

:root {
  --card-bg: #1f2a3a;
  --inner-bg: #2b3748;
  --primary: #19e68c;
  --text-muted: #94a3b8;
}

body {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #5f6b7a, #c7cbd1);
}

Card Layout

.card {
  width: 380px;
  background: var(--card-bg);
  border-radius: 18px;
  padding: 32px;
  text-align: center;
  color: white;
}

4️⃣ Animated SVG Success Icon

This is the magic ✨

SVG Animation Styles

.card__icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-icon {
  width: 120px;
  height: 120px;
}

.glow {
  fill: #19e68c;
  opacity: 0.15;
  filter: blur(12px);
}

.success-ring {
  stroke: #19e68c;
  stroke-width: 6;
  stroke-dasharray: 188;
  stroke-dashoffset: 188;
  animation: draw-ring 0.8s ease-out forwards;
}

.success-check {
  stroke: #19e68c;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw-check 0.5s 0.8s ease forwards;
}

@keyframes draw-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

📌 Add an Animation Demo Image


![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7esci0ibjt5gl1ai1ae.png)

5️⃣ Add Confetti Celebration

📄 js.js

document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    confetti({
      particleCount: 120,
      spread: 100,
      origin: { y: 0.6 }
    });
  }, 1300);
});

This delay ensures confetti appears after the check animation completes.

6️⃣ Payment Details Box Styling

.payment-box {
  background: var(--inner-bg);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  text-align: left;
}

.payment-box .row {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

7️⃣ Buttons

.btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  background: #0b0f2b;
  color: white;
}

💡 Why SVG Instead of Font Icons?

SVG allows:

Stroke drawing animations
Precise timing control
Better scalability
Cleaner microinteractions

This technique is commonly used in fintech dashboards and checkout flows.

🎯 Conclusion

In this project, you learned how to:

Structure a clean payment confirmation card
Animate an SVG checkmark
Create a smooth circle drawing effect
Add celebratory confetti
Build a modern fintech-style UI

Small microinteractions like this dramatically improve user experience and perceived product quality.

📌 Add Your Live Demo Link Here

[View Live Demo](https://github.com/Kyl67899/paymentSuccessfulUI)
[Github Repo](https://kyl67899.github.io/paymentSuccessfulUI/)

If you enjoyed this tutorial, consider turning it into:

A CodePen demo
A YouTube walkthrough
A GitHub repo with README
A UI case study post

Happy building 🚀

Frontend Mentor Challenges

Kyle Y. Parsotan — Tue, 24 Feb 2026 17:32:20 +0000

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

Github Repo: https://github.com/Kyl67899/FrontEnd-Mentor

The challenge

Your challenge is to build out this QR code component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Want some support on the challenge? Join our community and ask questions in the #help channel.

Where to find everything

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can subscribe as a PRO member.

You will find all the required assets in the /images folder. The assets are already optimized.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Building your project

Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:

Initialize your project as a public repository on GitHub. Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, have a read-through of this Try Git resource.

Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below.

Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.

Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.

Write out the base styles for your project, including general content styles, such as font-family and font-size.

Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.

Each project is designed to practice a recommended tech stack, but you can choose to work with anything.

Link/Status: If the project is ready in devchallenges.io, you should see a link to the project with designs, and resources to help you get started. Otherwise, In Progress means the project is being designed, empty means it has not been created.

This path is designed for you to practice HTML, CSS, and basic JavaScript.

Deploying your project

As mentioned above, there are many ways to host your project for free. Our recommended hosts are:

GitHub Pages

Vercel
Netlify

You can host your site using one of these solutions or any of our other trusted providers. Read more about our recommended and trusted hosts.

Create a custom README.md

We strongly recommend overwriting this README.md with a custom one. We've provided a template inside the README-template.md file in this starter code.

The template provides a guide for what to add. A custom README will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like.

Once you've added your information to the template, delete this file and rename the README-template.md file to README.md. That will make it show up as your repository's README file.

Submitting your solution

Submit your solution on the platform for the rest of the community to see. Follow our "Complete guide to submitting solutions" for tips on how to do this.

Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community.

Sharing your solution

There are multiple places you can share your solution:

Share your solution page in the #finished-projects channel of the community.

Share your solution on other social channels like LinkedIn.

Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are dev.to, Hashnode, and CodeNewbie.

We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback.

The more specific you are with your questions the more likely it is that another member of the community will give you feedback.

Got feedback for us?

We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io.

This challenge is completely free. Please share it with anyone who will find it useful for practice.

Have fun building! 🚀

🚀 WebDevDaily Challenges – Leveling Up with Real Frontend Projects

Kyle Y. Parsotan — Tue, 24 Feb 2026 17:26:57 +0000

🚀 WebDevDaily Challenges – Leveling Up with Real Frontend Projects

If you’re trying to get better at frontend development, the fastest way isn’t watching tutorials.

It’s building.

That’s why I started WebDevDaily Challenges — a collection of hands-on UI projects designed to sharpen HTML, CSS, and JavaScript fundamentals through real-world components.

Today I’m sharing one of the foundational challenges: The QR Code Component — plus a breakdown of my learning path and project portfolio progression.

🎯 The Challenge: QR Code Component

The goal is simple:

Build a responsive QR code component that matches the design as closely as possible.

This challenge focuses on:

Semantic HTML structure
CSS layout fundamentals
Spacing & typography accuracy
Responsive design (mobile + desktop)
Visual polish

If you're a beginner, this is the perfect starting point to build confidence in layout precision.

🧠 What This Project Teaches

Even a “simple” component teaches critical skills:

1️⃣ Planning Before Coding

Before writing CSS, I reviewed:

Layout structure
Font sizing hierarchy
Spacing rhythm
Alignment logic

Thinking first = cleaner code.

2️⃣ Writing HTML First

Structuring content before styling helps you:

Focus on semantic elements
Avoid div soup
Build accessible markup
Make CSS easier to manage

Example structure:

<main class="card">
  <img src="qr-code.png" alt="QR Code">
  <h1>Improve your front-end skills</h1>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>

3️⃣ Base Styles Matter

Instead of jumping into component styling, I defined:

Font family
Base font size
Background color
Default spacing reset

That small discipline improves every project.

📁 How I Approach Frontend Challenges

Here’s the workflow I recommend:

Create a public GitHub repository
Deploy early (GitHub Pages, Vercel, or Netlify)
Analyze design before coding
Write semantic HTML
Add base styles
Build top-down section by section
Refactor and clean up CSS

This builds real-world habits instead of tutorial dependency.

🧩 WebDevDaily Project Path

This challenge is part of a structured path to mastering frontend fundamentals.

🟢 Beginner Projects

Project	Tech	Live Demo
Eye Follow UI	HTML, CSS, JS	https://kyl67899.github.io/EyeFollowUI
Book Profile Page	HTML, CSS	https://kyl67899.github.io/bookProfilePage/
Blog Card	HTML, CSS	https://blog-card-profile.vercel.app/
Portfolio UI	HTML, CSS	https://kyl67899.github.io/portfolioUI-webdev/
SaaS Landing Page	HTML, CSS	https://saaas-landing-page.vercel.app
Weather App UI	HTML, CSS	weather-appui.netlify.app

These projects focus on:

Layout systems
Flexbox & Grid
Responsive design
Component structuring
Clean UI replication

🟡 Intermediate Projects

Project	Stack	Status
Stripe Clone Landing Page	Next.js, React, Tailwind, Framer Motion	In Progress
Power Pro Electrical	Next.js, Tailwind, Firebase	Completed
Twitter Clone	Next.js, Firebase, Tailwind	Completed
Recipe App	React, API, Tailwind	Completed
Bike Store	React, Firebase	Completed

At this stage, the focus shifts to:

State management
API integration
Authentication
Deployment workflows
UI libraries
Animation systems

🌐 Deployment Options

Every project should be live.

My go-to platforms:

GitHub Pages
Vercel
Netlify

Shipping projects publicly builds confidence and creates a real portfolio.

✍️ Why You Should Blog Your Builds

One of the most underrated growth hacks:

Write about what you build.

Blogging your projects helps you:

Reinforce what you learned
Improve technical communication
Build developer credibility
Create discoverable content
Grow your personal brand

Great platforms to share your journey:

dev.to
Hashnode
CodeNewbie

💡 Final Thoughts

Frontend development isn’t about memorizing syntax.

It’s about:

Thinking in structure
Understanding layout logic
Writing clean, maintainable code
Practicing consistently

The QR Code Component might seem small — but stacking projects like this daily builds real momentum.

Start simple.
Ship often.
Improve every iteration.

That’s the WebDevDaily mindset. 🚀

BikeAPI

Kyle Y. Parsotan — Tue, 24 Feb 2026 16:52:32 +0000

Bike API

A comprehensive, open-source bicycle database featuring real Trek bikes with detailed specifications, pricing, and product information. Perfect for developers building bike-related applications, e-commerce platforms, or cycling projects.

📌 Important Notice

NOT SELLING BICYCLES - This is a developer resource only. Data is based on official Trek bike specifications.

Last updated:

Feb. 12, 2026

🚀 Getting Started

For Your Own Project

You can easily integrate this bike data into your project by:

Forking the repository and customizing the data
Using the raw JSON data directly in your application
Contributing improvements back to the project

Quick Setup

# Clone the repository
git clone https://github.com/Kyl67899/bike-API.git
cd bike-API

# The data is available in two formats:
# - db.json (JSON database format)
# - data/bike.json (JavaScript export format)

📊 Data Structure

Bike Object Schema

Each bike in the database contains:

{
  "id": 1,
  "title": "Bike Model Name",
  "url": "https://image-url.com/bike-image.jpg",
  "details": "Detailed description of the bike specifications and features",
  "type": "Mountain|Road|Gravel|Hybrid|Kids|eBike",
  "originalPrice": 9999.99,
  "salePrice": 7999.99,
  "rating": 4.5
}

Available Bike Types

Mountain - Trail and XC bikes
Road - Road racing and endurance bikes
Gravel - Adventure and mixed-surface bikes
Hybrid - Commuter and casual riding bikes
Kids - Bicycles designed for children
eBike - Electric-assisted bicycles

💻 Usage Examples

JavaScript/Node.js

import { bikes } from './data/bike.json';

// Get all bikes
console.log(bikes);

// Filter by type
const mountainBikes = bikes.filter(bike => bike.type === 'Mountain');

// Find a specific bike
const bike = bikes.find(bike => bike.id === 1);

// Get discounted bikes
const onSale = bikes.filter(bike => bike.salePrice !== null);

Using with API Server (JSON Server)

If you have json-server installed:

npx json-server --watch db.json

Then access the API at http://localhost:3000/bikes

React Example

import { useState, useEffect } from 'react';
import bikes from './db.json';

function BikeList() {
  const [bikeList, setBikeList] = useState([]);

  useEffect(() => {
    setBikeList(bikes);
  }, []);

  return (
    <div>
      {bikeList.map(bike => (
        <div key={bike.id}>
          <h3>{bike.title}</h3>
          <p>{bike.details}</p>
          <span>${bike.salePrice || bike.originalPrice}</span>
        </div>
      ))}
    </div>
  );
}

export default BikeList;

📦 Data Files

db.json - Complete bike database in JSON format (88 bikes)
data/bike.json - JavaScript/ES6 export format
bike.json - Raw bike data file

🔧 Customizing the Data

Adding New Bikes

Open db.json or data/bike.json
Add a new bike object with the next available ID
Maintain the same structure and data types
Test your changes

Example: Adding a New Bike

{
  "id": 89,
  "title": "Your Bike Model",
  "url": "https://your-image-url.com",
  "details": "Bike description and specifications",
  "type": "Mountain",
  "originalPrice": 1299.99,
  "salePrice": 999.99,
  "rating": 4.5
}

🔗 API Resources

Postman Collection

Test the API with our Postman collection:
View on Postman

📋 Current Dataset

Total Bikes: 88
Categories: Mountain, Road, Gravel, Hybrid, Kids, eBike
Latest Update: February 2026
Data Source: Official Trek Bike Store

🤝 Contributing

We welcome contributions! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/add-bikes)
Add or update bike data in db.json and data/bike.json
Commit your changes (git commit -m 'Add new Trek bikes')
Push to the branch (git push origin feature/add-bikes)
Open a Pull Request

Contribution Guidelines

Ensure all bike data comes from official sources (Trek Bike Store)
Maintain consistent data structure and formatting
Include accurate pricing and specifications
Update both db.json and data/bike.json simultaneously
Add meaningful commit messages

📄 License

This project is open source and available under the MIT License. See the LICENSE file for details.

🐛 Issues & Support

Found a bug or have a suggestion? Please open an issue on GitHub.

👨‍💻 Author

@kyl67899

✨ Recent Updates

Added 18 new authentic Trek bike models (IDs 71-88)
Enhanced documentation for developer integration
Expanded bike categories to include Kids and expanded eBike selection
Updated pricing and specifications from official Trek store

Happy coding! 🚴‍♂️

🔐 Web Security in 2026: What Every Developer MUST Understand

Kyle Y. Parsotan — Tue, 24 Feb 2026 16:42:30 +0000

Web security is no longer optional.

If you build websites, APIs, SaaS products, or even side projects — you are responsible for protecting user data. Attackers aren’t just targeting banks anymore. They target small apps, indie projects, startups, and portfolios too.

This guide breaks down the most important web security topics every developer should understand — with trusted resources to go deeper.

🚨 1. The OWASP Top 10 (Start Here First)

If you only study one thing, study this.

The OWASP Top 10 lists the most critical web application security risks.

These include:

Broken access control

Cryptographic failures

Injection attacks

Insecure design

Security misconfiguration

👉 Official OWASP Top 10:
https://owasp.org/www-project-top-ten/

This is the foundation of modern web security knowledge.

💉 2. SQL Injection (Still a Massive Threat)

SQL Injection happens when attackers manipulate your database queries through user input.

Example of vulnerable code:

const query = `SELECT * FROM users WHERE email = '${email}'`;

Attackers can inject malicious SQL and dump your database.

Prevent it by:

Using parameterized queries

Using ORM libraries safely

Validating input

👉 OWASP SQL Injection Guide:
https://owasp.org/www-community/attacks/SQL_Injection

🧠 3. Cross-Site Scripting (XSS)

XSS allows attackers to inject malicious JavaScript into your site.

Types:

Stored XSS

Reflected XSS

DOM-based XSS

This can steal cookies, sessions, and user data.

Prevention:

Escape user input

Use Content Security Policy (CSP)

Avoid dangerouslySetInnerHTML (React)

Use secure templating engines

👉 OWASP XSS Guide:
https://owasp.org/www-community/attacks/xss/

🍪 4. Secure Authentication & Session Management

Weak authentication is one of the most common breaches.

Best practices:

Use HttpOnly cookies

Use Secure + SameSite flags

Implement rate limiting

Enforce strong password policies

Use MFA where possible

👉 OWASP Authentication Cheat Sheet:
https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html

🔒 5. HTTPS & TLS (Non-Negotiable)

If your site isn’t using HTTPS, stop everything and fix that first.

HTTPS protects:

Session tokens

API traffic

User data

Free certificates are available via:

👉 https://letsencrypt.org/

🛡 6. Content Security Policy (CSP)

CSP reduces XSS risk by controlling which scripts can run on your site.

Example header:

Content-Security-Policy: default-src 'self';

CSP prevents injected scripts from executing.

👉 MDN CSP Guide:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

🧪 7. Input Validation & Sanitization

Never trust user input.

Validate:

Form inputs

Query parameters

File uploads

Headers

Sanitize:

HTML content

Markdown

Rich text

👉 OWASP Input Validation Cheat Sheet:
https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html

🏗 8. Security Headers You Should Be Using

Important headers:

Content-Security-Policy

Strict-Transport-Security

X-Frame-Options

X-Content-Type-Options

Referrer-Policy

Test your site here:
👉 https://securityheaders.com/

📦 9. Dependency Security (Supply Chain Attacks)

Most apps today rely heavily on npm, pip, or other package managers.

Risk:

Malicious packages

Abandoned libraries

Typosquatting attacks

Protect yourself:

Use npm audit

Use pnpm audit

Enable Dependabot

Lock dependency versions

👉 OWASP Software Supply Chain:
https://owasp.org/www-project-software-supply-chain-security/

🔎 10. Logging & Monitoring

You can’t protect what you don’t monitor.

Log:

Failed login attempts

Suspicious API activity

Admin actions

Rate limit violations

Use tools like:

Sentry

Datadog

Cloud provider logging

Early detection = smaller breach impact.

🔐 Developer Mindset Shift

Security isn’t a feature.
It’s a layer built into everything.

When writing code, always ask:

What happens if someone abuses this?

What happens if this input is malicious?

What if someone intercepts this request?

🧭 Recommended Learning Path

Read the OWASP Top 10 fully.

Study XSS & SQL Injection deeply.

Learn authentication & session security.

Implement CSP on a test project.

Add automated dependency scanning.

Practice using intentionally vulnerable apps (like DVWA).

Final Thoughts

Web security is not just for cybersecurity engineers.

It’s for:

Frontend developers

Backend developers

DevOps engineers

Indie hackers

Startup founders

If you ship code, you are responsible for protecting users.

Build fast.
But build secure. 🔐

Eye-Tracking UI: Designing Gaze-Driven Interfaces That Work

Kyle Y. Parsotan — Fri, 20 Feb 2026 06:11:54 +0000

Create an accessible, testable eye-tracking UI page with HTML, CSS, and JavaScript. Start with a simple HTML structure, then progressively layer on CSS for layout and styling and JavaScript for gaze-driven interactions. Below is a concise, step-by-step guide that makes the process easy to follow.

Link: https://kyl67899.github.io/EyeFollowUI/ |

Github: https://github.com/Kyl67899/webDevdailyChallenge

What you'll build (short overview)

A single page with a card-like container and one or more “eyes” (visual elements that move their pupils toward gaze/cursor).

Gaze-driven interactions: pupils follow the user’s gaze or mouse pointer; dwell detection can trigger actions; graceful fallback when no eye-tracker is available.

HTML: basic, semantic structure

Create a minimal skeleton so styling and behavior can be added incrementally.

Include a container, one or more card elements, and within each card an eye with a pupil:

container (e.g., .stage)

card (e.g., .card)

eye (e.g., .eye)

pupil (e.g., .pupil)

#0062AD

Cookie Monster

Keep markup simple and accessible (aria labels where appropriate).

CSS: layout and visual design (progressive enhancements)

Start with layout:

Center the stage and card, use flexbox or grid for alignment.

Give the card padding, border-radius, shadow, and a readable background.

Style the eye:

Shape the eye as a circle/oval with a white or light background and subtle border.

Use overflow: hidden to contain the pupil.

Style the pupil:

Make it a smaller circle, darker color, centered by default.

Use transform and transition for smooth movement when the pupil follows gaze/cursor.

Add responsive rules so the UI works on different screen sizes.

Use CSS variables for sizes and colors to make adjustments simple.

:root {
--eye-color: #000000;
--card-eye-color: #ffffff;
--background-color: #2f86f1;
--font-family: 'Arial, sans-serif';
}

{ box-sizing: border-box; padding: 0; margin: 0; }

html {
height: 100%;
width: 100%;
}

body {
font-family: var(--font-family);
margin: 0;
padding: 0;
/* background-color: var(--background-color); */
background-color: var(--background-color);
}

.cards {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
height: 400px;
padding: 20px;
}

.blue-area {
background-color: var(--background-color);
height: 250px;
width: 100%;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.leye,
.reye {
width: 100px;
height: 100px;
background-color: var(--card-eye-color);
border-radius: 50%;
margin: 0 10px;
position: relative;
}

.pupil {
width: 50px;
height: 50px;
background-color: var(--eye-color);
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
}

.card h1{
font-size: 40px;
margin-bottom: 10px;
}

.card p{
font-size: 18px;
font-weight: 500;
color: #000000;
}

JavaScript: make it gaze-driven (progressive approach)

Start with a simple mouse-driven prototype:

Listen for mousemove on the stage, compute vector from eye center to pointer, clamp pupil movement to the eye’s bounds, update the pupil via CSS transform.

Use requestAnimationFrame for smooth updates and to avoid layout thrashing.

Testing and iteration

Test on different screen sizes and lighting conditions.

Validate behavior with keyboard and mouse-only navigation.

Measure robustness: latency tolerance, jitter handling, and false-dwell reduction.

Log anonymized metrics (if user-consented) to improve thresholds and UX.

Enhancements and polish

Add subtle animations for state changes (hover, dwell start/complete).

Provide configurable sensitivity and dwell time in UI settings.

Use visual affordances (ripples, outlines) to communicate gaze focus and upcoming actions.

Consider performance: minimize reflows, use transforms only, and avoid heavy per-frame computation.

Example structure summary (for quick reference)

HTML: .cards > .card > .eye > .pupil

CSS: variables for sizes, transitions for smooth pupil movement, responsive rules

JS: modular input handler (mouse fallback + gaze adapter)

Final notes

Keep interactions simple and predictable—too many autonomous movements can confuse users.

Prioritize privacy and clear consent when using camera or sensor data.

Build incrementally: validate UX with mouse first, then swap in gaze data to refine timing and thresholds.

RecipeHub

Kyle Y. Parsotan — Wed, 03 Dec 2025 00:57:05 +0000

RECIPEHUB

Link: https://receipehub.dev

Transforming Recipes Into Culinary Masterpieces Effortlessly

Built with the tools and technologies:

HTML, CSS, Tailwindcss, Shadnui, JavaScript, localstorage, next, react, resend, RestfulAPI (dummyjson)

RECIPEHUB
- Table of Contents
- Overview
- Features
- Project Structure
  - Project Index
- Getting Started
  - Prerequisites
  - Installation
  - Usage
  - Testing

Overview

Why RecipeHub?

This project simplifies creating engaing culinary communities by providing seamless localstorage integration, consistent UI design, and comprehensive content managment features.

The core feature includes:

🧑‍💻 Firebase SDK integration: Real time analytics, authentication, database, storage, enhanced web security.
🍽️ Recipe Management: Real time detailed recipe pages, sharing, favorites, and search filters to enhance user engagement.
Email service: Approves, decline, pending status for submitted recipes. Recive email when user signs up and login for enhanced security purposes.
🛡️ Web Security: Multifactor authenticaion: User can recive real time SMS, email confirmation or email code to authenticate their account. JWT and Hashed password and robust auth login and signup. Environment variables via .env for sensitive data. Firebase security rules (implied). Linting and type safety reduce runtime errors.
AI Powered: Builing a custom AI chatbox (thinking of a name) to enhance, optimze, and letting the user know the status of the submitted recipe. Chatbox helps with looking for recipes based on the user preference using custom Machine learning algorithm or OPENAI SDK.
WebSocket: Get real time notification using Firebase SDK and Websocket.
Social Media Integration: Gain access a integrated social media platform to share, fork, and remix your recipes on recipeHub.
📊 Admin & User Dashboards: Real time Analytics, user management, and content moderation tools for platform oversight.
⚙️ Robust Error Handling & Notifications: Ensures stability and clear user communication.
🚀 CI/CD Pipeline: Automated build, test, and deployment workflows for continuous delivery.

🧑‍💻 LocalStorage integration: Setup for analytics, authentication, database, storage and ensuring enhanced security.
🍽️ Recipe Management: Detailed recipe pages, sharing, favorites, and search filters to enhance user engagement.
📊 Admin & User Dashboards: Analytics, user management, and content moderation tools for platform oversight.
Social Media Integration (beta): Gain access a integrated social media platform to share, fork, and remix your recipes on recipeHub.
AI Powered (beta): Builing a custom AI chatbox (thinking of a name) to enhance, optimze, and letting the user know the status of the submitted recipe. Chatbox helps with looking for recipes based on the user preference using custom Machine learning algorithm or OPENAI SDK.
🛡️ Security: Environment variables via .env for sensitive data. Firebase security rules (implied). Linting and type safety reduce runtime errors. JWT and Hashed password and robust auth login and signup
⚙️ Robust Error Handling & Notifications: Ensures stability and clear user communication.
🚀 CI/CD Pipeline: Automated build, test, and deployment workflows for continuous delivery.

Frontend Mentor Challenges using basic HTML, CSS.

v1 ReceipHub: IOS and Android App using React Native (Coming Soon)

- Dont want to expose secrets

Features

Project Structure

└── Recipe_App/
    ├── README.md
    ├── app
    │   ├── admin
    │   ├── api
    │   ├── cicd
    │   ├── contact
    │   ├── dashboard
    │   ├── explore
    │   ├── favorites
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── login
    │   ├── not-found.tsx
    │   ├── page.tsx
    │   ├── recipe
    │   └── signup
    ├── changelog.md
    ├── components
    │   ├── Footer.tsx
    │   ├── admin
    │   ├── ai-assistant
    │   ├── auth
    │   ├── comingsoon.tsx
    │   ├── contact.tsx
    │   ├── dashboard
    │   ├── explore-recipes.tsx
    │   ├── favorite-button.tsx
    │   ├── favorites-list.tsx
    │   ├── header.tsx
    │   ├── hero-section.tsx
    │   ├── recipe-card.tsx
    │   ├── recipe-detail.tsx
    │   ├── recipe-filters.tsx
    │   ├── recipe-grid.tsx
    │   ├── recipe-search.tsx
    │   ├── share-recipe-button.tsx
    │   ├── theme-provider.tsx
    │   └── ui
    ├── components.json
    ├── contexts
    │   ├── admin-context.tsx
    │   ├── auth-context.tsx
    │   ├── favorites-context.tsx
    │   └── user-recipes-context.tsx
    ├── firebase.ts
    ├── lib
    │   ├── email.ts
    │   ├── error-handler.ts
    │   ├── recipe.ts
    │   └── utils.ts
    ├── next.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── styles
    │   ├── recipehub.jpeg
    │   └── globals.css
    ├── tailwind.config.css
    ├── tailwind.config.ts
    └── tsconfig.json

⬆ Return

[Boost]

Kyle Y. Parsotan — Mon, 03 Nov 2025 16:50:35 +0000

Jess Lee for The DEV Team

Oct 15 '25

Join our latest Frontend Challenge: Halloween Edition 🦇

#devchallenge #frontendchallenge #css #javascript

Comments 15

4 min read

NFT Card Frontend Mentor

Kyle Y. Parsotan — Sun, 02 Nov 2025 20:18:02 +0000

I've just completed a front-end coding challenge from Frontend Mentor! 🎉

You can see my solution here:
https://www.frontendmentor.io/solutions/nft-preview-card-Fz5dwN_veB

Full code check out the github repo:
https://github.com/Kyl67899/NFT-previewcard

Any suggestions on how I can improve are welcome!

DEV Community: Kyle Y. Parsotan

🎧 SpinTicket – DJ Ticket Management System

Barbershop Web App

Cyber Sentinel Skills Challenge

Payment Success UI

How to Build a Modern Payment Success UI with Animated SVG & Confetti 🎉

🎨 Final Result Preview

1️⃣ Project Structure

2️⃣ HTML Structure

📄 index.html

3️⃣ Styling the Card

🎨 style.css

Card Layout

4️⃣ Animated SVG Success Icon

SVG Animation Styles

📌 Add an Animation Demo Image

5️⃣ Add Confetti Celebration

📄 js.js

6️⃣ Payment Details Box Styling

7️⃣ Buttons

💡 Why SVG Instead of Font Icons?

🎯 Conclusion

📌 Add Your Live Demo Link Here

Frontend Mentor Challenges

🚀 WebDevDaily Challenges – Leveling Up with Real Frontend Projects

🚀 WebDevDaily Challenges – Leveling Up with Real Frontend Projects

🎯 The Challenge: QR Code Component

🧠 What This Project Teaches

1️⃣ Planning Before Coding

2️⃣ Writing HTML First

3️⃣ Base Styles Matter

📁 How I Approach Frontend Challenges

🧩 WebDevDaily Project Path

🟢 Beginner Projects

🟡 Intermediate Projects

🌐 Deployment Options

✍️ Why You Should Blog Your Builds

💡 Final Thoughts

BikeAPI

Bike API

📌 Important Notice

Last updated:

🚀 Getting Started

For Your Own Project

Quick Setup

📊 Data Structure

Bike Object Schema

Available Bike Types

💻 Usage Examples

JavaScript/Node.js

Using with API Server (JSON Server)

React Example

📦 Data Files

🔧 Customizing the Data

Adding New Bikes

Example: Adding a New Bike

🔗 API Resources

Postman Collection

📋 Current Dataset

🤝 Contributing

Contribution Guidelines

📄 License

🐛 Issues & Support

👨‍💻 Author

✨ Recent Updates

🔐 Web Security in 2026: What Every Developer MUST Understand

Eye-Tracking UI: Designing Gaze-Driven Interfaces That Work

#0062AD

RecipeHub

RECIPEHUB

Table of Contents

Overview

- Dont want to expose secrets

Features

Project Structure

[Boost]

Join our latest Frontend Challenge: Halloween Edition 🦇

NFT Card Frontend Mentor