-->

⏱️ Estimated Reading Time: 15 minutes

Introduction to Magic Resume

Magic Resume is a modern, open-source AI-powered resume editor that makes creating professional resumes simple and enjoyable. Built with Next.js 14+ and featuring smooth animations powered by Motion, it provides real-time preview, custom themes, and seamless PDF export capabilities.

Whether you’re a job seeker looking to create an impressive resume or a developer interested in building modern web applications, this comprehensive tutorial will guide you through everything you need to know about Magic Resume.

🌟 Key Features

  • 🚀 Modern Tech Stack: Built with Next.js 14+, TypeScript, and Motion
  • 💫 Smooth Animations: Powered by Motion for beautiful transitions
  • 🎨 Custom Themes: Fully customizable appearance and styling
  • 🌙 Dark Mode: Complete dark mode support
  • 📤 PDF Export: High-quality PDF generation
  • 🔄 Real-time Preview: See changes instantly as you type
  • 💾 Auto-save: Never lose your work with automatic saving
  • 🔒 Local Storage: Data stays on your device for privacy

🛠️ Technology Stack

Magic Resume leverages cutting-edge technologies:

  • Next.js 14+: React framework for production
  • TypeScript: Type-safe JavaScript
  • Motion: Animation library for smooth transitions
  • Tiptap: Rich text editor
  • Tailwind CSS: Utility-first CSS framework
  • Zustand: Lightweight state management
  • Shadcn/ui: Modern UI components
  • Lucide Icons: Beautiful icon set

Getting Started

Prerequisites

Before we begin, ensure you have the following installed on your macOS system:

  • Node.js 18+: JavaScript runtime
  • pnpm: Fast, disk space efficient package manager
  • Git: Version control system

Let’s verify your setup:

# Check Node.js version
node --version

# Check pnpm version
pnpm --version

# Check Git version
git --version

Installation and Setup

1. Clone the Repository

# Clone the Magic Resume repository
git clone https://github.com/JOYCEQL/magic-resume.git

# Navigate to the project directory
cd magic-resume

2. Install Dependencies

# Install all required dependencies
pnpm install

3. Start Development Server

# Start the development server
pnpm dev

Your Magic Resume application will be available at http://localhost:3000.

Testing the Installation

Let’s create a simple test script to verify everything works correctly:

#!/bin/bash
# File: test-magic-resume.sh

echo "🧪 Testing Magic Resume Installation..."

# Check if the development server starts
echo "Starting development server..."
timeout 30 pnpm dev &
DEV_PID=$!

# Wait for server to start
sleep 10

# Check if the server is responding
if curl -s http://localhost:3000 > /dev/null; then
    echo "✅ Development server is running successfully!"
else
    echo "❌ Development server failed to start"
    exit 1
fi

# Clean up
kill $DEV_PID
echo "🎉 Magic Resume installation test completed!"

Make the script executable and run it:

chmod +x test-magic-resume.sh
./test-magic-resume.sh

Using Magic Resume

Creating Your First Resume

1. Basic Information Setup

When you first open Magic Resume, you’ll see a clean interface divided into two main sections:

  • Left Panel: Resume editing interface
  • Right Panel: Real-time preview

Start by filling in your basic information:

  1. Personal Details
    • Full name
    • Professional title
    • Contact information
    • Location
  2. Professional Summary
    • Brief overview of your career
    • Key strengths and skills
    • Career objectives

2. Adding Work Experience

The work experience section allows you to showcase your professional background:

**Position**: Senior Software Engineer
**Company**: Tech Innovation Corp
**Duration**: Jan 2022 - Present
**Location**: San Francisco, CA

**Key Responsibilities:**
- Led a team of 5 developers in building scalable web applications
- Implemented CI/CD pipelines reducing deployment time by 60%
- Architected microservices handling 10M+ daily requests

3. Education and Skills

Add your educational background and technical skills:

  • Degrees and Certifications
  • Technical Skills (categorized by proficiency)
  • Languages
  • Achievements and Awards

Advanced Customization

Theme Customization

Magic Resume offers extensive theme customization options:

// Example theme configuration
const customTheme = {
  colors: {
    primary: "#3b82f6",
    secondary: "#64748b",
    accent: "#f59e0b",
    background: "#ffffff",
    text: "#1f2937"
  },
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "JetBrains Mono"
  },
  spacing: {
    section: "24px",
    element: "16px"
  }
}

Layout Options

Choose from multiple layout templates:

  1. Classic: Traditional chronological format
  2. Modern: Contemporary design with visual elements
  3. Minimal: Clean, text-focused layout
  4. Creative: Unique design for creative professionals

Rich Text Editing

Magic Resume uses Tiptap for rich text editing, supporting:

  • Bold, italic, and code formatting
  • Bullet points and numbered lists
  • Links and email addresses
  • Custom styling options

Export and Sharing

PDF Export

Magic Resume provides high-quality PDF export:

  1. Click the Export button in the top toolbar
  2. Choose your preferred format and quality
  3. The PDF will be generated and downloaded automatically

PDF Export Options:

  • Quality: Standard, High, or Print-ready
  • Format: A4, Letter, or Legal
  • Margins: Customizable page margins

For direct printing:

/* Print-specific styles are automatically applied */
@media print {
  /* Optimized font sizes and spacing */
  /* High contrast for better readability */
  /* Page break management */
}

Deployment Options

Vercel Deployment

Deploy your customized Magic Resume to Vercel:

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel

# Follow the interactive prompts

Docker Deployment

Using Docker Compose

Create a docker-compose.yml file:

version: '3.8'
services:
  magic-resume:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

Deploy with Docker Compose:

# Build and start the container
docker-compose up -d

# View logs
docker-compose logs -f

Using Pre-built Docker Image

# Pull the official Docker image
docker pull siyueqingchen/magic-resume:main

# Run the container
docker run -d -p 3000:3000 siyueqingchen/magic-resume:main

Advanced Features

AI-Powered Content Suggestions

Magic Resume includes AI features for content enhancement:

  1. Smart Descriptions: AI suggests improvements for job descriptions
  2. Skill Recommendations: Based on your industry and role
  3. Formatting Suggestions: Optimize layout and structure

Multi-language Support

Prepare your resume for international opportunities:

  • Language Detection: Automatic language detection
  • RTL Support: Right-to-left language support
  • Character Encoding: Proper Unicode handling

Accessibility Features

Magic Resume is built with accessibility in mind:

  • Keyboard Navigation: Full keyboard support
  • Screen Reader Friendly: ARIA labels and semantic HTML
  • High Contrast Mode: Enhanced visibility options
  • Font Scaling: Responsive text sizing

Troubleshooting

Common Issues and Solutions

Development Server Won’t Start

# Clear node_modules and reinstall
rm -rf node_modules
pnpm install

# Clear Next.js cache
rm -rf .next

# Restart the development server
pnpm dev

PDF Export Not Working

  1. Check browser permissions for downloads
  2. Ensure adequate memory for large resumes
  3. Try exporting in sections for complex layouts

Performance Optimization

// Enable performance monitoring
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      {process.env.NODE_ENV === 'development' && (
        <script src="https://cdn.jsdelivr.net/npm/@next/dev@latest/dist/next-dev.js" />
      )}
    </>
  )
}

Best Practices

Resume Content Guidelines

  1. Conciseness: Keep descriptions clear and impactful
  2. Quantification: Use numbers and metrics where possible
  3. Relevance: Tailor content to target positions
  4. Consistency: Maintain uniform formatting throughout

Technical Considerations

  • File Size: Optimize images and assets
  • Loading Speed: Implement lazy loading for better performance
  • Browser Compatibility: Test across different browsers
  • Mobile Responsiveness: Ensure mobile-friendly design

Community and Support

Getting Help

  • GitHub Issues: Report bugs and request features
  • Discord Community: Join the discussion at discord.gg/9mWgZrW3VN
  • Documentation: Comprehensive guides and API references
  • Email Support: Contact the maintainers directly

Contributing

Magic Resume is open source and welcomes contributions:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request
# Fork and clone your fork
git clone https://github.com/YOUR_USERNAME/magic-resume.git

# Create a feature branch
git checkout -b feature/amazing-feature

# Make your changes and commit
git commit -m "Add amazing feature"

# Push to your fork
git push origin feature/amazing-feature

Conclusion

Magic Resume represents the future of resume creation, combining modern web technologies with user-focused design. Its AI-powered features, extensive customization options, and seamless export capabilities make it an invaluable tool for job seekers and professionals.

Key takeaways from this tutorial:

  • Easy Setup: Get started quickly with minimal configuration
  • Powerful Features: Leverage AI assistance and real-time preview
  • Flexible Deployment: Choose from multiple hosting options
  • Open Source: Contribute to and customize the platform

Whether you’re building your first resume or updating an existing one, Magic Resume provides the tools and flexibility you need to create a standout professional document.

Next Steps

  1. Explore Templates: Try different layout options
  2. Customize Themes: Create your unique visual style
  3. Export and Test: Generate PDFs and test across devices
  4. Share Feedback: Contribute to the project’s improvement

Start building your professional resume today with Magic Resume, and experience the power of modern AI-assisted resume creation!

Resources:

참고