This article documents my experience exploring V0 AI, a powerful AI-powered code assistant & web development tool. V0 offers a seamless development experience, allowing me to create a flashcard application from scratch using Next.js, styled with Tailwind CSS.

Through this journey, I tested various features including basic app creation, project file management, import/export functionality, and UI enhancements. The documentation covers both the successes and challenges encountered while building with V0, providing insights into its capabilities, limitations, and overall development experience.

[Photo by Philip Oroni at Unsplash]

Getting Started

Getting started with V0 was totally frictionless. No sign up required. Just dive right into the welcoming screen.

Building the app

💬 Prompt: Create a Next.js app named “Cue Notes” with a pastel green color theme. The app will allow the user to add question-and-answer pairs. The app will display the question-and-answer pairs in the form of flashcards.

💭 V0 Response:

I’ll create a Next.js app named “Cue Notes” with a pastel green color theme that allows users to add question and answer pairs and display them as flashcards. Here’s the implementation:

This implementation creates a Next.js app named “Cue Notes” with the following features:

1. A pastel green color theme using Tailwind CSS.
2. A form to add question and answer pairs.
3. A flashcard component that displays the questions and answers.
4. Functionality to navigate between flashcards and toggle between questions and answers.

The app uses client-side state management with React hooks to handle the flashcards and user interactions. The pastel green theme is implemented using Tailwind CSS classes and custom CSS variables.

To use this app:

1. Users can add new flashcards by entering a question and an answer in the form and clicking “Add Flashcard”.
2. Once flashcards are added, they will appear in a card below the form.
3. Users can navigate between flashcards using the “Previous” and “Next” buttons.
4. The “Show Answer” / “Show Question” button toggles between the question and answer for each flashcard.

This implementation provides a simple and intuitive interface for creating and studying flashcards with a pleasant pastel green color scheme.

🎯 Output Result:

V0 created a fully functional app with a green theme, and with features to add questions & answers, a screen to display the question/answer pair in a flashcard format, and navigation to view the next question/answer pair.

The code generated by V0 is functional, but it is laid out into a simple structure. It also did not create any build files for the project.

The code view shows the files tree:

🫴🏼 Takeaway: Using a simple prompt, V0 generated code to create a fully functional app that add a screen to add question/answer pairs, a screen to view the question/answer pairs, and navigation to scroll through them.

Let’s try and see if we can refactor the code to add some necessary project files.

Feature: Add project files

💬 Prompt: Add files to build and run the project. The project should include “package.json”, “tailwind.config.ts”, “tsconfig.json”, “postcss.config.js”, “next.config.js”, “components.json”, “next-env.d.ts” and a “README.md” files.

💭 V0 Response:

I’ll add the necessary files to build and run the project. I’ll create these files with the appropriate configurations for our “Cue Notes” project.

I’ve created all the necessary files to build and run the “Cue Notes” project. Here’s a summary of what each file does:

1. package.json: Defines the project dependencies and scripts.
2. tailwind.config.ts: Configures Tailwind CSS, including custom color definitions for our pastel green theme.
3. tsconfig.json: Configures TypeScript compiler options.
4. postcss.config.js: Configures PostCSS for processing CSS.
5. next.config.js: Configures Next.js (currently empty, but can be used for custom Next.js configurations).
6. components.json: Configures shadcn/ui components.
7. next-env.d.ts: Type definitions for Next.js.
8. README.md: Provides information about the project, how to run it, and its structure.

These files, along with the previously created app/layout.tsx, app/page.tsx, and app/globals.css, form a complete Next.js project structure. You can now build and run the project using the following commands:

1. Install dependencies: npm install
2. Run the development server: npm run dev

The project should now be accessible at http://localhost:3000.

🎯 Output Result:

The Code tab shows the files tree:

✅ The Preview tab shows the fully functioning app, but I lost the question/answer pairs that I added earlier. We will implement the persistence layer later.

🫴🏼 Takeaway:

• V0 can take and understand clear instructions and act on it. It gave clear explanations of the work done.
• It does not stray from the given instructions.
• AI code assistants suggesting features is useful, but I like that I have control over how I want to proceed.

Signing up

👉🏼 At this point, I was out of free messages and V0 required me to sign up.

So I did! Signing up with V0 using Github was quick and easy.

After I signed up, I saw that I can now deploy my code.

Continuing with our mission to explore V0, let’s ask V0 to suggest some new features for the app.

Feature: Suggest new features

💬 Prompt: Suggest some new features to enhance the app.

💭 V0 Response:

I’d be happy to suggest some new features to enhance the Cue Notes app. Let me think about some improvements that could make the app more useful and engaging for users.

Here are some new features to enhance the Cue Notes app:

1. Categories for Flashcards: Allow users to create categories or tags for their flashcards. This will help organize the cards and enable users to study specific topics.
2. Study Sessions: Implement a study mode where users can go through a set of flashcards, mark ones they got right or wrong, and see their progress.
3. Spaced Repetition: Incorporate a spaced repetition algorithm to help users review cards at optimal intervals for better retention.
4. Import/Export Functionality: Allow users to import and export their flashcards in common formats like CSV or JSON. This will enable backing up and sharing of card sets.
5. Rich Text Formatting: Enhance the question and answer inputs to support rich text formatting, allowing users to add emphasis, lists, or even simple diagrams to their cards.
6. Search Functionality: Add a search bar to help users quickly find specific cards or topics within their collection.
7. Progress Tracking: Implement a dashboard that shows statistics on study sessions, correctly answered cards, and overall progress.
8. Dark Mode: Add a toggle for dark mode, which could use a darker shade of the pastel green theme for users who prefer studying at night.
9. Mobile Responsiveness: Ensure the app is fully responsive and works well on mobile devices, possibly implementing swipe gestures for card navigation.
10. Audio Support: Allow users to add audio recordings to their flashcards, which can be especially useful for language learning.
11. Collaborative Decks: Implement a feature where users can share decks with others or collaborate on creating flashcard sets.
12. Gamification Elements: Add points, streaks, or achievements to motivate users to study regularly.

Would you like me to elaborate on any of these features or start implementing one of them?

🎯 Output Result:

Very interesting list!

🫴🏼 Takeaway: With control over what is generated by V0, you can always come back and ask V0 to suggest new features and have it implemented for us.

Let’s take up V0 on that task and ask it to implement the import/export functionality.

Feature: Import/Export data

💬 Prompt: Implement the Import/Export Functionality: Allow users to import and export their flashcards in common formats like CSV or JSON. This will enable backing up and sharing of card sets. Refactor the code to add components into separate files under a “components” folder.

💭 V0 Response:

I’ll implement the Import/Export functionality and refactor the code to add components into separate files under a “components” folder. Let’s start by making these changes.

These changes implement the Import/Export functionality and refactor the code to add components into separate files under a “components” folder. Here’s a summary of the changes:

1. Created a Flashcard component in components/Flashcard.tsx.
2. Created a FlashcardForm component in components/FlashcardForm.tsx.
3. Updated app/page.tsx to use the new components and implement import/export functionality.
4. The import functionality allows users to upload a JSON file containing flashcards.
5. The export functionality allows users to download their flashcards as a JSON file.

The app now has a more modular structure, making it easier to maintain and extend. Users can now import and export their flashcards, enabling them to backup their data or share card sets with others.

To use the import/export functionality:

• Click the “Export Flashcards” button to download the current set of flashcards as a JSON file.
• Click the “Import Flashcards” button to upload a previously exported JSON file of flashcards.

The app maintains its pastel green color theme and responsive design. If you want to make any further enhancements or have any questions about the implementation, please let me know!

🎯 Output Result:

✅ The Export functionality works as expected. And, it creates a new flashcards.json file with the existing data in it.

❌ But, I noticed that the Import functionality does not work as expected.

🫴🏼 Takeaway:

• It understood the two part instruction. It refactored the code to separate out the components into a separate folder, and then implemented the new feature as instructed
• The import functionality was broken

Fixing errors

💬 Prompt: The import functionality is not working as expected.

💭 V0 Response:

Let’s investigate and fix the import functionality. I’ll review the code and make the necessary adjustments to ensure it works correctly.

Let’s fix the import functionality in the app/page.tsx file. We’ll make sure the file input is properly handled and the state is updated correctly.

These changes should fix the import functionality and improve the overall user experience. Here’s a summary of the modifications:

1. In the importFlashcards function:
2. We now validate that the imported data is an array of objects with ‘question’ and ‘answer’ properties.
3. We set the current card to 0 after importing to ensure the user starts from the beginning of the imported set.
4. We added an alert to inform the user about the successful import and the number of imported flashcards.
5. The file input now resets after each import, allowing users to import the same file multiple times if needed.
6. In the FlashcardForm component, we now trim the question and answer inputs and only add the flashcard if both fields are non-empty after trimming.

These improvements should make the import functionality work as expected and provide a better user experience when adding new flashcards.

To test the import functionality:

1. Create some flashcards using the form.
2. Export the flashcards using the “Export Flashcards” button.
3. Clear all flashcards by refreshing the page.
4. Use the “Import Flashcards” button to upload the previously exported JSON file.
5. You should see an alert confirming the successful import, and the flashcards should be loaded into the app.

If you encounter any issues or would like further improvements, please let me know, and I’ll be happy to help!

🎯 Output Result:

❌ The Import functionality still does not work as expected. The app does not show a file dialog to select a file to import.

Let’s see if V0 can fix it.

💬 Prompt: The Import Flashcards button when pressed does not allow a way to select a file.

💭 V0 Response:

Let’s fix this issue with the Import Flashcards button. I’ll modify the code to ensure that clicking the button allows the user to select a file.

Let’s modify the app/page.tsx file to fix this issue:

🎯 Output Result:

✅ And, finally the Import Flashcards button displayed a file dialog to let me select the previously exported JSON file. And, the import worked flawlessly. I could see the question/answer pairs imported and displayed in the app.

🫴🏼 Takeaway:

• V0 will understand and correct errors, but the prompt has to be very specific and clear as to what the issue is.
• V0 does have commits for versions of the code, so you can revert back to that version of the code.
• V0 also allows you to run the code at a certain commit version.
• V0 allows you to move between commit versions using the Previous & Next buttons in the toolbar.
• If you choose to be at a different commit version from the latest, V0 shows the diff of the code changes using the diff button on the toolbar.
• V0 also allows you to Restore the code at a particular commit version.

Feature: Create tooltips

💬 Prompt: It is not clear how to use the import/export functionality. Create tooltips with help instructions for the “Export Flashcards” and the “Import Flashcards” buttons.

💭 V0 Response:

I’ll add tooltips with help instructions for the “Export Flashcards” and “Import Flashcards” buttons to make their functionality clearer to users. I’ll use the Tooltip component from shadcn/ui to implement this feature.

These changes add tooltips with help instructions for the “Export Flashcards” and “Import Flashcards” buttons. Here’s a summary of the changes:

1. Created a new Tooltip component in components/ui/tooltip.tsx.
2. Updated app/page.tsx to include tooltips for the import and export buttons.
3. Updated app/layout.tsx to wrap the entire application with the TooltipProvider.

The tooltips provide clear instructions on how to use the import/export functionality:

• For the “Export Flashcards” button, the tooltip says: “Click to download your flashcards as a JSON file”
• For the “Import Flashcards” button, the tooltip says: “Click to upload a JSON file of flashcards”

These tooltips will appear when the user hovers over the respective buttons, making it clearer how to use the import/export functionality.

The existing styling and layout have been maintained, and the pastel green color theme is still in place. The tooltips are designed to be unobtrusive but informative, enhancing the user experience without disrupting the app’s clean design.

Is there anything else you’d like me to add or modify in the Cue Notes app?

🎯 Output Result:

❌ I noticed that the tooltip functionality is not working. Hovering over the “Export Flashcards” and “Import Flashcards” buttons do not show the tooltips.

💬 Prompt: The tooltip functionality is not working. Hovering over the “Export Flashcards” and “Import Flashcards” does not show the tooltips.

💭 V0 Response:

Let’s fix the tooltip functionality. I’ll review and update the code to ensure the tooltips appear when hovering over the buttons.

Let’s update the app/page.tsx file to fix the tooltip functionality:

These changes should fix the tooltip functionality. Here’s a summary of the modifications:

1. In app/page.tsx:
2. We’ve ensured that the Tooltip, TooltipContent, TooltipProvider, and TooltipTrigger components are properly imported and used.
3. The TooltipProvider now wraps only the section with the Export and Import buttons.
4. Each button is wrapped with a Tooltip component, which includes a TooltipTrigger and TooltipContent.
5. In app/layout.tsx:
6. We’ve added the TooltipProvider to wrap the entire application, ensuring that tooltips can work throughout the app.

With these changes, the tooltips should now appear when hovering over the “Export Flashcards” and “Import Flashcards” buttons. The tooltips will display the helpful messages we’ve set up earlier.

Is there anything else you’d like me to modify or improve in the Cue Notes app?

🎯 Output Result:

❌ The tooltip functionality is still broken.

❌ Trying to fix the tooltip functionality, broke the previously working Import functionality.

✅ After pointing out the code that worked and asking V0 to implement that version of the code, fixed the Import functionality. In my next set of instructions, I kept instructing V0 to not change the code for the Import functionality to prevent any further regressions.

🫴🏼 Takeaway:

• Fixing errors and issues can be a challenge if you don’t understand the code that is being generated.
• Be careful: Trying to fix errors can introduce regression issues.
• You have to know the code that the code assistant generates and keep correcting, otherwise, there are chances of regression issues.
• Having well-written tests as you implement features is a good way to ensure regression errors don’t creep up on you.

At this point, I ran out of free messages for the day. I feel that the free quota was pretty generous.

Deploying the app

To deploy the app, I performed the following steps:

1. Create a project named Cue Notes
2. Associate the chat Cue Notes App with the Cue Notes project
3. Click the Deploy button on the top-right

When the deployment is completed, you will see the following:

Note: To add a custom domain for your app, you need to upgrade to the Pro plan.

To view the deployed app, visit https://v0-cue-notes-krsq8r.vercel.app

Other V0 Features

V0 has a wide variety of features that it offers. Here are some highlights:

• Has 3 panes: Preview, Code and Console
  • Preview: shows the fully functioning preview of the app that user can interact with
  • Code: shows the code editor with a file tree and code pane
  • Console: shows the console output when the app is running
• Allows to view previous / next versions of code, and restore code to those versions
• Allows users to view a diff of a code file, copy the code and download the code file
• Allows users to add blocks of code to code base and download the code as a zip file
• Allows users to create a project from the chat
• Allows users to fork the code base
• Allows users to share the app via a public link
• Allows users to deploy the app using Vercel

Summary

I really enjoyed working with V0. The free tier with the quota of messages for trying out V0 is very generous and I could create a fully functioning app. The Premium plan is $20/user/month and details are posted on their pricing page.

In summary, we explored the following in the article:

Development Experience

• V0 provides a frictionless experience with no initial signup required, allowing immediate development of web applications
• Successfully created a functional flashcards app with features for adding question/answer pairs, displaying flashcards, and navigating between cards
• Code refactoring and feature additions were straightforward through clear prompts, including implementing import/export functionality and component organization

Technical Features

• V0 offers a three-pane development environment with Preview, Code, and Console views for a comprehensive development experience
• Includes version control features with the ability to view diffs, restore previous versions, and fork codebases
• Supports deployment through Vercel and sharing via public links

Limitations and Considerations

• Error fixing requires careful attention as new fixes can introduce regression issues in previously working functionality
• The free tier provides a generous message quota, with the Premium plan available at $20/user/month

If you have questions or feedback, please let me know in the comments below.