CV/Resume Generator - React + Vite

This is a React-based application that allows users to input their personal information, education history, work experience, and skills to generate a professional-looking CV/rsum. Users can view a real-time preview of their CV as they input their information.

Live Preview: https://main--cv-app-generate.netlify.app/

Features:

• Real-time CV Preview: Users can see an updated preview of their CV as they input data.
• Personal Information: Input fields for name, email, phone number, birth date, and city.
• Education Section: Add, edit, and delete educational entries with details like school name, degree, and field of study.
• Work Experience: Add and manage work experience entries, including job title, company, and duration.
• Skills Section: Add skills that are relevant to your CV.
• Collapsible Sections: Each section (Education, Experience, and Skills) can be expanded or collapsed for a cleaner user interface.

Components: This project is built using modular React components to manage each section of the CV. Below is a brief description of the key components:

1. App.jsx: The main component that manages the state and renders the input sections and the CV preview.
2. PersonalInfo.jsx: Handles input fields for personal details like name, email, and phone number.
3. Education.jsx: Manages the list of educational experiences with the ability to add, edit, and delete entries.
4. Experience.jsx: Handles work experience entries.
5. Skills.jsx: Allows the user to input relevant skills.
6. ResumePreview.jsx: Displays the live preview of the CV based on the data entered.
7. CollapsibleSection.jsx: Wraps sections (Education, Experience, Skills) inside a collapsible UI to show or hide their content.
8. FormTemplate.jsx: A reusable form component that dynamically generates input fields based on the configuration passed to it. This is used across different sections to standardize how forms are handled (e.g., education, experience forms).
9. ItemTemplate.jsx: A component that renders a formatted item with a title, subtitle, description, and actions like Edit or Remove. Used to display items such as education or work experience entries.
10. InputGroup.jsx: A reusable input component that can handle different input types (text, textarea, date, etc.) and provides support for additional labels like optional or recommended. It simplifies form input creation throughout the app.
11. main.jsx: The entry point for the React application, where the App component is rendered and injected into the DOM using ReactDOM.render. This is the root file where the React application starts running.

Installation: To run this project locally, follow the steps below:

1. Clone the repository:

• bash

git clone [email protected]:dipeshduwal/cv-application.git
cd cv-application

2. Install dependencies: Run the following command to install all necessary dependencies:

• bash
  npm install

3. Start the development server: To start the application in development mode, run:

• bash
  npm start

4. Open the application: Open your browser and view the app.