Interactive Resume Builder React, JavaScript

```javascript
import React, { useState } from 'react';

const ResumeBuilder = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [summary, setSummary] = useState('');
  const [experience, setExperience] = useState([{ company: '', position: '', startDate: '', endDate: '', description: '' }]);
  const [education, setEducation] = useState([{ school: '', degree: '', startDate: '', endDate: '', description: '' }]);
  const [skills, setSkills] = useState('');
  const [projects, setProjects] = useState([{ name: '', description: '' }]);

  const handleInputChange = (setState) => (event) => {
    setState(event.target.value);
  };

  const handleExperienceChange = (index) => (event) => {
    const values = [...experience];
    values[index][event.target.name] = event.target.value;
    setExperience(values);
  };

  const handleEducationChange = (index) => (event) => {
    const values = [...education];
    values[index][event.target.name] = event.target.value;
    setEducation(values);
  };

  const handleProjectChange = (index) => (event) => {
      const values = [...projects];
      values[index][event.target.name] = event.target.value;
      setProjects(values);
  }

  const addExperience = () => {
    setExperience([...experience, { company: '', position: '', startDate: '', endDate: '', description: '' }]);
  };

  const removeExperience = (index) => {
    const values = [...experience];
    values.splice(index, 1);
    setExperience(values);
  };

    const addEducation = () => {
        setEducation([...education, { school: '', degree: '', startDate: '', endDate: '', description: '' }]);
    };

    const removeEducation = (index) => {
        const values = [...education];
        values.splice(index, 1);
        setEducation(values);
    };

    const addProject = () => {
        setProjects([...projects, {name: '', description: ''}]);
    }

    const removeProject = (index) => {
        const values = [...projects];
        values.splice(index, 1);
        setProjects(values);
    }

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>Interactive Resume Builder</h1>

      <h2>Personal Information</h2>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={handleInputChange(setName)} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" value={email} onChange={handleInputChange(setEmail)} />
      </div>
      <div>
        <label>Phone:</label>
        <input type="tel" value={phone} onChange={handleInputChange(setPhone)} />
      </div>

      <h2>Summary</h2>
      <div>
        <label>Summary:</label>
        <textarea value={summary} onChange={handleInputChange(setSummary)} />
      </div>

      <h2>Experience</h2>
      {experience.map((exp, index) => (
        <div key={index} style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '10px' }}>
          <h3>Experience {index + 1}</h3>
          <div>
            <label>Company:</label>
            <input type="text" name="company" value={exp.company} onChange={handleExperienceChange(index)} />
          </div>
          <div>
            <label>Position:</label>
            <input type="text" name="position" value={exp.position} onChange={handleExperienceChange(index)} />
          </div>
          <div>
            <label>Start Date:</label>
            <input type="text" name="startDate" value={exp.startDate} onChange={handleExperienceChange(index)} />
          </div>
          <div>
            <label>End Date:</label>
            <input type="text" name="endDate" value={exp.endDate} onChange={handleExperienceChange(index)} />
          </div>
          <div>
            <label>Description:</label>
            <textarea name="description" value={exp.description} onChange={handleExperienceChange(index)} />
          </div>
          <button type="button" onClick={() => removeExperience(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={addExperience}>Add Experience</button>

            <h2>Education</h2>
            {education.map((edu, index) => (
                <div key={index} style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '10px' }}>
                    <h3>Education {index + 1}</h3>
                    <div>
                        <label>School:</label>
                        <input type="text" name="school" value={edu.school} onChange={handleEducationChange(index)} />
                    </div>
                    <div>
                        <label>Degree:</label>
                        <input type="text" name="degree" value={edu.degree} onChange={handleEducationChange(index)} />
                    </div>
                    <div>
                        <label>Start Date:</label>
                        <input type="text" name="startDate" value={edu.startDate} onChange={handleEducationChange(index)} />
                    </div>
                    <div>
                        <label>End Date:</label>
                        <input type="text" name="endDate" value={edu.endDate} onChange={handleEducationChange(index)} />
                    </div>
                    <div>
                        <label>Description:</label>
                        <textarea name="description" value={edu.description} onChange={handleEducationChange(index)} />
                    </div>
                    <button type="button" onClick={() => removeEducation(index)}>Remove</button>
                </div>
            ))}
            <button type="button" onClick={addEducation}>Add Education</button>

      <h2>Skills</h2>
      <div>
        <label>Skills (comma-separated):</label>
        <input type="text" value={skills} onChange={handleInputChange(setSkills)} />
      </div>

        <h2>Projects</h2>
        {projects.map((project, index) => (
            <div key={index} style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '10px' }}>
                <h3>Project {index + 1}</h3>
                <div>
                    <label>Name:</label>
                    <input type="text" name="name" value={project.name} onChange={handleProjectChange(index)} />
                </div>

                <div>
                    <label>Description:</label>
                    <textarea name="description" value={project.description} onChange={handleProjectChange(index)} />
                </div>
                <button type="button" onClick={() => removeProject(index)}>Remove</button>
            </div>
        ))}
        <button type="button" onClick={addProject}>Add Project</button>



      <h2>Preview</h2>
      <div style={{ border: '1px solid #000', padding: '20px', marginTop: '20px' }}>
        <h3>{name}</h3>
        <p>Email: {email} | Phone: {phone}</p>
        <h4>Summary</h4>
        <p>{summary}</p>
        <h4>Experience</h4>
        {experience.map((exp, index) => (
          <div key={index}>
            <h5>{exp.position}, {exp.company}</h5>
            <p>{exp.startDate} - {exp.endDate}</p>
            <p>{exp.description}</p>
          </div>
        ))}

        <h4>Education</h4>
        {education.map((edu, index) => (
            <div key={index}>
                <h5>{edu.degree}, {edu.school}</h5>
                <p>{edu.startDate} - {edu.endDate}</p>
                <p>{edu.description}</p>
            </div>
        ))}

        <h4>Skills</h4>
        <p>{skills}</p>

          <h4>Projects</h4>
          {projects.map((project, index) => (
              <div key={index}>
                  <h5>{project.name}</h5>
                  <p>{project.description}</p>
              </div>
          ))}

      </div>
    </div>
  );
};

export default ResumeBuilder;
```