DEV Community

unisho kan
unisho kan

Posted on

3 Projects I Built to Learn Web Development (with Next.js)

#nextjs #website #seo

3 Projects I Built to Learn Web Development (with Next.js)

Hi Devs! I'm currently diving into web development, and over the past few weeks, I’ve built a few projects using Next.js and Tailwind CSS to improve my frontend skills.

Here are three small but meaningful projects I created, each with a unique theme and purpose. Feel free to explore them, give feedback, or even get inspired for your own builds!

🎮 1. Crazy Cattle 3D – Embedding a Unity Game in a Web Page

🔗 Visit site

Crazy Cattle

This was my experiment in embedding external 3D games made with Unity into a responsive and SEO-optimized website using an iframe.

🔧 Tech Stack

  • Next.js (App Router)
  • Tailwind CSS
  • Netlify deployment
  • OGP & SEO metadata configuration

It was a great way to learn about responsive containers, iframe handling, and structured metadata for better sharing.

📖 2. Bible for U – A Spiritual Daily Verse & Answer Generator

🔗 Visit site

Bible for U

This project focuses on spiritual content. Users receive a new Bible verse every day and can even ask a question to receive a random "answer" from scripture.

✨ Features

  • Random daily Bible verse (EN + CN)
  • “Book of Answers” feature: ask a question and receive a verse
  • Daily mini stories from the Bible
  • Holy-themed, calm design
  • Fully mobile responsive

This was a fun way to learn random data generation, basic logic handling, and i18n with next-intl.

🧠 3. Brain Games Quest – Mini Reaction & Memory Games

🔗 Visit site

Brain Games Quest

A personal favorite — this site hosts 5 simple browser games that test reflexes, memory, and attention. It's all in the name of learning React state logic and game loops.

🎮 Games Included:

  • Color Reaction Test
  • F1 Launch Reaction
  • Hold & Release Click Test
  • Whac-A-Mole with custom emoji/mode
  • Schulte Grid visual search test

🛠️ Tech Stack

  • Next.js (App Router)
  • Tailwind CSS
  • Language toggle (EN/JP)
  • Deployed to Netlify
  • Custom score handling, speed levels, and themes

🧵 Why I’m Sharing These

I hope this post inspires others learning web dev to just start building. These don’t need to be perfect — they’re proof that shipping projects beats waiting for mastery.

If you found any of these interesting, feel free to:

  • Leave a comment 💬
  • Share your thoughts 🙌
  • Fork the ideas and build your own version!

Thanks for reading 🙏

Follow me for more beginner-friendly web dev ideas, and let’s grow together 🚀

Top comments (0)