DEV Community

Cover image for checking azure bom
karleeov
karleeov

Posted on

1 1 1 1 1

checking azure bom

Building a Cyberpunk-Themed Azure VM Calculator Portal

Introduction

Hey everyone! Karl Li here, and today I'm excited to share with you how I built a cyberpunk-themed Azure VM calculator portal. This project was a fun blend of functionality and style, resulting in a modern web application that not only helps users find and compare Azure Virtual Machine configurations but also immerses them in a cyberpunk aesthetic.

Key Features

1. Cyberpunk UI Design

  • Neon Color Scheme: I went with a cyan and purple gradient theme that really pops.
  • Animated Grid Background: Added some depth with a subtle animated grid that gives that classic cyberpunk feel.
  • Typography: Monospace fonts were a no-brainer for that retro-futuristic look.
  • Pulse Animations: Interactive elements have a nice pulse effect to keep things lively.
  • Custom-Styled Forms: Form components got a neon touch to keep everything consistent.

2. VM Search Functionality

The portal has a slick search interface:

  • Cyberpunk-Styled Search Bar: Because why not make searching look cool?
  • Region Selector: Users can pick from common Azure regions.
  • Pre-Configured VM Recommendations:
    • Web App Configuration
    • Data Processing Setup
    • AI Workload Configuration

3. Interactive Results Display

Check out the results table:

  • VM Config Names: Easy to read and understand.
  • Hardware Specs: CPU, memory, performance metrics—all laid out neatly.
  • Regional Availability: See where your VM is available.
  • Pricing: Displayed in USD, so you know what you're getting into.

4. Loading States

No more boring loaders:

  • Skeleton Animations: Placeholder loading states that look futuristic.
  • Pulse Effects: During data fetching, things pulse to keep you engaged.
  • Cyberpunk-Styled Loaders: Because even loading should have style.

5. Error Handling

User-friendly error messages:

  • Styled Error States: Maintains the theme, even when things go wrong.
  • Clear Feedback: Let users know when a search fails and how to recover.

Technical Implementation

Frontend Components

// Main search component structure
<div className="space-y-6 relative">
  <Popover>
    <SearchInput />
    <PopularSearches />
  </Popover>
  <RegionSelector />
  <SearchButton />
</div>
Enter fullscreen mode Exit fullscreen mode

Styling Approach

  • Tailwind CSS: Responsive design made easy.
  • Custom Animations: Added those cyberpunk effects.
  • Gradient Overlays: For that extra depth.
  • CSS Variables: Kept the color scheme consistent.

State Management

const [vms, setVMs] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
Enter fullscreen mode Exit fullscreen mode

API Integration

const handleSearch = async (search: string, region: string) => {
  // API call to fetch VM configurations
  const response = await fetch(
    `/api/azure-vms?search=${search}&region=${region}`
  )
  // Process and display results
}
Enter fullscreen mode Exit fullscreen mode

User Experience Features

1. Quick Access Configurations

Pre-configured VM setups for common use cases:

  • Web Applications
  • Data Processing
  • AI/ML Workloads

2. Interactive Search

  • Real-Time Suggestions: Helps users find what they need faster.
  • Region-Specific Pricing: No surprises when it comes to costs.
  • Instant Results: Updates as you type.

3. Visual Feedback

  • Animated Transitions: Smooth state changes.
  • Loading Indicators: Clear and stylish.
  • Error Messages: Intuitive and easy to understand.

Best Practices Implemented

  1. Responsive Design:

    • Works on all devices, from desktops to smartphones.
    • Maintains readability no matter the screen size.
  2. Performance Optimization:

    • Efficient state management for a smoother experience.
    • Optimized API calls to reduce load times.
    • Smooth animations that don’t lag.
  3. Error Handling:

    • Graceful error states that don’t break the flow.
    • Clear feedback for failed searches.
    • Recovery options for users.
  4. Accessibility:

    • Semantic HTML for better accessibility.
    • Keyboard navigation support.
    • Screen reader compatibility.

Future Enhancements

  1. Additional Features:
    • Cost Comparison Tools: Help users make informed decisions.
    • Saved Configurations: So users can come back to their favorites.
    • Export Functionality: Export results for later use.

https://azure-cal.vercel.app/

  1. UI Improvements:

    • More Interactive Elements: Keep the user engaged.
    • Additional Cyberpunk Effects: Because why stop now?
    • Enhanced Animations: Make the experience even smoother.
  2. Functionality Extensions:

    • More VM Types: Expand the range of options.
    • Advanced Filtering: Give users more control.
    • Custom Presets: Let users create their own configurations.

Conclusion

This Azure VM Calculator portal is a great example of how you can combine practical functionality with an engaging design. The cyberpunk theme adds a unique twist to what could have been a standard utility tool, while the focus on user experience ensures it remains both practical and efficient. I had a blast building this, and I hope it inspires you to mix a little style with your next project!

Resources

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay