DEV Community: Guillaume Sere

🧩 Building an Interactive 3D Rubik's Cube with Three.js

Guillaume Sere — Sun, 19 Jul 2026 12:33:41 +0000

3D graphics on the web have become much more accessible thanks to modern libraries like Three.js. As a personal challenge, I decided to build an interactive 3D Rubik's Cube that runs entirely in the browser.

The objective wasn't just to render a cube, but to recreate the mechanics of a real Rubik's Cube with smooth animations, realistic rotations, and an intuitive interface.

🎮 Live Demo:

https://ruby-cube-60.vercel.app/

🚀 Why This Project?

This project allowed me to explore several areas of modern web development:

Real-time 3D rendering
Matrix transformations
Object hierarchy management
Smooth animations
Interactive controls
Performance optimization

Building a Rubik's Cube is an excellent exercise because every move affects multiple pieces while preserving the cube's overall structure.

🛠️ Tech Stack

Three.js
Vite
GSAP
dat.GUI

✨ Features

🧩 Fully interactive 3D Rubik's Cube
🎮 Individual face rotations
🎥 Free camera rotation
⚡ Smooth animations with GSAP
⏱️ Integrated timer
🔢 Move counter
🎲 Random shuffle
🔄 Reset cube
📜 Move history
🎨 Responsive interface

🧠 Cube Architecture

The Rubik's Cube is composed of 27 smaller cubes (Cubies).

Each cubie is an independent Three.js Mesh positioned inside a virtual 3×3×3 grid.

Instead of modifying a single object, every rotation updates only the cubies belonging to the selected face.

This architecture closely reproduces the behavior of a physical Rubik's Cube.

🔄 Face Rotation Logic

When a player rotates a face, the application performs several steps:

Identify the cubies belonging to the selected layer.
Group them temporarily.
Animate the rotation using GSAP.
Update each cubie's position.
Update each cubie's orientation.
Remove the temporary group.
Wait for the next move.

This keeps the cube perfectly synchronized after every animation.

🎨 Rendering with Three.js

Three.js handles the entire 3D scene, including:

Perspective Camera
Scene
WebGL Renderer
Lights
Meshes
Materials
Camera Controls

Using hardware acceleration through WebGL allows the cube to remain fluid even during continuous rotations.

⚡ Smooth Animations

Every face rotation is animated with GSAP, providing fluid and natural movements.

The animation system also prevents overlapping rotations, ensuring that one move is completed before another begins.

This greatly improves the overall user experience.

🚧 Technical Challenges

Although the interface looks simple, implementing the mechanics required solving several interesting problems:

Correctly identifying cubies on each face
Preserving cube orientation after rotations
Synchronizing animations with cube state
Preventing simultaneous moves
Updating positions without losing precision
Maintaining smooth rendering performance

These challenges made the project much more interesting than a simple 3D rendering demo.

📚 What I Learned

This project helped me improve my knowledge of:

Three.js
WebGL rendering
3D transformations
Rotation matrices
Object hierarchy
GSAP animations
Interactive UI design
Vite project architecture

Building interactive 3D applications is a great way to better understand graphics programming and object transformations.

💡 Future Improvements

Some ideas for future versions include:

🤖 Automatic solving algorithm
📖 Beginner solving tutorial
🎯 Scramble generator
💾 Save and restore cube state
🌙 Additional visual themes
📱 Improved mobile controls
🏆 Speedcubing statistics
🎵 Sound effects

🎉 Conclusion

Building this Rubik's Cube was an exciting challenge that combined mathematics, 3D graphics, animations, and front-end development.

Rather than relying on a game engine, the entire experience was built using Three.js, GSAP, and Vite, resulting in a lightweight and interactive web application.

If you're interested in Three.js, WebGL, or interactive 3D experiences on the web, I'd love to hear your feedback!

🎮 Try it here:

👉 https://ruby-cube-60.vercel.app/

🏷️ Tags

threejs javascript vite webgl 3d frontend gamedev gsap

🍬 Building a Candy Crush-Inspired Match-3 Game with React & TypeScript

Guillaume Sere — Sun, 19 Jul 2026 12:27:57 +0000

Games are an excellent way to improve front-end development skills. Unlike traditional CRUD applications, they require algorithms, real-time state management, animations, and user interactions to work together seamlessly.

To challenge myself, I built a Candy Crush-inspired Match-3 game entirely with React and TypeScript, without using a game engine.

🎮 Live Demo:

https://candy-crush-gratuit.vercel.app/

🚀 Why This Project?

The goal was to recreate the core mechanics of a Match-3 game while keeping the project lightweight, responsive, and enjoyable on both desktop and mobile devices.

Rather than focusing only on the visual aspect, I wanted to implement all the gameplay mechanics from scratch.

🛠️ Tech Stack

React 18
TypeScript
Create React App
HammerJS (touch gestures)
CSS3

✨ Features

🍬 Drag & Drop gameplay
📱 Mobile touch support with HammerJS
🎯 Automatic match detection
↔️ Horizontal and vertical combinations
⬇️ Gravity system
🎲 Random candy generation
🔥 Combo detection
📊 Live score tracking
📈 Progress indicator
🔀 Shuffle board
🔄 Restart game
📱 Fully responsive interface

🧠 Game Logic

The game board is represented as a two-dimensional grid where each cell contains a candy.

Every move follows the same sequence:

Swap two candies
Validate the move
Detect all horizontal and vertical matches
Remove matching candies
Apply gravity so candies fall into empty spaces
Generate new candies at the top
Scan the board again for new combinations
Repeat until the board becomes stable

This recursive process creates the chain reactions that make Match-3 games so satisfying.

🔍 Match Detection

After each move, the board is scanned to find groups of three or more identical candies.

The algorithm checks both:

Horizontal matches
Vertical matches

Every detected match is removed simultaneously before the gravity phase begins.

This also allows multiple combinations and combo chains to occur naturally.

Example:

for each cell
    check horizontal
    check vertical

if match
    remove candies

📱 Mobile Support

To provide a better experience on smartphones and tablets, the project integrates HammerJS for touch gesture recognition.

Desktop users can play with the mouse, while mobile users simply swipe candies with their fingers.

Both input methods use exactly the same game logic.

⚡ Performance

A Match-3 game continuously updates the board after every move.

To keep gameplay smooth, I focused on:

Efficient board updates
Lightweight React state management
Minimal unnecessary re-renders
Optimized array manipulation
Smooth gameplay during long combo cascades

🚧 Technical Challenges

Although the gameplay looks simple, implementing the mechanics required solving several challenges:

Preventing invalid moves
Detecting multiple simultaneous matches
Handling combo cascades
Applying gravity efficiently
Synchronizing animations with state updates
Supporting both mouse and touch interactions
Keeping rendering performant

These mechanics represent the most interesting part of the project.

📚 What I Learned

This project allowed me to improve my skills in:

React
TypeScript
State management
Grid-based algorithms
Recursive game logic
Performance optimization
Mobile interactions
Interactive UI development

Building games is a fun way to practice algorithms while creating engaging user experiences.

💡 Future Improvements

Some ideas for future versions include:

🍭 Special candies
💥 Bomb combinations
🎯 Level objectives
🔊 Sound effects
🎵 Background music
🏆 Online leaderboard
💾 Save progression
🌍 Additional game modes

🎉 Conclusion

Building this Match-3 game was a rewarding challenge that combined front-end development with algorithm design.

It demonstrates how React can be used to build highly interactive applications beyond traditional business interfaces.

If you're interested in React, TypeScript, or browser game development, I'd love to hear your feedback!

🎮 Play the game here:

👉 https://candy-crush-gratuit.vercel.app/

🏷️ Tags

react typescript javascript gamedev frontend css webdev algorithms

Nouveau lien pour le site

Guillaume Sere — Sat, 18 Jul 2026 14:13:45 +0000

Guillaume Sere

Dec 19 '25

World Radio 60 : explorer les radios du monde entier depuis votre navigateur 🎧🌍

#webdev #javascript #api #nextjs

2 min read

Nouvelle URL pour IPTV 60

Guillaume Sere — Sat, 18 Jul 2026 08:44:46 +0000

Guillaume Sere

Nov 26 '25

📺✨ IPTV 60 fait peau neuve !

#webdev #nextjs #javascript #api

2 min read

J’ai créé Agenda Festivals : une carte interactive des festivals en France avec Next.js et data.gouv

Guillaume Sere — Fri, 10 Jul 2026 09:36:01 +0000

J’ai créé Agenda Festivals : une carte interactive des festivals en France avec Next.js et data.gouv

J’ai récemment développé Agenda Festivals, un site web qui permet d’explorer les festivals en France à partir de données publiques.

👉 Démo : https://agenda-festivals.vercel.app/

L’idée est simple : au lieu d’avoir une liste statique ou difficile à parcourir, je voulais créer une expérience plus visuelle, avec une carte interactive, des filtres, une recherche, des fiches détaillées et une interface responsive.

Le site permet aujourd’hui d’explorer plus de 7 000 festivals en France, avec des informations comme la ville, la région, le département, la discipline, la période et la localisation.

Pourquoi ce projet ?

Je voulais travailler sur un projet qui combine plusieurs sujets que j’aime bien :

l’open data
la cartographie web
Next.js
l’UX autour de la recherche et des filtres
la visualisation de données culturelles

La France a énormément de festivals, mais les données sont souvent dispersées ou peu agréables à explorer.

Le dataset de data.gouv donne une très bonne base pour créer un explorateur national.

L’objectif n’était pas seulement d’afficher des points sur une carte, mais de créer un vrai outil de découverte.

La source des données

Le projet utilise le dataset public :

Liste des festivals en France

Source : data.gouv.fr / Ministère de la Culture

URL : https://www.data.gouv.fr/datasets/liste-des-festivals-en-france

Le dataset est disponible dans plusieurs formats :

CSV
JSON
GeoJSON
ZIP

Pour une carte interactive, le format le plus pratique est évidemment le GeoJSON, car il contient directement les coordonnées géographiques des festivals.

Dans le projet, je récupère les données côté serveur, puis je les normalise dans un format interne plus simple à utiliser côté front.

Stack technique

Le projet est construit avec :

Next.js
TypeScript
Tailwind CSS
shadcn/ui
React Leaflet
OpenStreetMap
Zod pour sécuriser la donnée
Vercel pour le déploiement

L’idée était de garder une stack moderne, rapide à itérer, mais assez robuste pour gérer plusieurs milliers de points sur une carte.

Architecture générale

Le projet est séparé en plusieurs couches :


txt
app/
  page.tsx
  festivals/
    [slug]/
      page.tsx

components/
  festivals/
    FestivalCard.tsx
    FestivalFilters.tsx
    FestivalList.tsx
    FestivalCover.tsx

  map/
    FestivalMap.tsx
    MapPopup.tsx
    MapControls.tsx

lib/
  data-gouv.ts
  normalize-festival.ts
  filters.ts
  distance.ts
  slugify.ts

types/
  festival.ts

J’ai créé Plageo : une carte moderne pour explorer les plages et sites de baignade en France

Guillaume Sere — Fri, 10 Jul 2026 09:25:26 +0000

J’ai créé Plageo : une carte moderne pour explorer les plages et sites de baignade en France

Je viens de mettre en ligne Plageo, une application web qui permet d’explorer les plages et sites de baignade officiels en France.

👉 Démo : https://localisation-plages.vercel.app/

L’idée est simple : partir de données publiques fiables, les rendre plus accessibles, puis proposer une expérience moderne autour de la recherche, de la carte, de la géolocalisation et des itinéraires.

Aujourd’hui, Plageo référence 3 409 sites officiels, avec 3 409 points cartographiés et 18 régions couvertes.

Pourquoi ce projet ?

Quand on cherche une plage ou un site de baignade, on tombe souvent sur des listes peu pratiques, des cartes incomplètes ou des résultats très orientés tourisme.

Je voulais créer une interface plus directe :

chercher une plage, une commune ou un département ;
visualiser les sites sur une carte ;
distinguer les ambiances : mer, lac, rivière ;
accéder rapidement à une fiche ;
lancer un itinéraire depuis sa position ;
utiliser des données publiques plutôt qu’un listing fermé.

Le but n’est pas seulement de faire un annuaire, mais de transformer un dataset public en vraie expérience utilisateur.

La source des données

Le projet utilise le jeu de données public suivant :

https://www.data.gouv.fr/datasets/donnees-de-rapportage-de-la-saison-balneaire-1

Ce dataset correspond aux données de rapportage de la saison balnéaire. Il contient notamment :

les sites de baignade ;
les coordonnées géographiques ;
l’origine de l’eau ;
des informations sanitaires ;
des classements ou données de qualité lorsque disponibles ;
des informations liées à la saison balnéaire.

Point important : ce dataset ne contient pas uniquement des plages de bord de mer. Il référence des sites de baignade officiels, ce qui inclut aussi des lacs, rivières, plans d’eau et bases de loisirs.

C’est pour cela que l’interface parle de plages et sites de baignade.

Stack technique

Pour cette première version, j’ai choisi une stack moderne et assez classique pour un produit web interactif :

Next.js avec App Router ;
TypeScript ;
Tailwind CSS ;
composants UI modernes ;
carte interactive basée sur OpenStreetMap ;
déploiement sur Vercel ;
données issues de data.gouv.fr ;
logique de géolocalisation côté navigateur ;
liens d’itinéraire vers Google Maps, Apple Plans et OpenStreetMap.

L’objectif était d’avoir une application rapide, responsive et agréable à utiliser, sans dépendre d’une API payante pour la carte.

Architecture générale

L’application est organisée autour de trois grands blocs :


txt
/app
  page.tsx
  plages/
    page.tsx
    [id]/
      page.tsx

/components
  layout/
  beaches/
  map/
  ui/

/lib
  data-gouv.ts
  beaches.ts
  geo.ts
  routes.ts
  images.ts
  utils.ts

/types
  beach.ts

Building ArchiveFlix: A Free Movie Streaming Platform with Next.js 15

Guillaume Sere — Thu, 11 Jun 2026 07:57:10 +0000

# Building ArchiveFlix: A Free Movie Streaming Platform with Next.js 15

Recently, I built ArchiveFlix, a web application that allows users to discover and watch public-domain movies available through Internet Archive.

The goal was to create a modern streaming experience inspired by popular video platforms while relying entirely on freely accessible content.

Features

Browse a catalog of public-domain movies
Search movies instantly
Save favorites
Watch movies directly in the browser
Responsive design
SEO optimization with sitemap, robots.txt, and metadata

Tech Stack

Next.js 15
React
TypeScript
Tailwind CSS
Internet Archive API
Vercel

Retrieving Movie Data

One of the most interesting parts of the project was working with Internet Archive's APIs.

To retrieve the movie catalog, I used the Advanced Search API:

const response = await fetch(
  "https://archive.org/advancedsearch.php?q=mediatype:movies&fl[]=identifier&fl[]=title&rows=24&output=json"
);

const data = await response.json();

Each movie can then be queried individually using the metadata endpoint:

const response = await fetch(
  `https://archive.org/metadata/${id}`
);

const metadata = await response.json();

This provides information such as:

Title
Description
Creator
Runtime
Release year
Video files

Building the Video Player

After retrieving metadata, the application automatically extracts the available MP4 video file and displays it through a native HTML5 player.

<video controls>
  <source src={videoUrl} type="video/mp4" />
</video>

This keeps the implementation simple while supporting all modern browsers.

SEO Optimization

Since the project contains many movie pages, SEO was an important consideration.

The application includes:

Dynamic metadata
Open Graph tags
Twitter cards
Dynamic sitemap generation
robots.txt
Google Search Console verification

Example:

export const metadata = {
  title: "ArchiveFlix",
  description:
    "Watch public-domain movies online for free.",
};

Deployment Challenges

While everything worked perfectly in development, I encountered timeout issues after deploying to Vercel.

The issue came from requests to Internet Archive's metadata endpoints occasionally timing out.

To improve reliability, I added:

Error handling with try/catch
ISR caching using revalidate
Fallback states when requests fail

Example:

const response = await fetch(url, {
  next: {
    revalidate: 3600,
  },
});

This significantly reduced the number of external requests and improved performance.

Final Thoughts

ArchiveFlix was a fun project that allowed me to work with external APIs, dynamic content, SEO optimization, and video streaming in Next.js.

The project demonstrates how publicly available content can be transformed into a modern user experience using today's web technologies.

I'd love to hear your thoughts and feedback.

🚀 Live Demo: https://archiveflix-60.vercel.app

nextjs #react #typescript #webdev #opensource #javascript #frontend #seo

🎬 I Built a Universal Video Player for HLS, DASH & MP4 (Now with Subtitles, Fullscreen & Quality Control)

Guillaume Sere — Mon, 04 May 2026 12:08:44 +0000

Working with video on the web sounds simple…

Until you actually try it.

😩 The Problem

If you've ever built a video player, you know this:

MP4 works natively
HLS (.m3u8) needs special handling
DASH (.mpd) requires another library

And if you want to support:

💻 Desktop
📱 Mobile
📺 Smart TVs

👉 it quickly becomes a mess.

🧠 So I Built My Own Solution

Yesterday, I created:

👉 universal-video-player

https://www.npmjs.com/package/universal-video-player

A lightweight JavaScript/TypeScript video player that supports:

MP4
HLS
DASH

All with one simple API.

⚡ The Goal

Instead of juggling multiple libraries…

You just do this:

import { VideoPlayer } from "universal-video-player"

 const player = new VideoPlayer({
 src: "video.m3u8",
 autoplay: true
 })

 player.mount("#app")

💥 That’s it.

🎥 Multi-Format Support

⚡ Simple Usage

const player = new VideoPlayer({
 src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
 autoplay: true 
})

 player.mount("#app")

🚀 New Features Added

I’ve now added several advanced features to make the player production-ready:

✅ WebVTT subtitles support
✅ Fullscreen API
✅ Events system (play, pause, etc.)
✅ Custom controls support
✅ HLS quality selector

🎥 HLS Streaming Example

const player = new VideoPlayer({
 src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
 autoplay: true
 })

 player.mount("#app")

📝 Subtitles Example

player.addSubtitles("subtitles.vtt", "en")

📺 Fullscreen Example

player.fullscreen()

🎮 Events API

player.on("play", () => {
 console.log("Video started") 
})

⚡ Quality Selector (HLS)

player.setQuality(0)

📺 Smart TV Compatible

One of the main goals was compatibility.

👉 This player works on:

Samsung Tizen (browser)
LG WebOS
Android TV

As long as a browser is available.

🧠 How It Works

Internally, the player automatically detects the format:

.mp4 → native HTML5 video
.m3u8 → HLS via hls.js
.mpd → DASH via dash.js

👉 You don’t have to care about it.

🚀 Why This Matters

If you're building:

streaming apps
dashboards
media platforms
IPTV tools

👉 this saves a huge amount of development time.

No more:

switching libraries
rewriting code
handling edge cases manually

🎯 Current API

player.play()
player.pause() 
player.destroy()
player.fullscreen()
player.addSubtitles()
player.setQuality()
player.on()

🔥 Next Features

Planned next:

Chromecast support
AirPlay support
Netflix-style UI
Picture-in-picture
React/Vue wrappers

📦 Try It

npm install universal-video-player

💬 Final Thoughts

GIT: https://github.com/GuillaumeSere/universal-video-player
npm: https://www.npmjs.com/package/universal-video-player

Video on the web shouldn't be this complicated.

This is my attempt to make it simple.

If you try it, I’d love your feedback 🙌

🚀 I Got Tired of AI APIs… So I Built My Own SDK in 24h (multi-ai-client)

Guillaume Sere — Thu, 23 Apr 2026 09:56:24 +0000

Working with AI APIs
is powerful…
but let’s be honest:

👉 it’s also a mess.

OpenAI → one format
Claude → another
Gemini → completely different
Mistral → again something else

Every time you switch provider, you rewrite everything.

So yesterday, I decided to fix that.

🧠 The Idea

What if you could use one single API for all AI providers?
No matter if it's:

OpenAI
Claude (Anthropic)
Gemini
Mistral

👉 Same code. Same interface. Same logic.

⚡ Meet multi-ai-client

A lightweight unified AI SDK for JavaScript & TypeScript.

🔥 The Goal

Instead of this 👇

// different code for each provider 😩

You do this 👇

import { AIClient } from "multi-ai-client"

 const ai = new AIClient({ 
apiKey: "YOUR_API_KEY",
 provider: "openai"
 }) 

const res = await ai.chat("Explain AI simply")
 console.log(res)

💥 Done.

🔌 Switching Providers = 1 Line

const ai = new AIClient({ 
apiKey: "YOUR_API_KEY",
 provider: "anthropic"
 })

👉 No rewrite. No headache.

⚡ Streaming (Real-Time Output)

Modern AI apps need streaming.
Here’s how simple it is:

for await (const chunk of ai.stream("Tell me a story")) { process.stdout.write(chunk.content) }

🧠 Clean & Unified Output

Every provider returns the same format:

{ 
content: "Hello",
 done: false
 }

👉 No parsing nightmares.

💡 Why This Matters

If you’ve built with AI APIs, you know:

switching providers = pain
maintaining multiple integrations = worse
streaming = inconsistent

👉 This SDK removes all that friction.

🚀 Key Features

🤖 Multi-provider support (OpenAI, Claude, Gemini, Mistral)
⚡ Unified API (chat() + stream())
🔄 Real-time streaming (AsyncIterator)
🧠 TypeScript support
📦 Lightweight
🔌 Extensible architecture

⚙️ Advanced Usage

await ai.chat("Explain AI", {
 temperature: 0.7,
 maxTokens: 500 
})

🏗️ Under the Hood

AIClient 
├── OpenAI
├── Anthropic
├── Gemini
└── Mistral

👉 Each provider is isolated but exposed through one clean interface.

🔥 Why I Built This

I wanted something:

simple
fast
clean
reusable across projects

👉 Basically: a tool I wouldn’t hate using

📦 Try It Yourself

npm install multi-ai-client

🧪 Real Use Case

Switch providers dynamically:

const providers = ["openai", "anthropic", "gemini"]

 for (const provider of providers) {
 const ai = new AIClient({ apiKey: "...", provider })
 console.log(await ai.chat("Explain quantum computing"))
 }

🔮 What’s Coming Next

smarter streaming (token-level)
retry system
rate limiting
plugin system
caching

💬 Final Thought

AI is evolving fast.

But the developer experience? Not always.

👉 multi-ai-client is my attempt to fix that.

Link: https://www.npmjs.com/package/multi-ai-client
Git: https://github.com/GuillaumeSere/multi-ai-client

If you find this useful, feedback is welcome 🙌

🧩 Building Mosaic Grid — A Rotation-Based Puzzle Game with Next.js

Guillaume Sere — Fri, 10 Apr 2026 14:58:44 +0000

I recently built Mosaic Grid, a browser-based puzzle game focused on placement and rotation mechanics. In this post, I want to walk through the technical decisions, challenges, and architecture behind it.

https://mosaic-grid.vercel.app/

🎮 Concept

The game is played on a 6x6 grid, where players must:

Drag & drop pieces onto the board
Rotate them in 90° increments
Avoid overlaps
Match an expected solution

At its core, it’s a mix of spatial reasoning and constraint solving.

⚙️ Tech Stack

Next.js (App Router)
React
TypeScript
CSS Modules / Tailwind (depending on your setup)
Custom state management (no heavy external libs)

🧠 Core Architecture

1. Grid Representation

The board is represented as a 2D array:

type Cell = { 
occupied: boolean;
 pieceId?: number;
 };
 const grid: Cell[][] = Array(6).fill(null).map(() => 
Array(6).fill({ occupied: false }) 
);

2. Piece Modeling

Each piece is defined as a matrix:

type Piece = {
  id: number;
  shape: number[][];
  rotation: number; // 0, 90, 180, 270
};

Example (2x2 block):

[
  [1, 1],
  [1, 1]
]

3. Rotation Logic

Instead of storing multiple orientations, I compute rotations dynamically:

function rotateMatrix(matrix: number[][]): number[][] {
 return matrix[0].map((_, i) =>
 matrix.map(row => row[i]).reverse()
 ); 
}

Each click applies a 90° rotation.

4. Drag & Drop System

I implemented a custom drag & drop system instead of relying on libraries.

Why?

More control over snapping behavior
Easier grid alignment
Better performance for small UI

Key ideas:

Track mouse position
Translate piece preview in real-time
Snap to nearest valid grid cell on drop

5. Placement Validation

Before placing a piece:

Check boundaries
Check collisions
Apply special rules (e.g. 2x2 pieces must align on even coordinates)

function canPlace(piece, x, y, grid) {
 for (let i = 0; i < piece.shape.length; i++) {
 for (let j = 0; j < piece.shape[i].length; j++) { 
if (piece.shape[i][j]) {
 if (!grid[y + i] || !grid[y + i][x + j]) return false;
 if (grid[y + i][x + j].occupied) return false;
 }
 }
 } 
return true;
 }

6. Game State

State is split into:

grid
pieces (with position + rotation)
progress (correct vs incorrect placements)

I avoided global state libraries and used React state + lifting state up, which was sufficient for this scale.

🎯 UX Details

Some small but important features:

Double-click to rotate placed pieces
Click to rotate pieces in the palette
Visual feedback:
1. 🟢 Correct placement
2. 🔴 Incorrect placement
Automatic “snap” to valid positions

🧩 Challenges

1. Rotation + Collision Combined

Handling rotation while ensuring valid placement required recalculating bounding boxes dynamically.

2. Snapping System

Making the drag feel natural without jitter or misalignment took several iterations.

3. Edge Cases

Partial out-of-bounds placement
Rotated shapes exceeding grid limits
Special constraints for certain pieces

🚀 What’s Next

Possible improvements:

Procedural level generation
Mobile touch support improvements
Animations (Framer Motion)
Score / timer system
Multiplayer or daily challenges

💬 Feedback

https://mosaic-grid.vercel.app/

If you’re into puzzle games or frontend architecture, I’d love your feedback!

What would you improve in this kind of system?
How would you handle state or performance differently?

webdev #nextjs #react #gamedev #javascript #indiedev

🌍 Building “Ma Zone” — A Geolocated Events Platform with Next.js

Guillaume Sere — Fri, 06 Feb 2026 11:51:02 +0000

I recently built Ma Zone, a web application that helps users discover events near their location and around the world.
The goal was to work on real-world challenges like geolocation, third-party APIs, maps, and SEO in a modern full-stack React environment.

Here’s a breakdown of the technical side of the project 👇

https://ma-zone-sortie.vercel.app/

🧱 Tech Stack

Next.js (App Router)
React + TypeScript
Leaflet + React-Leaflet for interactive maps
External Event APIs (geolocated event data)
Server-side data fetching with caching control
SEO optimization using Next.js Metadata API

🗺️ 1. Handling Maps in Next.js (SSR Challenge)

Leaflet depends on the window object, which doesn’t exist during server-side rendering.

To avoid the classic:

ReferenceError: window is not defined

I isolated the map into a Client Component and loaded it dynamically:

"use client";

import dynamic from "next/dynamic";

const Map = dynamic(() => import("./Map"), { ssr: false });

export default function MapWrapper() {
  return <Map />;
}

📍 2. User Geolocation

The app requests the user’s position via the browser API:

navigator.geolocation.getCurrentPosition(
  (position) => {
    setCoords({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    });
  },
  () => {
    // fallback location (Paris)
    setCoords({ lat: 48.8566, lng: 2.3522 });
  }
);

These coordinates are then used to fetch nearby events.

🌐 3. Fetching Geolocated Events from APIs

On the server side, I aggregate event data from multiple providers and normalize the structure:

const mapEvent = (item: any) => ({
  id: item.id,
  title: item.name,
  description: item.description,
  date: item.date,
  latitude: Number(item.latitude),
  longitude: Number(item.longitude),
});

Data is fetched with cache: "no-store" to ensure fresh event listings:

await fetch(url, { cache: "no-store" });

🧭 4. Displaying Events on the Map

Each event becomes a marker:

<Marker position={[event.latitude, event.longitude]}>
  <Popup>
    <h3>{event.title}</h3>
    <p>{event.date}</p>
  </Popup>
</Marker>

This creates a visual discovery experience instead of a simple list.

⚡ 5. SEO with Next.js Metadata API

Even though the app is dynamic and map-heavy, SEO still matters.

export const metadata = {
  title: "Ma Zone – Events near you",
  description: "Discover concerts, festivals and local events around you.",
  openGraph: {
    title: "Ma Zone",
    description: "Find events near you",
    type: "website",
  },
};

This ensures proper indexing and rich previews when shared.

🧠 Key Challenges Solved

✔ Mixing client-only libraries (Leaflet) with SSR
✔ Handling browser geolocation safely
✔ Normalizing data from different event APIs
✔ Building a map-based UX instead of a traditional feed
✔ Keeping performance + SEO in a hybrid Next.js app

🚀 What’s Next

Planned improvements include:

Event detail pages with dynamic metadata
Filters (date, category, free/paid)
Favorites system
Smarter location-based suggestions

Link: https://ma-zone-60.vercel.app/

This project was a great way to explore real-world geospatial data, API aggregation, and modern Next.js architecture.

If you're building something similar or working with maps + Next.js, I’d love to exchange ideas!

nextjs #react #typescript #webdev #frontend #maps #geolocation #seo

World Radio 60 : explorer les radios du monde entier depuis votre navigateur 🎧🌍

Guillaume Sere — Fri, 19 Dec 2025 17:02:24 +0000

J’ai récemment terminé un projet personnel que je voulais partager : World Radio 60, un site web qui permet d’écouter et de découvrir des radios du monde entier, avec une interface simple et intuitive.

Pourquoi ce projet ?

Je voulais créer une plateforme où l’utilisateur peut :

parcourir les radios par pays et voir le drapeau correspondant ;
filtrer par ville, pays ou nom de radio ;
écouter un flux audio en direct directement depuis le site ;
bénéficier d’une navigation fluide et rapide, même avec des centaines de radios.

Stack et choix techniques

Pour ce projet, j’ai utilisé:

Next.js 13 (App Router) pour le rendu côté serveur et la génération de pages dynamiques.
React pour construire une interface réactive et interactive.
TypeScript pour plus de sécurité sur les types et éviter les erreurs courantes.
API interne pour contourner les problèmes de CORS et récupérer les flux des radios.
Tailwind CSS pour un style moderne, responsive et rapide à mettre en place.

Comment ça fonctionne ?

Le site récupère les lieux (places) depuis l’API Radio.Garden.
Les lieux sont regroupés par pays, avec une limite de villes pour optimiser les performances.
Pour chaque lieu, les channels sont récupérés via un endpoint interne Next.js.
L’utilisateur peut filtrer les radios par pays ou rechercher une station spécifique.
Un lecteur audio permet d’écouter le flux en direct.

Optimisations

🔒 Verrou anti-double fetch pour éviter les requêtes infinies en React Strict Mode.

⚡ Lazy loading et limites par pays pour réduire le temps de chargement.

✅ Gestion des erreurs et fallback pour les flux indisponibles.

Résultat

World Radio 60 est maintenant en ligne et permet de parcourir facilement les radios de tous les continents, tout en offrant une interface simple et rapide.

🌐 Découvrez-le ici : https://world-radio-6z.vercel.app/