deploy with v0.dev

I am recently attending hackathon at Harvard. I was doing a project on personal assistant called moodeng, in the process I was trying to use AI tools as much as possible.

I started trying cursor but haven't get chance to delve deep.

I used a lot of v0.dev since I suck at front end, and this really took me a while to debug and deploy. The tool itself is powerful but it require you to read the correct reources and fix some subtle bug: - Don't ask ChatGPT. Their knowledge is too old. I tried doing this for several days but it won't work. Yet O1 somehow indeed provided some useful guidence.

If you have no clue where to go. You never deployed any react app, then I suggest you to ask GPT cuz it caters every level of developer. Yet if you have some general idea of Javascript and have a touch on react app before, I recommend you to read those:

• docs
• shadcn: installation
• shadcn: cli
• shadcn: toast

Also, remember sometimes v0 generate the code like

import { useState } from 'react'
import { format, addDays, isSameDay, parseISO } from 'date-fns'
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { toast } from "@/components/ui/use-toast"

For the code like these, you need to do the

npx shadcn@latest add scroll-area  use-toast

and

npx shadcn@latest add toast

Don't trust ChatGPT's suggest for doing npx shadcn-ui@latest init!!

After that, you need to change the line

import { toast } from "@/components/ui/use-toast"

to

import { toast } from "@/hooks/use-toast";
import { Toaster } from "@/components/ui/toaster";