The latest articles on DEV Community by Joan Jiao (@joan_jiao_f2fb9ec9969946f). https://dev.to/joan_jiao_f2fb9ec9969946f https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4104622%2Ffb3af5ff-389f-40b9-a37a-39b4e8808e93.png https://dev.to/joan_jiao_f2fb9ec9969946f en Joan Jiao Sun, 06 Sep 2026 12:56:24 +0000 https://dev.to/joan_jiao_f2fb9ec9969946f/i-built-a-no-account-guess-the-song-game-with-the-web-audio-api-4i02 https://dev.to/joan_jiao_f2fb9ec9969946f/i-built-a-no-account-guess-the-song-game-with-the-web-audio-api-4i02 <p>I built a small browser game called NoteGuess.</p> <p>Players listen to a short synthesized melody and guess the song title from four choices. It requires no account, no app installation, and no commercial audio files.</p> <p>Try <a href="https://guesssong.me/?utm_source=devto&amp;utm_medium=referral&amp;utm_campaign=web_audio_article" rel="noopener noreferrer">Guess the Song Game</a></p> <p>The source code is available on GitHub:<br> <a href="https://github.com/joanjiaocn-rgb/guesssong" rel="noopener noreferrer">https://github.com/joanjiaocn-rgb/guesssong</a></p> webdev gamedev Joan Jiao Sat, 05 Sep 2026 11:38:08 +0000 https://dev.to/joan_jiao_f2fb9ec9969946f/how-i-built-a-privacy-first-personality-quiz-with-nextjs-and-zero-backend-2l6d https://dev.to/joan_jiao_f2fb9ec9969946f/how-i-built-a-privacy-first-personality-quiz-with-nextjs-and-zero-backend-2l6d <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyzqayqmrhd89b8pxqx6s.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyzqayqmrhd89b8pxqx6s.png" alt=" " width="800" height="884"></a><br> Most online personality quizzes send answers to a server. I wanted to see<br> whether the entire experience could run locally in the browser.</p> <h2> What I built </h2> <p>Soul Color Test offers a 7-question quick mode and a 16-question deep mode.<br> Answers are mapped to four reflective dimensions: depth, clarity, connection,<br> and momentum.</p> <h2> Technical decisions </h2> <ul> <li>Next.js and TypeScript</li> <li>Static export deployed on Cloudflare Pages</li> <li>Scoring runs entirely in the browser</li> <li>Progress is stored locally</li> <li>No account or report-generation API</li> <li>Static result pages for sharing and search discovery</li> </ul> <h2> Try it </h2> <p><a href="https://soulcolortest.online/?utm_source=devto&amp;utm_medium=referral&amp;utm_campaign=soul_color_launch" rel="noopener noreferrer">Try Soul Color Test</a></p> <p>The result is designed for entertainment and self-reflection, not diagnosis.</p> <h2> What I learned </h2> <p>The difficult part was not calculating a color. It was making the result<br> specific enough to feel useful without presenting it as scientific certainty.</p> <p>I would especially welcome feedback on the quiz flow, result clarity, and<br> mobile experience.</p> webdev nextjs typescript showdev Joan Jiao Tue, 01 Sep 2026 15:16:31 +0000 https://dev.to/joan_jiao_f2fb9ec9969946f/i-built-a-cinematic-voice-over-practice-game-for-actors-and-creators-2c2d https://dev.to/joan_jiao_f2fb9ec9969946f/i-built-a-cinematic-voice-over-practice-game-for-actors-and-creators-2c2d <p>I recently launched Voice the Line, a browser-based voice-over practice game.</p> <p>The idea is simple: choose a cinematic scene, step into a character's role, and read the lines out loud.</p> <p>Voice-over practice can often feel repetitive. I wanted to create something more immersive, where users can practice timing, emotion, pacing, and character delivery through short dramatic scenes.</p> <p>The current version includes eight original scenes:</p> <ul> <li>Last Train Home</li> <li>Rainy Confession</li> <li>The Big Pitch</li> <li>Planet Nine</li> <li>Between Floors</li> <li>The Last Signal</li> <li>Magic Mistake</li> <li>Rooftop After Hours</li> </ul> <p>Everything runs directly in the browser. No account or installation is required.</p> <p>You can try it here:</p> <p><a href="https://voicetheline.live/" rel="noopener noreferrer">Play Voice the Line</a></p> <p>I am continuing to improve the game and plan to add more scenes with different moods, genres, and character types.</p> webdev gamedev indiegame productivity