DEV Community: Kunal Chakraborty

From Idea to macOS-Style Portfolio: React, GSAP Animations & Higher-Order Components

Kunal Chakraborty — Tue, 17 Mar 2026 03:35:57 +0000

For this project, I set out to build a macOS-inspired portfolio using React, Tailwind CSS, and GSAP. At first, the goal was simple: create something visually impressive. But as the project evolved, it became much more than that. It turned into a deep exploration of animation systems, reusable architecture, and professional development workflows.

The final result isn’t just a portfolio—it behaves like an application, complete with draggable windows, smooth transitions, and a responsive Dock that mimics macOS interactions.

⚡ The Stack That Made It Possible

React acted as the backbone of the application. Instead of treating the UI as static pages, I approached it like an operating system. Each “app” is essentially a window with its own lifecycle—open, close, minimize, and focus. Managing which window stays on top required careful state handling, especially when dealing with z-index and user interactions.

For styling, Tailwind CSS made it surprisingly easy to recreate macOS’s signature glassmorphism. Using utilities like backdrop blur and semi-transparent backgrounds, I was able to achieve the frosted-glass effect without writing heavy custom CSS. This allowed me to focus more on behavior rather than styling complexity.

GSAP is where everything came to life. While CSS animations can handle basic transitions, they fall short when precision and performance are critical. GSAP provided the control needed to build fluid, responsive animations—especially for interactions like window transitions and Dock behavior.

🖱️ Recreating the macOS Dock Experience

One of the most satisfying parts of this project was implementing the Dock magnification effect. It’s a subtle detail, but it adds a lot to the overall experience.

The logic is based on proximity. As the cursor moves closer to an icon, the icon scales up smoothly. This required calculating the distance between the cursor and each icon, then mapping that distance to a scale value. GSAP made it easy to interpolate these values and animate them efficiently.

What seems like a small UI detail actually required careful tuning to feel natural. Too fast, and it feels jittery. Too slow, and it feels unresponsive. Getting this right made a huge difference in the final polish.

🏗️ Scaling the Window System with a Higher-Order Component

As the project grew, managing each window individually started to feel repetitive. Every window needed the same core behavior—animations, drag functionality, focus handling, and layering.

Rather than duplicating this logic across multiple components, I introduced a Higher-Order Component (HOC) called WindowWrapper.

This abstraction allowed me to treat every app window as a plug-and-play component while centralizing all the complex behavior in one place.

💡 The Idea Behind WindowWrapper

The goal was simple:

Wrap any component and instantly give it “macOS window behavior.”

This includes:

Open/close animations

Dragging with GSAP Draggable

Focus management (z-index handling)

Conditional rendering based on state

🧠 The Implementation

Here’s a simplified version of how it works:

`const WindowWrapper = (Component, windowKey) => {
    const Wrapped = (props) => {
        const { focusWindow, windows } = useWindowStore();
        const { isOpen, zIndex } = windows[windowKey];
        const ref = useRef(null);

        // Animation when opening
        useGSAP(() => {
            const el = ref.current;
            if (!el || !isOpen) return;

            el.style.display = "block";

            gsap.fromTo(
                el,
                { scale: 0.8, opacity: 0, y: 40 },
                { scale: 1, opacity: 1, y: 0, duration: 0.1, ease: "power4.out" }
            );
        }, [isOpen]);

        // Draggable behavior
        useGSAP(() => {
            const el = ref.current;
            if (!el) return;

            const header = el.querySelector('#window-header');

            const [instance] = Draggable.create(el, {
                trigger: header || el,
                onPress: () => focusWindow(windowKey)
            });

            return () => instance.kill();
        }, []);

        // Show/hide window
        useLayoutEffect(() => {
            const el = ref.current;
            if (!el) return;
            el.style.display = isOpen ? "block" : "none";
        }, [isOpen]);

        return (
            <section
                id={windowKey}
                ref={ref}
                style={{ zIndex }}
                className="absolute"
            >
                <Component {...props} />
            </section>
        );
    };

    return Wrapped;
};`

⚙️ Why This Approach Works

This pattern solved multiple problems at once.

Instead of tightly coupling UI logic with individual components, I separated behavior from presentation. Each app component now focuses only on its UI, while the wrapper handles system-level responsibilities.

It also made the project incredibly scalable. Adding a new “app” is as simple as wrapping it:

const NotesAppWindow = WindowWrapper(NotesApp, "notes");

No extra logic. No duplication. Just plug and play.

⚙️ Thinking Beyond Code: Professional Workflow

At some point, I realized that writing good UI code wasn’t enough. Managing the project properly was just as important.

I moved away from pushing changes directly to the main branch and started using a feature-branch workflow. Every new feature—whether it was a clock in the menu bar or a new draggable window—was developed in its own branch and merged through a pull request. This gave me a chance to review my own code, clean things up, and avoid breaking existing features.

Versioning also became important as the project evolved. I followed semantic versioning to keep track of changes in a structured way. Major updates marked significant milestones, minor versions introduced new features, and patches handled bug fixes. This added clarity and made the project feel more like a real product.

To streamline deployment, I set up a CI/CD pipeline using GitHub Actions. Now, whenever a pull request is merged into the main branch, the project automatically builds and deploys to Netlify. If something breaks, the deployment fails, preventing unstable code from going live. This automation removed a lot of manual effort and made the workflow much more reliable."
Live_link:https://kunal-dev-portfolio-six.vercel.app
github_link:https://github.com/KunalChakraborty445

# Building an Emotion-Based Music Recommendation System: When AI Meets Your Mood

Kunal Chakraborty — Tue, 27 Jan 2026 11:43:48 +0000

Creating a music player is straightforward; building an AI that reads your face and curates the perfect playlist is a whole different challenge. For my latest project, I ventured into the fascinating intersection of computer vision and music technology, creating a system that analyzes your facial expressions and recommends Spotify tracks to match your mood.

While the sleek interface and instant recommendations are what users experience, the real magic happens behind the scenes—training emotion detection models, integrating with Spotify's API, and building a Flask backend that ties it all together. Here's how I brought emotions and algorithms into harmony.

The Tech Stack: AI Meets Music

To build a system that truly understands emotions and delivers perfect music matches, I combined cutting-edge ML libraries with production-ready APIs:

Machine Learning & Computer Vision:

OpenCV: The powerhouse for real-time face detection and video stream processing. Captures frames from the webcam and preprocesses them for the emotion detection model.
TensorFlow/Keras: Built and trained a Convolutional Neural Network (CNN) on the FER-2013 dataset to classify seven emotions: Happy, Sad, Angry, Surprised, Fearful, Disgusted, and Neutral.
DeepFace: Initially experimented with this pre-trained model for quick prototyping before fine-tuning my own model for better accuracy.

Backend & API:

Flask: A lightweight Python framework perfect for serving the ML model and handling API requests. Built RESTful endpoints for emotion detection and music recommendations.
Spotify Web API: The gateway to millions of songs. Used OAuth 2.0 authentication and accessed audio features (valence, energy, tempo) to match songs with detected emotions.
Spotipy: A Python wrapper that made interacting with Spotify's API incredibly simple—from searching tracks to creating custom playlists.

Frontend:

HTML/CSS/JavaScript: A clean, responsive interface with real-time webcam preview and dynamic playlist rendering.
Chart.js: Visualized emotion probabilities and song audio features in beautiful, interactive charts.

The Core Features: From Face to Playlist

Real-Time Emotion Detection

The heart of the system is the emotion detection pipeline. Here's how it works:

Capture: OpenCV accesses the webcam and captures frames at 30 FPS
Detect: Haar Cascade classifier detects faces in each frame
Preprocess: Crop the face, convert to grayscale, resize to 48x48 pixels
Predict: Feed the preprocessed image into the CNN model
Classify: Model outputs probabilities for all seven emotions

The Challenge: Real-time processing without lag. The solution? Efficient frame skipping and model optimization:

# Process every 3rd frame for better performance
frame_count = 0
if frame_count % 3 == 0:
    emotion = detect_emotion(frame)
    current_emotion = emotion
frame_count += 1

Smart Music Mapping

Detecting emotions is only half the battle. The real magic is translating emotions into music that feels right.

The Algorithm: I created an emotion-to-audio-feature mapping based on Spotify's audio analysis:

emotion_mapping = {
    'happy': {'valence': (0.6, 1.0), 'energy': (0.5, 1.0), 'tempo': (100, 180)},
    'sad': {'valence': (0.0, 0.4), 'energy': (0.0, 0.4), 'tempo': (60, 100)},
    'angry': {'valence': (0.0, 0.5), 'energy': (0.7, 1.0), 'tempo': (120, 200)},
    'calm': {'valence': (0.4, 0.7), 'energy': (0.2, 0.5), 'tempo': (60, 90)},
    # ... more mappings
}

The Result: When you're sad, you get melancholic acoustic tracks with low energy. When you're happy, upbeat pop songs with high valence flood your screen.

Personalized Recommendations

The system doesn't just pick random songs—it learns from your Spotify listening history:

# Get user's top tracks for personalization
top_tracks = sp.current_user_top_tracks(limit=20, time_range='short_term')
top_genres = extract_genres(top_tracks)

# Combine emotion-based features with user preferences
recommendations = sp.recommendations(
    seed_genres=top_genres,
    target_valence=emotion_valence,
    target_energy=emotion_energy,
    limit=10
)

Training the Emotion Detection Model:

Building an accurate emotion classifier was the most challenging—and rewarding—part of this project.

The Dataset Journey

I started with the FER-2013 dataset (35,000+ facial images labeled with emotions). But raw data is messy:

Inconsistent lighting conditions
Mislabeled images
Class imbalance (way more "happy" faces than "disgusted")

The Solution: Data augmentation and class weighting:

datagen = ImageDataGenerator(
    rotation_range=20,
    width_shift_range=0.2,
    height_shift_range=0.2,
    horizontal_flip=True,
    zoom_range=0.2
)

# Balance classes with weighted loss
class_weights = compute_class_weight('balanced', 
                                     classes=np.unique(y_train),
                                     y=y_train)

The CNN Architecture

After experimenting with different architectures, I settled on a custom CNN:

model = Sequential([
    Conv2D(32, (3,3), activation='relu', input_shape=(48,48,1)),
    BatchNormalization(),
    MaxPooling2D(2,2),
    Dropout(0.25),

    Conv2D(64, (3,3), activation='relu'),
    BatchNormalization(),
    MaxPooling2D(2,2),
    Dropout(0.25),

    Conv2D(128, (3,3), activation='relu'),
    BatchNormalization(),
    MaxPooling2D(2,2),
    Dropout(0.4),

    Flatten(),
    Dense(256, activation='relu'),
    Dropout(0.5),
    Dense(7, activation='softmax')  # 7 emotions
])

The Results: After 50 epochs, achieved 67% validation accuracy—not perfect, but solid for real-world use.

Professional Workflow: From Notebook to Production

Moving from a Jupyter notebook to a production Flask app taught me invaluable lessons about ML engineering.

1. Model Optimization & Serialization

Trained models are large (40+ MB). I learned to optimize and save them properly:

# Save the model in HDF5 format
model.save('emotion_model.h5')

# In production, load once at startup
emotion_model = load_model('emotion_model.h5')

The Lesson: Loading the model on every request killed performance. Load it once when the Flask app starts.

2. API Rate Limiting & Caching

Spotify's API has rate limits (1 request per second for some endpoints). I implemented caching to avoid hitting limits:

from functools import lru_cache

@lru_cache(maxsize=128)
def get_recommendations(emotion, user_id):
    # Cache recommendations for 5 minutes
    return fetch_spotify_recommendations(emotion)

3. Error Handling for Real Users

In notebooks, errors crash the cell. In production, they crash the user's experience. I built comprehensive error handling:

try:
    emotion = detect_emotion(frame)
except Exception as e:
    logger.error(f"Emotion detection failed: {e}")
    emotion = "neutral"  # Fallback to neutral

try:
    tracks = get_spotify_tracks(emotion)
except SpotifyException as e:
    return jsonify({"error": "Spotify service unavailable"}), 503

4. Environment Variables & Secrets

Never expose API keys. I used environment variables for all sensitive data:

import os
from dotenv import load_dotenv

load_dotenv()

SPOTIFY_CLIENT_ID = os.getenv('SPOTIFY_CLIENT_ID')
SPOTIFY_CLIENT_SECRET = os.getenv('SPOTIFY_CLIENT_SECRET')

Deployment Challenges & Solutions

Challenge 1: Large Model Files

Deploying a 40MB model to Heroku exceeded slug size limits.

Solution: Switched to AWS EC2 with more storage, and optimized the model using TensorFlow Lite for a 60% size reduction.

Challenge 2: Webcam Access in Browser

Modern browsers require HTTPS for webcam access.

Solution: Set up SSL certificates using Let's Encrypt and configured Flask to serve over HTTPS.

Challenge 3: Cold Start Latency

First request took 10+ seconds as the model loaded.

Solution: Implemented a "warmup" endpoint that loads the model on server startup and keeps it in memory.

Lessons Learned

What Worked:

Transfer Learning: Using pre-trained face detection models (Haar Cascades) saved weeks of training time.
Spotify's Audio Features: Valence and energy metrics are surprisingly accurate for emotion-music matching.
Flask's Simplicity: For ML projects, Flask's lightweight nature beats Django's complexity.

What I'd Do Differently:

Start with Pre-trained Models: I spent weeks training from scratch. Fine-tuning a pre-trained model (like VGGFace) would have been faster.
Add User Feedback Loop: Currently, the system doesn't learn if recommendations are accurate. A "thumbs up/down" feature would improve over time.
Better Lighting Handling: The model struggles in low light. Adding brightness normalization would help.

Future Enhancements: Taking It to the Next Level

The current version delivers solid emotion-based recommendations, but there's so much more potential. Here's what's on the roadmap:

1. Multi-Person Emotion Detection

Right now, it detects one face. Imagine a party mode where it analyzes everyone's emotions and creates a playlist that fits the room's vibe:

Detect multiple faces simultaneously
Average emotion scores across all faces
Weight recommendations toward the dominant emotion
Create collaborative playlists that satisfy the group

2. Voice Tone Analysis

Facial expressions are only part of the story. Voice carries emotional cues too:

Integrate speech emotion recognition using librosa and PyAudio
Analyze pitch, tone, and speaking rate
Combine facial and vocal emotions for more accurate detection
Especially useful for users on phone calls or podcasts

3. Emotion History & Trends

Track emotional patterns over time:

Build a "mood journal" showing emotion trends across days/weeks
Identify triggers (time of day, day of week) for different emotions
Recommend music proactively: "You're usually stressed on Monday mornings. Here's a calming playlist."
Visualize emotional journeys with interactive graphs

4. Integration with Smart Home

Turn the system into an ambient mood manager:

Connect with Philips Hue to adjust lighting based on emotion
Integrate with smart speakers for hands-free music control
Create "mood scenes": Sad = dim lights + melancholic music

5. Mobile App

Currently web-based, but a mobile app would be more practical:

React Native or Flutter for cross-platform development
On-device ML inference using TensorFlow Lite (faster, more private)
Background emotion tracking with periodic check-ins
Push notifications: "Feeling stressed? Try this playlist."

Final Reflections:

Building an emotion-based music recommendation system taught me that AI isn't just about algorithms—it's about understanding human experiences and translating them into meaningful interactions. The project challenged me to:

Bridge the gap between ML research and production engineering
Design systems that feel intuitive, not intrusive
Balance accuracy with real-time performance
Think about privacy (webcam data never leaves the device)

"Technology should adapt to humans, not the other way around. If your music player doesn't understand your mood, is it really smart?"

This project transformed me from someone who "knows Python" to someone who can build end-to-end AI applications that solve real problems. And with voice analysis, multi-person detection, and smart home integration on the horizon, this is just the beginning of the journey.

Tech Stack Summary:

ML/CV: TensorFlow, Keras, OpenCV, DeepFace
Backend: Flask, Python, Spotipy
APIs: Spotify Web API (OAuth 2.0)
Frontend: HTML, CSS, JavaScript, Chart.js
Deployment: AWS EC2, Let's Encrypt SSL
Future: Speech Recognition, TensorFlow Lite, IoT Integration

LINK: IT'S Under Development

What emotions should music apps detect? How would you improve this system? Share your thoughts in the comments below!

Building a Full-Stack Job Portal: From MVP to Production-Ready Platform

Kunal Chakraborty — Tue, 27 Jan 2026 11:14:43 +0000

Creating a simple job board is one thing; building a production-ready job portal with real-time features, state management, and error tracking is another beast entirely. For my latest project, I dove headfirst into the world of full-stack development, building a comprehensive job portal using React, Node.js, Express, and a suite of modern tools.
While the sleek UI and smooth interactions are what users see, the real challenge was architecting a scalable backend, managing complex state, and ensuring the application could handle real-world scenarios. Here's how I built it from the ground up.
🛠️ The Tech Stack: Modern Full-Stack Architecture
To build a robust, scalable job portal, I carefully selected technologies that work seamlessly together:
Frontend:

React: The foundation for building a dynamic, component-based UI. Handled everything from job listings to application forms with reusable components.
Zustand: A lightweight state management solution that made managing global state (user authentication, job filters, application status) incredibly simple compared to Redux.
Axios: Streamlined all HTTP requests with interceptors for authentication tokens and centralized error handling.

Backend:

Node.js + Express: Built a RESTful API that handles user authentication, job postings, applications, and more. Express middleware made route protection and validation a breeze.
MongoDB: A flexible NoSQL database perfect for storing diverse job postings, user profiles, and application data with varying structures.

Production Tools:

Sentry: Real-time error tracking that alerts me the moment something breaks in production. No more "it works on my machine" excuses.
JWT Authentication: Secure token-based authentication that keeps user sessions safe and stateless.

The Features That Matter:

Smart Job Filtering & Search
Users can filter jobs by location, salary range, experience level, and job type. The challenge? Making it fast and responsive.
The Solution: Implemented debounced search with Axios interceptors to cancel previous requests, ensuring the backend isn't overwhelmed with every keystroke:

javascript// Debounced search with cleanup
useEffect(() => {
  const timer = setTimeout(() => {
    fetchJobs(searchQuery);
  }, 500);
  return () => clearTimeout(timer);
}, [searchQuery]);

Real-Time Application Status
Job seekers need to know where they stand. I built a real-time status tracking system that shows whether applications are "Pending," "Under Review," or "Rejected."
The Zustand Magic: State updates instantly across all components without prop drilling:

const useApplicationStore = create((set) => ({
  applications: [],
  updateStatus: (id, status) => 
    set((state) => ({
      applications: state.applications.map(app =>
        app.id === id? { ...app, status } : app
      )
    }))
}));

Secure User Authentication
Built a complete authentication flow with registration, login, and protected routes. JWT tokens are stored securely, and Axios interceptors automatically attach them to every request.
🏗️ Professional Workflow: Engineering Excellence
As the project scaled, I quickly learned that great code isn't enough—you need systems and processes.

API-First Development Before writing a single line of frontend code, I designed the entire API structure. I documented every endpoint, request/response format, and error code using Postman collections. The Lesson: This approach prevented countless "I need one more field" moments and made frontend development smooth and predictable.
Error Handling That Actually Helps Initially, my error messages were generic: "Something went wrong." With Sentry integrated, I now get:

The exact line of code that failed
The user's browser and OS
The API request that triggered the error
A full stack trace

The Result: Bug fixes went from "hours of debugging" to "pinpoint and patch in minutes."

Environment Variables & Security Never hardcode API keys or database URLs. I set up proper environment variable management: javascript// .env files for different environments REACT_APP_API_URL=http://localhost:5000 // Development MONGODB_URI=mongodb://localhost:27017 // Local DB SENTRY_DSN=your_sentry_dsn_here // Error tracking
Git Workflow: Feature Branches & PRs I abandoned the chaos of committing directly to main. Every feature now gets its own branch:

feature/job-filters → Added advanced filtering
feature/user-dashboard → Built the applicant dashboard
bugfix/axios-interceptor → Fixed token refresh logic

Each PR includes a description, screenshots (for UI changes), and a checklist of what was tested.

Deployment & CI/CD:
Manual deployment is error-prone and time-consuming. I automated everything using GitHub Actions:
The Workflow:

Push code to a feature branch
Open a PR → Automated tests run
Merge to main → GitHub Actions builds the frontend and backend
Automatic deployment to production (Vercel for frontend, Railway for backend)

If any test fails, deployment is blocked. The live site stays stable.

Lessons Learned>>

What Worked:

Zustand over Redux: For this project's complexity, Zustand was perfect. Less boilerplate, easier to understand.
Axios Interceptors: Centralized error handling and token management saved countless hours.
Sentry: Catching errors before users report them is a game-changer.

What I'd Do Differently:

TypeScript from Day One: Adding it midway through was painful. Type safety would have prevented many bugs.
Better Database Indexing: As job listings grew, search queries slowed down. Learned the importance of MongoDB indexes the hard way.

Future Plans: Taking It Further
The current version is solid, but there's always room to grow. Here's what's next on the roadmap:

Interview Scheduling System Recruiters and candidates waste time coordinating interviews via email. I'm building an integrated calendar system where:

Recruiters set available time slots
Candidates select their preferred times
Automatic email confirmations (using Nodemailer)
Google Calendar integration for both parties

AI-Powered Job Assistant Imagine a chatbot that helps job seekers:

Resume Analysis: Upload your resume, get suggestions on how to improve it for specific jobs
Job Recommendations: "Based on your skills, here are 5 jobs you're qualified for."
Interview Prep: Practice common interview questions with AI feedback

The Tech: Planning to integrate OpenAI's API for natural language processing and personalized recommendations.

Advanced Analytics Dashboard For recruiters, data is everything. I'm building a dashboard showing:

Application conversion rates
Most effective job posting strategies
Candidate pipeline visualization

🎬 Final Reflections
Building a full-stack job portal taught me more than any tutorial ever could. It's not just about knowing React or Node.js—it's about understanding:

How to architect scalable systems
Why error tracking matters in production
The importance of professional workflows (PRs, CI/CD, versioning)

"Anyone can write code that works today. Engineers write code that works tomorrow, next month, and next year."

This project transformed me from someone who "can code" to someone who can ship production-grade applications. And with the AI assistant and interview scheduling features on the horizon, this is just the beginning.

Tech Stack Summary:

Frontend: React, Zustand, Axios, Tailwind CSS
Backend: Node.js, Express, MongoDB, JWT
DevOps: Sentry, GitHub Actions, Vercel, Railway
Future: OpenAI API, Calendar APIs, Advanced Analytics

GitHub: https://github.com/KunalChakraborty445/job-portal-full-stack
Live Demo: https://job-portal-full-stack-client-wine.vercel.app