The latest articles on DEV Community by Xiang Gao (@xiang_gao_f0c4afa395fc88a). https://dev.to/xiang_gao_f0c4afa395fc88a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3871807%2Fc443ae77-0ccc-4af5-937e-04a1044b6438.jpg https://dev.to/xiang_gao_f0c4afa395fc88a en Xiang Gao Fri, 10 Apr 2026 12:56:38 +0000 https://dev.to/xiang_gao_f0c4afa395fc88a/i-built-a-fullscreen-text-tool-with-nextjs-for-signs-events-and-quick-display-use-cases-4ead https://dev.to/xiang_gao_f0c4afa395fc88a/i-built-a-fullscreen-text-tool-with-nextjs-for-signs-events-and-quick-display-use-cases-4ead <h1> I built a fullscreen text tool with Next.js for signs, events, and quick display use cases </h1> <p>I recently built a small web utility called <strong>Fullscreen Text</strong>:</p> <p><a href="https://full-screen.app" rel="noopener noreferrer">https://full-screen.app</a></p> <p>The idea is simple: sometimes you just want to type a short message and make it fullscreen immediately on a phone, tablet, or laptop.</p> <p>No account, no setup, no complicated controls. Just type and show.</p> <h2> Why I built it </h2> <p>This started from a very practical problem.</p> <p>There are lots of moments where you need to display a short piece of text quickly:</p> <ul> <li>a temporary sign at an event</li> <li>a cheering message at a concert</li> <li>a meeting or classroom instruction</li> <li>a livestream prompt like “5 min break”</li> <li>a quick message on a secondary screen</li> </ul> <p>Most existing solutions I found felt either too old, too cluttered, or too slow to use on mobile.</p> <p>So I wanted to build something that felt:</p> <ul> <li>fast</li> <li>obvious</li> <li>lightweight</li> <li>readable from a distance</li> </ul> <h2> What the current version does </h2> <p>The current MVP focuses on one thing only: <strong>fullscreen text display</strong>.</p> <p>You can:</p> <ul> <li>type a short message</li> <li>choose a display style</li> <li>open it instantly in fullscreen</li> <li>use custom text and background colors</li> <li>use it on both mobile and desktop</li> </ul> <p>The homepage is also the main landing page, so I tried to keep the experience simple while still making the page understandable for first-time visitors and search engines.</p> <h2> Tech stack </h2> <p>I built it with:</p> <ul> <li>Next.js</li> <li>TypeScript</li> <li>Tailwind CSS</li> <li>App Router</li> </ul> <p>The product is intentionally frontend-first and lightweight.</p> <p>For the newsletter / waitlist, I used Buttondown instead of building a custom backend. For a small MVP, that felt like the right tradeoff.</p> <h2> A few implementation details </h2> <p>A few things were more interesting than they looked at first:</p> <h3> 1. Fullscreen behavior </h3> <p>The goal was to let users go fullscreen as directly as possible.</p> <p>Instead of forcing people into a separate step-heavy flow, I changed it so the homepage can open a fullscreen overlay directly. That made the main interaction much faster.</p> <h3> 2. Text sizing </h3> <p>One of the hardest parts of a tool like this is not the fullscreen API itself — it’s making the text feel visually right.</p> <p>Short text should feel bold and huge.<br> Longer text still needs to remain readable.</p> <p>I ended up using a simple text-length-based sizing strategy, which works well enough for an MVP and keeps the implementation maintainable.</p> <h3> 3. Presets and customization </h3> <p>I added a small set of display presets and also a custom color option.</p> <p>That gives users enough flexibility for practical use without turning the app into a complicated design tool.</p> <h3> 4. SEO for a utility page </h3> <p>I wanted the homepage to be both:</p> <ul> <li>the tool itself</li> <li>the main search landing page</li> </ul> <p>That meant paying attention to:</p> <ul> <li>title</li> <li>description</li> <li>canonical</li> <li>robots</li> <li>sitemap</li> <li>simple on-page content structure</li> </ul> <p>For a utility site, I think this “tool page + landing page in one” approach makes more sense than splitting everything too early.</p> <h2> Design choices </h2> <p>A lot of the design work was about subtraction, not addition.</p> <p>I intentionally removed or avoided things like:</p> <ul> <li>login</li> <li>dashboards</li> <li>too many controls</li> <li>over-explaining the interface</li> <li>complex page sections that distract from the main action</li> </ul> <p>The main goal is still very straightforward:</p> <p><strong>type text -&gt; show it fullscreen</strong></p> <h2> What I learned </h2> <p>A few takeaways from building this MVP:</p> <ul> <li>very small tools can still benefit from strong UX polish</li> <li>utility sites should be extremely clear about their single main action</li> <li>“simple” products often take more iteration than expected</li> <li>lightweight SEO fundamentals matter even for tiny tools</li> </ul> <h2> It’s live </h2> <p>You can try it here:</p> <p><a href="https://full-screen.app" rel="noopener noreferrer">https://full-screen.app</a></p> <p>If you do, I’d really love feedback on questions like:</p> <ul> <li>What real-world use case would you use this for?</li> <li>Does the current fullscreen flow feel natural?</li> <li>Are the presets useful enough?</li> <li>What’s the one feature you’d add next?</li> </ul> <p>Thanks for reading.</p> webdev typescript indiehackers productivity