ReactPlaybook.dev

Project Overview

ReactPlaybook.dev is a self-documenting portfolio designed to demonstrate working knowledge of core and advanced React concepts. Built using Vite + React, it showcases concepts from the Meta React Developer Certificate curriculum with live demos, dynamic routes, and theme toggling.

Dark Mode & Theming

We implemented a smooth light/dark theme toggle using React Context, CSS variables, and `localStorage` persistence — with no flash on refresh. A pre-load script ensures consistent theming even before React hydrates.

Interactive Concept Cards

Each React concept is displayed as a card that highlights on hover and routes to a detailed live demo page using `react-router-dom`. Transitions and hover effects enhance interactivity.

Live JSX Demonstration

Pages like JSXBasics render JSX code live — teaching concepts by showing users how written code translates directly into visual elements in real time.

Mobile-First Design

The entire site was designed with mobile breakpoints in mind. Padding, spacing, and sticky elements dynamically adjust for smaller screen sizes to ensure readability and usability.

Build & Deployment

Deployed using GitHub Pages with a custom `basename` and a `404.html` fallback to ensure all dynamic routes (like `/concept/jsx-basics`) function properly even on page reloads.