The latest articles on DEV Community by Md.Tawhed Islam Taieab (@tawhed08). https://dev.to/tawhed08 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%2F4159243%2Ff0795cb4-d987-4b7b-9e38-81fc25dedc47.jpeg https://dev.to/tawhed08 en Md.Tawhed Islam Taieab Sat, 03 Oct 2026 10:21:34 +0000 https://dev.to/tawhed08/i-built-a-spider-themed-world-clock-with-nextjs-4dn7 https://dev.to/tawhed08/i-built-a-spider-themed-world-clock-with-nextjs-4dn7 <h1> 🕷️ I Built a Spider-Themed World Clock with Next.js </h1> <p>Hey DEV community! 👋</p> <p>I’m Tawhed Islam, a Full-Stack Developer, and this is my first post on DEV.to.</p> <p>Recently, I built a <strong>Spider-Themed World Clock</strong> using Next.js and TypeScript. I wanted to create something different from a traditional clock while also practicing real-world frontend development.</p> <h2> 🕷️ What is Spider Clock? </h2> <p>Spider Clock is a modern world clock that lets you view the current time in different cities and time zones through a spider-inspired interface.</p> <p>The goal was simple:</p> <p><strong>Make a useful clock, but make it fun and visually interesting.</strong></p> <h2> ⚙️ Tech Stack </h2> <ul> <li>⚛️ Next.js</li> <li>📘 TypeScript</li> <li>🎨 Tailwind CSS</li> <li>🟢 React</li> <li>🌍 JavaScript Time Zone APIs</li> </ul> <h2> ✨ Features </h2> <ul> <li>🌍 Multiple world time zones</li> <li>🕐 Real-time clock</li> <li>⏰ Alarm functionality</li> <li>🎨 Theme controls</li> <li>🖥️ Fullscreen mode</li> <li>📱 Responsive design</li> <li>🕷️ Spider-inspired UI</li> </ul> <h2> 🧠 What I Learned </h2> <p>While building this project, I practiced several things that are important for real-world development:</p> <ul> <li>Managing React state</li> <li>Working with time zones</li> <li>Creating reusable components</li> <li>Building responsive interfaces</li> <li>Working with TypeScript</li> <li>Structuring a Next.js project</li> <li>Improving UI/UX through iteration</li> </ul> <p>The biggest lesson was that even a simple idea can become a great learning project when you build it from scratch.</p> <h2> 🚀 Live Demo </h2> <p>You can try the project here:</p> <p><strong><a href="https://spider-clock-lac.vercel.app/" rel="noopener noreferrer">🕷️ Spider Clock — Live Demo</a></strong></p> <h2> 💻 Source Code </h2> <p>The complete source code is available on GitHub:</p> <p><strong><a href="https://github.com/tawhed08/spider-clock" rel="noopener noreferrer">GitHub — tawhed08/spider-clock</a></strong></p> <h2> 📸 Project Preview </h2> <p><em>Add your Spider Clock screenshot here.</em></p> <p>I’m planning to keep building more projects, learning new technologies, and sharing what I learn along the way.</p> <p>This is just the beginning. 🚀</p> <p>What do you think of the Spider Clock concept?</p> <h1> webdev #nextjs #react #typescript #tailwindcss #javascript #frontend </h1> <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%2Fcctvpxqvldppey92b6es.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%2Fcctvpxqvldppey92b6es.png" alt=" " width="800" height="395"></a><br> <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%2Fwtq3ffutbqyxbfjqpkxm.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%2Fwtq3ffutbqyxbfjqpkxm.png" alt=" " width="800" height="395"></a><br> <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%2Fabha7rw5qjvjmrd8tdt7.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%2Fabha7rw5qjvjmrd8tdt7.png" alt=" " width="800" height="390"></a></p> nextjs react showdev typescript