Chapter 1

Liberal arts / business student project

A starter project suitable for beginners, using visual tools and AI assistance to quickly complete personal projects and experience the charm and efficiency of AI programming.

Project 1: Personal blog website

Project Overview

1
Project goals: Create a beautiful personal blog website that displays articles and supports search and categorization
2
Tool stack: v0 (UI generation) + Cursor (feature completion) + Vercel (deployment)
3
Time estimate: 4-6 hours (including learning and debugging time)
4
Difficulty level: Beginner level (for users with no prior experience)

Technology selection analysis: why choose this tool combination?

v0: a revolutionary tool for UI generation

  • • Natural language to UI: Simply describing it in text can generate React components, allowing even beginners to get started quickly
  • • Instant preview: see generated results in real time and iterate on the design quickly
  • • Figma integration: Can directly generate code from Figma design files, designer-friendly
  • • Low learning curve: No need to learn HTML/CSS, focus on content expression

Cursor: AI-assisted feature enhancement

  • • Code understanding：AI can understand the code structure generated by v0, making later modifications easier
  • • Feature expansion: Add search, categorization, comments, and other features, and use AI to assist in generating code
  • • Bug fixes: If you encounter a problem, ask AI directly and solve it quickly
  • • Code optimization: AI can optimize code performance and add best practices

Vercel: zero-configuration deployment

  • • One-click deployment: Connect to a GitHub repository, deploy automatically, no server configuration required
  • • Free tier: free to use for personal projects, suitable for learning
  • • Global CDN: Automatically optimize access speed for a better user experience
  • • Preview environment: each commit has a preview link, which is convenient for testing

Tool synergy: v0 is responsible for quickly generating the UI, Cursor is responsible for completing and optimizing functionality, and Vercel is responsible for deployment and hosting. This combination allows even beginners to complete a full Web project in just a few hours and experience the complete process from idea to launch.

Detailed steps

Step 1: Use v0 to generate the blog homepage (30-45 minutes)

1. Visit v0.dev, register/log in to your account

2. In the input field, describe your blog homepage requirements:

"Create a modern-style personal blog homepage, including:
- Top navigation bar (Home, About, Articles)
- Hero section (headline, intro, CTA buttons)
- Latest articles list (card layout, showing title, summary, date)
- Footer (social media links, copyright information)
Use a dark theme, color scheme: dark blue + white + gold"

3. v0 generates multiple design options; choose the version you like

4. Click "Export" to export the code locally

Step 2: Use Cursor to refine features and styles (2-3 hours)

1. Open the exported project in Cursor

2. Use Cursor Agent mode and tell the AI what you need:

"Please add the following features:
- Article detail page (click from the list to enter)
- Article categorization feature (technology, life, thoughts)
- Search function (search article titles and content)
- Responsive design (mobile-friendly)"

3. Cursor generates code, and you can preview the results in real time

4. Continue optimizing and adjusting based on the preview results

5. Add Markdown support to make article content richer

Step 3: Configure Vercel deployment (15-30 minutes)

1. Create a new repository on GitHub and push the code

2. Visit vercel.com and sign in with your GitHub account

3. Click "New Project" and select your repository

4. Vercel will automatically detect the project type (Next.js), click "Deploy"

5. Wait for deployment to complete (usually 1-2 minutes)

6. Get your blog URL and share it with friends!

Step 4: Add content management features (1-2 hours)

1. Use Cursor to add article management functionality:

"Create a simple article management system:
- Article data is stored in a JSON file
- Supports adding, editing, and deleting articles
- Article includes: title, content, category, date, cover image"

2. Or integrate a CMS service (such as Contentful, Sanity)

3. Add image upload functionality (using Cloudinary or Vercel Blob)

Key code examples

Article list component (optimized after v0 generation)

// app/blog/page.tsx
import { articles } from '@/data/articles'

export default function BlogPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">My Blog</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article) => (
          <article key={article.id} className="border rounded-lg p-6 hover:shadow-lg transition">
            <h2 className="text-xl font-semibold mb-2">{article.title}</h2>
            <p className="text-muted-foreground mb-4">{article.excerpt}</p>
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">{article.date}</span>
              <span className="text-sm bg-primary/10 text-primary px-2 py-1 rounded">
                {article.category}
              </span>
            </div>
          </article>
        ))}
      </div>
    </div>
  )
}

Common issues and solutions

Problem 1: The code generated by v0 cannot run

Solution: check the Node.js version (18+ required), run npm install Install dependencies, check terminal error messages, and use Cursor AI to help fix them.

Problem 2: Styles are not displayed correctly

Solution: Make sure the Tailwind CSS configuration is correct, and check tailwind.config.js Use the file and ask AI in Cursor how to fix the style issue.

Issue 3: Vercel deployment failed

Solution: check the build logs. Common causes include: environment variables not configured, dependency version conflicts, incorrect build commands. In Cursor, ask AI how to fix the specific build error.

Problem 4: Difficult to update article content

Solution: Consider using a Headless CMS (such as Contentful, Sanity), or use GitHub as content storage and update articles through Git commits.

Project checklist

Blog homepage design completed, including navigation, hero section, and article list
The article detail page is working properly, and you can click to view the article
Implemented article categorization, allowing filtering by category
The search function works properly and can search article titles and content
Responsive design is complete, and mobile display is working properly
The website has been deployed to Vercel and is accessible normally
Add at least 3 sample articles, with complete content
The code has been committed to GitHub, including the README documentation

Project 2: Data analysis dashboard

Project Overview

1
Project goals: Create a data analytics dashboard that visualizes business data and supports multidimensional analysis
2
Tool stack: Fabric (data processing) + Cursor (visualization components)
3
Time estimate: 6-8 hours (including data preparation and visualization design)
4
Difficulty level: Beginner to intermediate (requires basic data comprehension skills)

Technology selection analysis: why choose Fabric + Cursor?

Fabric: AI-driven data processing

  • • Natural language processing: Describe data processing requirements in text, and AI automatically generates the processing logic
  • • Patterns system: Use predefined data-processing patterns to quickly complete common tasks
  • • Multi-format support: Supports multiple data formats such as CSV, JSON, Excel
  • • Data cleansing: Automatically identify and handle missing values and outliers
  • • Statistical analysis: Quickly generate descriptive statistics, correlation analysis, etc.

Cursor: visual component development

  • • Component generation: AI-assisted generation of chart components, integrating libraries such as Recharts and Chart.js
  • • Interaction design: Add interactive features such as filtering, sorting, and drilling down
  • • Responsive layout: Automatically adapts to different screen sizes
  • • Performance optimization: AI helps optimize rendering performance for large data volumes

Tool synergy: Fabric is responsible for data cleaning, transformation, and analysis, while Cursor is responsible for visualizing the analysis results. This combination allows users without a technical background to quickly create professional data analytics dashboards, focusing on business insights rather than technical implementation.

Detailed steps

Step 1: Use Fabric to organize and analyze data (2-3 hours)

1. Prepare the data file (CSV or Excel format)

2. Use Fabric's Patterns to process data:

"Use Fabric's analyze Pattern to analyze sales data:
- Calculate monthly sales trends
- Aggregate sales by product category
- Identify the customer with the highest sales
- Analyze the effectiveness of sales channels"

3. Fabric generates analysis results and visualization suggestions

4. Export the processed data (JSON format)

Step 2: Use Cursor to create visual components (3-4 hours)

1. Create a Next.js project in Cursor

2. Install the chart library:npm install recharts

3. Use Cursor Agent to generate dashboard components:

"Create a data analytics dashboard that includes:
- Top KPI cards (total sales, growth rate, number of orders)
- Sales trend line chart (by month)
- Product category pie chart
- Customer ranking bar chart
- Sales channel comparison chart
Use a dark theme, support date range filtering"

4. Cursor generates complete component code

5. Adjust styles and layout according to the preview

Step 3: Integrate the chart library and optimize (1-2 hours)

1. Use Recharts to create various chart types

2. Add interactive features:

  • • Hover over the chart to display detailed data
  • • Click chart elements to filter
  • • Date range picker
  • • Data export feature

3. Optimize rendering performance for large data volumes (use virtual scrolling)

4. Add loading states and error handling

Step 4: Add interactive features (1 hour)

1. Add filter components (date, category, channel)

2. Implement data linkage (filter one chart, and the other charts update synchronously)

3. Add data drill-down functionality (click to view detailed data)

4. Add data export functionality (export as CSV or PDF)

Common issues and solutions

Issue 1: incompatible data formats

Solution: Use Fabric's data transformation pattern to convert the data into a standard format. Alternatively, use Cursor to ask AI how to convert the data format.

Issue 2: The chart is not displaying correctly

Solution: Check whether the data format meets the chart library requirements, and use Cursor AI to help debug the chart configuration.

Issue 3: Performance issue (large data volume)

Solution: Use data aggregation to reduce data points, implement virtual scrolling, and use Cursor AI to optimize rendering performance.

Project checklist

The data has been processed and analyzed with Fabric, and the results are accurate
The dashboard includes at least 4 different chart types
KPI cards display key metrics, with data updated in real time
The filter function works properly and can filter by date, category, and more
Chart interactions work properly, and hover and click functions work properly
Responsive design is complete, and mobile display is working properly
Performance optimization is complete, and even large amounts of data display smoothly

Learning outcomes

After completing this chapter, you will:

  • 1Master the basics of v0, Cursor, and Vercel, and be able to independently complete simple Web projects
  • 2Understand the workflow of UI generation tools and know how to describe requirements in natural language
  • 3Master Fabric’s data processing capabilities and use AI to assist with data analysis
  • 4Understand the synergy of tool combinations and know how to choose the right combination of tools
  • 5Has the ability to solve problems independently and can use AI tools to quickly locate and fix issues
Previous chapter: overview of the practice sectionNext chapter: projects for science and engineering students