Forem: Alaa

Remember Their Names: A Powerful Memorial Web App for Palestinian Children

Alaa — Sun, 07 Sep 2025 14:41:16 +0000

In the face of ongoing tragedy, technology can serve as a powerful tool for remembrance and action. Today, I want to share a deeply meaningful project I built: "Remember Their Names" - an interactive memorial web application that honors the Palestinian children who have lost their lives.

🚀 Experience the memorial here!

The Purpose Behind the Code 💔

This isn't just another web app - it's a digital memorial that brings humanity to statistics. When numbers become overwhelming, names and faces make the loss real. Each floating name represents a child with dreams, a family, and a future that was taken away.

The app displays names continuously floating upward, creating a powerful visual representation of the scale of loss while ensuring each name gets its moment of remembrance.

🔗 Experience the memorial yourself - but more importantly, consider taking action to help stop the ongoing tragedy.

Connect & Follow 🤝

This project represents the intersection of technology and social justice. If you're interested in more projects that use code for positive impact, check out my GitHub profile.

Have you built any socially conscious applications? What challenges did you face when balancing technical excellence with meaningful purpose? Let me know in the comments! 👇

Tags: #react #typescript #frontend #ui #social-impact #animation #framer-motion #webdev #javascript #tailwindcss #memorial #palestine

Building a Multi-Language Code Integration Component with React & TypeScript 🚀

Alaa — Sat, 06 Sep 2025 11:56:28 +0000

Ever wanted to showcase your API or SDK across multiple programming languages in a beautiful, interactive way? I built a comprehensive SDK integration component that displays implementation examples for 12+ programming languages with framework-specific variations.

🚀 Try the live demo here!

What Makes Great SDK Integration UX? 🎯

When developers visit your documentation or landing page, they want to see code examples that match their tech stack. A great SDK integration component should:

Support multiple languages - From Node.js to Rust, Python to .NET
Show framework variations - Express vs Next.js vs NestJS for Node.js
Provide copy-paste ready code - No placeholder values or incomplete examples
Be visually appealing - Clean syntax highlighting and smooth animations
Remember user preferences - Persist language and framework selections

The Tech Stack 🛠️

// Core technologies
- React 18 + TypeScript
- Tailwind CSS for styling
- shadcn/ui components  
- Radix UI primitives
- Framer Motion for animations
- Simple Icons for language logos
- Lucide React for UI icons

Key Features:

🌍 12+ Programming Languages

Backend: Node.js, Python, PHP, Go, Ruby, Rust, Java, Elixir, .NET
Protocols: REST API, SMTP
Serverless: Serverless functions support

🎯 Framework-Specific Examples

Each language includes 2-3 popular frameworks:

Node.js: Express, Next.js, NestJS
Python: Django, Flask, FastAPI
PHP: Laravel, Symfony, CodeIgniter
Go: Gin, Echo, Fiber
Rust: Actix, Axum, Warp
And many more...

🎨 Smart Visual States

Language Selection: Interactive tabs with language icons
Framework Switching: Nested tabs for framework variations
Syntax Highlighting: Custom highlighting for keywords and strings
Copy Functionality: One-click code copying with visual feedback

Performance Optimizations 🚀

Lazy Loading: Code snippets are only rendered when needed
Memoization: Framework tabs are memoized to prevent unnecessary re-renders
Efficient Animations: Framer Motion with optimized transition settings
Local Storage: User preferences persist across sessions

Responsive Design 📱

The component is fully responsive with:

Mobile-first approach with horizontal scrolling for language tabs
Flexible code blocks that adapt to screen size
Touch-friendly interface elements
Optimized typography for different screen sizes

Key Features Checklist ✅

✅ 12+ Programming Languages with authentic icons
✅ Framework-Specific Examples (3+ per language)
✅ Copy-to-Clipboard functionality
✅ Syntax Highlighting with custom color scheme
✅ Smooth Animations using Framer Motion
✅ Persistent State with localStorage
✅ Responsive Design for all screen sizes
✅ TypeScript Support with full type safety
✅ Accessibility with proper ARIA labels
✅ Theme Support for light/dark modes

What I Learned 🎓

Building this component taught me several valuable lessons:

State Management Complexity: Managing nested state (language → framework) requires careful consideration of validation and persistence
Icon Integration: Using Simple Icons for consistent, high-quality language logos
Animation Performance: Balancing smooth animations with performance using Framer Motion's optimized settings
Code Organization: Structuring large code snippet objects in a maintainable way
User Experience: The importance of remembering user preferences and providing immediate visual feedback

The Result 🎉

The final SDK integration component provides a comprehensive, interactive way to showcase API integrations across multiple programming languages. It's perfect for:

API Documentation - Show SDK implementation examples
Landing Pages - Demonstrate multi-language SDK support
Developer Portals - Help developers get started quickly with your SDK
Open Source Projects - Showcase community SDK support

Connect & Follow 🤝

Want to see more projects like this? Check out my GitHub profile for more frontend challenges and full-stack projects!

This component was inspired by the elegant SDK integration showcase on the Resend landing page, which demonstrates how to present multi-language code examples in a clean, developer-friendly interface.

What's your experience with building SDK integration components? Have you tackled similar multi-language showcases? Let me know in the comments! 👇

Tags: #react #typescript #frontend #ui #sdk #integration #webdev #javascript #tailwindcss

Building a Dynamic Pricing Page Inspired by Resend: A Deep Dive

Alaa — Wed, 03 Sep 2025 17:18:15 +0000

Email service providers like Resend have mastered transparent, volume-based pricing. Their pricing page is clean, interactive, and helps users understand exactly what they'll pay. Today, I'll show you how I recreated this experience using React and TypeScript.

🚀 Try the live demo here!

What Makes Great Pricing UX? 🎯

Resend's pricing page works because of:

Volume-based transparency - See exactly how pricing scales
Interactive exploration - Slider lets users explore tiers
Smart recommendations - Interface highlights suitable plans
Visual hierarchy - Clear distinction between plan states
Responsive design - Works on all devices

The Tech Stack 🛠️

// Core technologies
- React 18 + TypeScript
- Tailwind CSS
- shadcn/ui components  
- Radix UI primitives
- Lucide React icons

Smart Visual States 🎨

The interface guides users toward the right plan with different states:

Plan States:

🟢 Available - Standard styling
⭐ Recommended - Green badge + highlight
✨ Highlighted - Gradient background
🔒 Unavailable - Grayed out

The Pricing Card Component 🃏

Reusable card handling multiple visual states:

interface PricingCardProps {
  planName: string;
  price: string;
  period: string;
  emailLimit: string;
  features: Feature[];
  ctaText: string;
  highlighted?: boolean;
  recommended?: boolean;
  available?: boolean;
  onCtaClick?: () => void;
}

Visual Features:

Recommended badge with gradient background
Feature icons - green checks vs gray X's
Adaptive CTAs - styling changes based on plan state
Smooth transitions - hover effects and state changes

URL State Management 🔗

Everything syncs with URL parameters for shareability:

// Update URL when volume changes
const updateURL = (volume: number) => {
  const url = new URL(window.location.href);
  url.searchParams.set('volume', volume.toString());
  window.history.replaceState({}, '', url.toString());
};

// Listen for browser navigation
useEffect(() => {
  const handlePopState = () => {
    setSelectedVolume(getVolumeFromURL());
  };
  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

What I Learned 🎓

Building this pricing page taught me:

User-Centric Design - Help users find their right plan
Interactive Elements - Let users explore pricing
Visual Feedback - Guide decisions with design
Technical Excellence - Smooth interactions matter
Accessibility - ARIA labels, keyboard nav, screen readers

The Result 🎉

The final implementation creates a sophisticated, user-friendly interface that helps customers make informed decisions. Users never have to guess what they'll pay or which plan suits their needs.

🔗 Check out the live demo to see all these features in action!

By making pricing transparent and interactive, you build trust and reduce friction in the conversion process.

Building effective pricing pages requires balancing visual appeal with functional clarity. The combination of React's component model, TypeScript's type safety, and Tailwind's utility classes creates a maintainable solution that scales.

Connect & Follow 🤝

Want to see more projects like this? Check out my GitHub profile for more frontend challenges and full-stack projects!

What's your experience with pricing page UX? Have you built similar interactive components? Let me know in the comments! 👇

Tags: #react #typescript #frontend #ui #pricing #webdev #javascript #tailwindcss