Using v0.dev to Clone a Website and Deploy

This article records the complete process of using v0.dev to clone a Harry Potter themed website, from discovering the target website to final deployment.

Tool Selection

In April, I subscribed to Lenny’s Newsletter with an educational discount. Among all the products, the most popular was Cursor, followed by Lovable and v0. I had already been using Cursor for a month at that time, helping me write quite a bit of work code. Although Lovable has a nice name, I trust Vercel’s products more, especially since it can be deployed with one click. So I sold Lovable on a second-hand platform and kept v0 to experience slowly. This is also my first project developed with v0.

Discovering the Target Website

I’m a huge Harry Potter fan. Before Amazon exited China, I bought the complete set of official e-books in the Kindle store. While browsing Github, I accidentally discovered this project: https://harrypotterhousequiz.pro/ and was immediately attracted to it. Whether it was the magic wand cursor or the overall theme and functionality, everything gave me the impulse to replicate it with v0.

What is v0.dev

v0.dev is an AI-based frontend development tool launched by Vercel that can quickly generate React components and pages based on descriptions or screenshots. Its biggest advantage is seamless integration with the Vercel deployment platform, enabling a one-stop experience from development to deployment.

Detailed Implementation Process

Step 1: Let AI Analyze the Target Website

I asked v0 not to rush into writing code, but to analyze based on my requirements first. v0 wrote a lot of analysis according to my requirements.

Step 2: Build Base Code and Deploy

After the analysis looked good, I asked it to build code based on the analysis. After completion, I clicked the Deploy button, and it deployed to Vercel for me. The address is: https://harrypotter-test.vercel.app/, so I could view the deployed website in real-time.

Step 3: Continue Optimizing with Reference to Target Website

With the basic framework in place, I asked it to continue adjusting with reference to the target website.

Step 4: Bind Github for Version Management

At the time, for easy rollback, I still bound it to Github.

Problems Encountered and Solutions

Of course, v0 sometimes can’t achieve the effect you want. For example, the magic wand cursor effect - at first it only gave me a small dot. After many debugging attempts with v0 (including multiple rollbacks), I got the current effect, though there’s still some difference from the target website.

If you need to reference sub-pages, you need to send the sub-page links to v0.

Integrating AI Functionality

The Sorting Hat Q&A needs to integrate AI-related APIs. I chose Google’s Gemini (because it’s free), which makes the responses more intelligent.

Custom Domain Configuration

After successful deployment, you can access it using a vercel.app subdomain, but I wanted to try binding a custom domain. I bought the domain https://www.harrypotter.cc/ on Namesilo (after much deliberation, I bought this relatively cheap and memorable one).

Adding Domain in Vercel

On the Vercel management page, find this project, click Add Domain, enter your domain, and it will generate two NameServers.

Configuring DNS at Domain Provider

Copy these two records to the Namesilo configuration page for this domain.

Project Features

1. Magic Wand Cursor Effect: Mouse movement creates a magic wand visual effect
2. Sorting Hat Test: Integrated AI Q&A functionality that assigns houses based on user answers
3. Responsive Design: Adapts to different device screens
4. Theme Consistency: Complete restoration of Harry Potter visual style

Tech Stack

• Frontend Framework: React + Next.js
• Styling: Tailwind CSS
• AI Service: Google Gemini API
• Deployment Platform: Vercel
• Version Control: Github

Summary and Reflection

In summary, although v0’s replication didn’t reach 100%, it’s basically very similar, and for someone like me who doesn’t know frontend, I’m already very satisfied. Plus it only took me half an afternoon in total. After becoming more familiar, building websites will be even faster.

Advantages

• Easy to Start: No need for deep frontend knowledge
• Extremely Efficient: Complete from development to deployment in half a day
• One-stop Experience: Seamless connection from code generation to deployment
• Version Management: Supports rollback and version control

Limitations

• Limited Detail Control: Some effects aren’t precise enough
• Depends on AI Understanding: Requires multiple debugging attempts to achieve expected results
• Customization Degree: Complex interactions may require manual intervention

Through this practice, I deeply felt the huge potential of AI tools in frontend development. For non-professional developers, v0.dev is indeed an excellent choice that allows ideas to quickly become reality.

Final Project Address: https://www.harrypotter.cc/