How I Built This?

2025-07-15
A behind-the-scenes look at building vibeteaching.io.
Welcome to the first post on vibeteaching.io! This post explains how the site was built using Next.js, Tailwind CSS, and Vercel hosting.

The Vibe Coding Workflow: VS Code & GitHub Copilot

When I set out to build vibeteaching.io, I wanted to make the process as creative and frictionless as possible. My main tools were Visual Studio Code (VS Code) and GitHub Copilot. Here’s how I used them together to bring the site to life:

1. Setting Up the Project

  1. VS Code: My code editor of choice, with a clean interface and powerful extensions.
  2. Next.js: I started by creating a Next.js app for fast, modern React development.
  3. Tailwind CSS: For styling, I used Tailwind CSS, which let me rapidly prototype and tweak designs.
  4. Vercel: I deployed the site to Vercel for instant previews and easy hosting.

2. Using GitHub Copilot for Vibe Coding

GitHub Copilot was my creative partner throughout the build. Here’s how it helped:

GitHub Copilot was my creative partner throughout the build. Here’s how it helped:

  • Generating Components: I’d describe what I wanted (e.g., a 3D gong animation, a blog layout, a theme switcher) and Copilot would suggest code snippets or even full components. I could then edit and refine these suggestions to match my vision.
  • Solving Problems: Whenever I hit a roadblock—like animating a mesh in Three.js or customizing a CSS class—I’d prompt Copilot for ideas. It often provided solutions or at least a starting point.
  • Speeding Up Repetitive Tasks: For boilerplate code, utility functions, or even Markdown formatting, Copilot saved me hours by auto-completing patterns and filling in gaps.

3. Iterative Development & Creativity

The real magic of vibe coding is the creative loop:
  1. Prompt: I’d write a comment or describe a feature in plain English.
  2. Generate: Copilot would suggest code, sometimes surprisingly creative.
  3. Edit: I’d tweak, refactor, and combine suggestions to fit the site’s style and needs.
  4. Test: Using VS Code’s live server and Vercel previews, I’d instantly see changes and iterate.
This loop made development feel more like a creative jam session than a rigid process.

4. Collaboration & Version Control

VS Code’s built-in Git tools made it easy to commit, branch, and push changes. I could review Copilot’s suggestions, test them locally, and then share updates with the world. Instead of working alone, I felt like I had a collaborator who could brainstorm, debug, and even teach me new tricks.

5. Practical Examples

Here are some practical examples of how Copilot helped:
  1. 3D Gong Animation: I described the animation I wanted, and Copilot helped generate the Three.js code for swinging and vibrating the gong. I refined the math and visuals until it felt right.
  2. Blog System: I asked Copilot for a Markdown-based blog setup, and it suggested file structures, content loaders, and even custom CSS for my blog styles.
  3. Theme Switching: Copilot helped me implement a theme switcher that responds to system dark mode, making the site accessible and visually appealing.

6. Lessons Learned

Some key lessons from vibe coding this project:
  1. Prompting Matters: The more clearly I described what I wanted, the better Copilot’s suggestions became.
  2. Creativity Over Perfection: Vibe coding is about experimenting, learning, and having fun—not just writing perfect code.
  3. Community & Sharing: By using open tools and sharing my process, I hope to inspire others to start their own vibe coding journey.

In summary: Building vibeteaching.io with VS Code and GitHub Copilot was a creative, collaborative, and empowering experience. If you’re curious about coding, try vibe coding—let your ideas flow, use smart tools, and enjoy the process!

Vibe Coders

Published by Dan — thanks for reading.