# 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! 🎉
Sign in with Wallet
Connect another wallet