---
# System prepended metadata

title: React Resume Builder – Intern Project (Vite + Tailwind + shadcn/ui)

---

# React Resume Builder – Intern Project (Vite + Tailwind + shadcn/ui)

## 🎯 Project Overview

Build a **Resume Builder Web Application** using **React**, **Vite**, **Tailwind CSS**, and **shadcn/ui**. This project is designed for interns to demonstrate **all core React concepts** and modern frontend practices that are valuable for real-world projects and resumes.

By the end of this project, interns should be able to:

* Build a multi-step form-based application
* Manage global and local state effectively
* Handle async operations
* Implement reusable components
* Apply validations using `react-hook-form`
* Use conditional rendering and loops correctly
* Structure a production-ready React project

---

## 🧰 Tech Stack

* **React 18**
* **Vite** (build tool)
* **Tailwind CSS** (styling)
* **shadcn/ui** (UI components)
* **react-hook-form** (form handling + validation)
* **Context API** (global state management)

---

## 🧠 React Concepts Covered

| Concept               | Where It Is Used                    |
| --------------------- | ----------------------------------- |
| Components            | Resume sections, form steps         |
| Props                 | Passing form data and handlers      |
| State (`useState`)    | Step navigation, local form state   |
| Effects (`useEffect`) | Auto-save, preview updates          |
| Conditional Rendering | Show/hide sections dynamically      |
| Loops (`map`)         | Skills, education, experience lists |
| Context API           | Resume data shared across steps     |
| Async JS              | Mock API save/load resume           |
| Controlled Forms      | react-hook-form                     |
| Validation            | react-hook-form built-in rules      |

---

## 🗂️ Application Features

* Multi-step resume form
* Live resume preview
* Add / remove dynamic sections
* Auto-save resume (mock async API)
* Download resume as JSON (bonus)

---

## 🏗️ Project Setup

```bash
npm create vite@latest resume-builder -- --template react
cd resume-builder
npm install

# Tailwind setup
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# shadcn/ui
npx shadcn@latest init

# Form library
npm install react-hook-form

npm run dev
```

---

## 📁 Suggested Folder Structure

```
src/
├── components/
│   ├── form/
│   ├── preview/
│   ├── common/
├── context/
│   └── ResumeContext.jsx
├── pages/
│   └── Builder.jsx
├── utils/
│   └── mockApi.js
├── App.jsx
└── main.jsx
```

---

## 🔄 Application Flow (Steps)

1. Personal Information
2. Professional Summary
3. Education
4. Work Experience
5. Skills
6. Projects
7. Certifications (Optional)
8. Preview & Submit

---

## 📝 Step-by-Step Form Fields

### 1️⃣ Personal Information

**Fields:**

* First Name (required)
* Last Name (required)
* Email (required, email format)
* Phone Number (required, min 10 digits)
* Location (City, Country)
* LinkedIn URL
* GitHub URL
* Portfolio Website

**Concepts:**

* react-hook-form validation
* Controlled inputs

---

### 2️⃣ Professional Summary

**Fields:**

* Summary (textarea, min 50 characters, max 300)

**Concepts:**

* Character counter
* Conditional error rendering

---

### 3️⃣ Education (Dynamic – Multiple Entries)

**Fields (per entry):**

* Institution Name (required)
* Degree
* Field of Study
* Start Year
* End Year
* Currently Studying (checkbox)

**Concepts:**

* `useFieldArray`
* Loops (`map`)
* Conditional rendering (end year disabled if currently studying)

---

### 4️⃣ Work Experience (Dynamic)

**Fields (per entry):**

* Company Name (required)
* Job Title (required)
* Start Date
* End Date
* Currently Working Here (checkbox)
* Job Description (textarea)

**Concepts:**

* Conditional rendering
* Dynamic forms

---

### 5️⃣ Skills

**Fields:**

* Skill Name
* Skill Level (Beginner / Intermediate / Advanced)

**Concepts:**

* Array state
* Loop rendering

---

### 6️⃣ Projects (Optional but Recommended)

**Fields (per project):**

* Project Title
* Description
* Tech Stack (comma-separated)
* Project URL

**Concepts:**

* Reusable form components

---

### 7️⃣ Certifications (Optional)

**Fields:**

* Certification Name
* Issuing Organization
* Year

---

### 8️⃣ Preview & Submit

**Features:**

* Live preview using Context API
* Edit previous steps
* Submit button

**Async Task:**

* Simulate API call using `setTimeout`
* Show loading spinner

---

## 🌐 Global State (Context API)

Resume data should be stored in a `ResumeContext`:

* personalInfo
* summary
* education[]
* experience[]
* skills[]
* projects[]
* certifications[]

---

## ⏳ Async JavaScript Task

Create a mock API:

* `saveResume(data)` → resolves after 2 seconds
* `loadResume()` → returns saved data

Show:

* Loading state
* Success message

---

## 🎨 UI Guidelines

* Use **shadcn/ui** components only
* Responsive layout
* Clean spacing using Tailwind
* Proper form error messages

---

## 🧪 Bonus Tasks (Optional)

* Download resume as JSON
* Dark mode toggle
* Progress indicator
* LocalStorage persistence

---

## 📌 Evaluation Criteria (For Interns)

* Code readability
* Proper React hooks usage
* Correct validation
* Clean UI
* Folder structure

---

## 🚀 Outcome

After completing this project, interns will have:

* A strong resume-worthy React project
* Practical understanding of real-world React development
* Experience with modern tools and best practices

---

Happy Building! 🎉
