I built a fullscreen text tool with Next.js for signs, events, and quick display use cases

typescript dev.to

I built a fullscreen text tool with Next.js for signs, events, and quick display use cases

I recently built a small web utility called Fullscreen Text:

https://full-screen.app

The idea is simple: sometimes you just want to type a short message and make it fullscreen immediately on a phone, tablet, or laptop.

No account, no setup, no complicated controls. Just type and show.

Why I built it

This started from a very practical problem.

There are lots of moments where you need to display a short piece of text quickly:

  • a temporary sign at an event
  • a cheering message at a concert
  • a meeting or classroom instruction
  • a livestream prompt like “5 min break”
  • a quick message on a secondary screen

Most existing solutions I found felt either too old, too cluttered, or too slow to use on mobile.

So I wanted to build something that felt:

  • fast
  • obvious
  • lightweight
  • readable from a distance

What the current version does

The current MVP focuses on one thing only: fullscreen text display.

You can:

  • type a short message
  • choose a display style
  • open it instantly in fullscreen
  • use custom text and background colors
  • use it on both mobile and desktop

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.

Tech stack

I built it with:

  • Next.js
  • TypeScript
  • Tailwind CSS
  • App Router

The product is intentionally frontend-first and lightweight.

For the newsletter / waitlist, I used Buttondown instead of building a custom backend. For a small MVP, that felt like the right tradeoff.

A few implementation details

A few things were more interesting than they looked at first:

1. Fullscreen behavior

The goal was to let users go fullscreen as directly as possible.

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.

2. Text sizing

One of the hardest parts of a tool like this is not the fullscreen API itself — it’s making the text feel visually right.

Short text should feel bold and huge.
Longer text still needs to remain readable.

I ended up using a simple text-length-based sizing strategy, which works well enough for an MVP and keeps the implementation maintainable.

3. Presets and customization

I added a small set of display presets and also a custom color option.

That gives users enough flexibility for practical use without turning the app into a complicated design tool.

4. SEO for a utility page

I wanted the homepage to be both:

  • the tool itself
  • the main search landing page

That meant paying attention to:

  • title
  • description
  • canonical
  • robots
  • sitemap
  • simple on-page content structure

For a utility site, I think this “tool page + landing page in one” approach makes more sense than splitting everything too early.

Design choices

A lot of the design work was about subtraction, not addition.

I intentionally removed or avoided things like:

  • login
  • dashboards
  • too many controls
  • over-explaining the interface
  • complex page sections that distract from the main action

The main goal is still very straightforward:

type text -> show it fullscreen

What I learned

A few takeaways from building this MVP:

  • very small tools can still benefit from strong UX polish
  • utility sites should be extremely clear about their single main action
  • “simple” products often take more iteration than expected
  • lightweight SEO fundamentals matter even for tiny tools

It’s live

You can try it here:

https://full-screen.app

If you do, I’d really love feedback on questions like:

  • What real-world use case would you use this for?
  • Does the current fullscreen flow feel natural?
  • Are the presets useful enough?
  • What’s the one feature you’d add next?

Thanks for reading.

Source: dev.to

arrow_back Back to Tutorials