DEV Community: Azzie Robel

🍣 Sushi Charm: A 3D Slot Machine Inspired by the Solstice

Azzie Robel — Mon, 08 Jun 2026 17:27:57 +0000

Overview

Sushi Charm is a polished 3D web-based slot machine that blends the joy of sushi culture with the June Solstice theme of cycles, balance and transition.

At its core, the game reflects the solstice through continuous motion and shifting states-the spinning reels mirror the passage of time, while dynamic lighting evokes the transition between light and darkness.

Built with modern web technologies, the project focuses on smooth performance, clean architecture and engaging gameplay.

🌗 Theme: Cycles, Light and Balance

The June Solstice represents a turning point in the natural world-a balance between light and darkness.

Sushi Charm interprets this through:

🔄 Spinning reels → continuous cycles and repetition
🌗 Dynamic lighting → subtle shift between bright and dark tones
⚖️ Risk-reward gameplay → balance between small consistent wins and high-risk bets

Additionally, the game celebrates International Sushi Day (June 6), combining cultural celebration with the solstice's deeper symbolism of harmony and transformation.

🎮 How to Play

Choose your bet (1 → 500 coins)
Press Spin
Match sushi symbols from left to right
Earn coins based on combinations

🍣 Symbols

Ebi (Shrimp)
Maguro (Tuna)
Sake (Salmon)
Maki (Rolls)

💰 Win System

3 matching symbols → full reward
2 matching symbols → partial reward
Rewards scale with your bet

⚙️ Technical Highlights

Stack

React 19 + TypeScript
Three.js (React Three Fiber)
Zustand (state management)
Vite (build tool)

🛠 Architecture

The project follows a component-based design:

SlotMachine → core game logic
Reel → animation and symbol control
GameInterface → UI and interaction
Visual components → lighting and casing

This ensures:

Clear separation of concerns
Easy extensibility (new symbols, features)
Maintainable and testable code

⚡ Performance

Smooth 60 FPS rendering on desktop
Optimized React re-renders via Zustand selectors
Efficient Three.js scene reuse
Fast builds with Vite

🤖 AI-Assisted Development

AI was used as a development accelerator, not a replacement for engineering decisions.

Key contributions:

Architecture validation → improved state design and reduced re-renders
Animation prototyping → faster iteration on reel mechanics
Game balance analysis → refined reward system and bet scaling
Code quality → TypeScript-safe implementations from the start

All AI-generated outputs were reviewed, tested and adapted to meet performance and design goals.

🎯 Design Focus

The goal was to create a game that is:

🎮 Easy to understand
⚡ Fast and responsive
🎨 Visually engaging in 3D
🔁 Replayable through balanced mechanics

Even with a simple core loop, the game emphasizes polish and clarity, which are critical in a game jam setting.

🚀 Development

yarn dev     # run locally
yarn build   # production build
yarn lint    # code quality

🏁 Conclusion

Sushi Charm combines technical precision, thoughtful design and thematic interpretation of the June Solstice.

Rather than focusing on complexity, the project delivers a refined and complete experience, demonstrating how strong fundamentals-clean architecture, smooth performance and clear gameplay-can create an engaging and memorable game.

🔗 Submission

Game URL: https://sushicharm-game.vercel.app/
Source Code: https://github.com/AzzieRobel/sushicharm-game

Spin the reels and experience the balance of chance and design. 🍣

The AI-Powered Developer: How to Use AI Effectively Without Losing Your Edge (2026 Edition)

Azzie Robel — Wed, 03 Jun 2026 19:23:22 +0000

The software development landscape has fundamentally changed. In 2026, the question is no longer whether you use AI - but how well you use it.

After integrating AI deeply into my daily workflow for the past two years, I've learned that the developers who thrive aren't the ones who use AI the most. They're the ones who use it most intelligently.

1. The New Developer Skill Stack

Forget the old debate of "AI will replace developers."

The reality is clearer:

Junior developers who use AI poorly → easily replaced
Senior developers who use AI masterfully → nearly irreplaceable

The new must-have skills are:

Advanced Prompt Engineering
AI Output Validation & Architecture Thinking
Tool Orchestration (knowing which AI to use for what)
System Design with AI augmentation

2. My Current AI Toolkit (2026)

Here's my actual daily stack:

Purpose	Tool	Why I Choose It
General Coding	Claude 4 / Cursor	Best reasoning + large context
Fast prototyping	Grok 4	Speed + real-time knowledge
Code review & refactoring	GitHub Copilot Workspace + Claude	Deep codebase understanding
Research & Architecture	Perplexity + Claude	Accurate sources + synthesis
Testing & Edge Cases	Cursor + Custom Agents	Systematic test generation
Documentation	Cursor Composer	Maintains context beautifully

3. Practical Workflows That Actually Work

A. Feature Implementation Workflow

Break down the feature into small, logical components
Use AI for initial implementation (70-80% of the code)
I write the core business logic and architecture decisions myself
Use AI for refactoring and test generation
Final human review with security & performance in mind

B. Debugging Superpower
Instead of staring at code for hours, I now do:

"Here's the buggy function + expected behavior + logs. Think step by step like a senior engineer and give me 3 possible root causes with likelihood scores."

C. Learning Acceleration
I use AI as an elite mentor:

"Explain this concept as if you're a principal engineer teaching a mid-level developer"
"Compare these 3 approaches with tradeoffs in 2026 context"

4. Critical Rules I Follow

Never ship AI code I don't fully understand
Always question AI about edge cases and security
Keep ownership - AI is a pair programmer, not the architect
Document my decisions, not just the code
Regularly work without AI to maintain my own thinking muscles

5. The Biggest Traps (and How to Avoid Them)

Over-reliance → Leads to shallow understanding
Copy-paste culture → Creates brittle, unmaintainable code
Context collapse → Using the same tool for everything
Hallucinated confidence → AI sounds sure even when wrong

Final Thoughts

AI isn't making developers obsolete - it's raising the bar.

The developers who will stand out in 2026 and beyond aren't those who type faster. They're the ones who think better, design better systems and use AI as a force multiplier for their judgment and creativity.

The future belongs to centaur developers - the powerful combination of human wisdom and AI capability.

What about you?

How are you using AI in your workflow right now? Which tools and practices have given you the biggest gains?

Drop your best AI tip in the comments. Let's learn from each other.

From Rough to Ready

Azzie Robel — Thu, 28 May 2026 15:28:42 +0000

What I Built

I built a responsive hospital website using React, Tailwind CSS and Vite.

The app features:

a complete appointment booking flow with department selection and filtered doctor choices
a doctor directory and department overview
a services section with a featured telemedicine call-to-action
polished UI improvements for consistent cards, form placeholders and accessible controls

This project started as a basic healthcare interface and I finished it by strengthening the interaction design, improving layout consistency and tailoring the content for a more realistic hospital experience.

Demo

Repository: https://github.com/james-works/q9-multispecialty-hospital
Demo: https://q9-multispecialty-hospital.vercel.app/

The Comeback Story

This project was already close to being finished, but it still had a lot of rough edges. The UI felt inconsistent, some interactions didn't behave correctly and parts of the code were repetitive and hard to maintain.

So I treated this as a full "finish-up" phase - not just fixing small issues, but improving the overall quality of the app.

Before finishing, the project had several issues:

inconsistent card heights across feature sections
dropdown arrows too close to the select border missing placeholders on forms
basic filtering logic that didn't always behave correctly
generic content that made the app feel like a template

I improved the project by:

refactoring repeated UI parts into cleaner, reusable components
simplifying Tailwind styles and fixing inconsistent spacing
fixing card layouts so all sections align properly
improving select inputs (spacing, alignment, usability)
updating form UX with placeholders and better structure
fixing doctor filtering so it responds correctly to department selection
handling small edge cases in forms and dropdowns
replacing generic data with more realistic Indonesian-style names
improving the telemedicine CTA and making it work as a proper link

I also cleaned up unused code, improved responsiveness and made small UI adjustments that make the whole app feel smoother.

Overall, I focused on making the project feel complete - not just working, but consistent and reliable.

My Experience with GitHub Copilot

GitHub Copilot was extremely helpful during this finish-up phase. It helped me refactor components, suggest better structure and speed up repetitive UI fixes.

It was especially useful when:

cleaning up repeated code
improving Tailwind patterns
fixing small bugs and edge cases
keeping everything consistent while making many changes

Copilot made it easier to move quickly without breaking things and helped me focus more on improving the overall quality of the project.