CV Builder

CV Builder is a dynamic, responsive application that allows users to input their personal details, educational background, and professional experience, instantly generating a clean, standard A4 resume layout.

This application was developed as part of The Odin Project curriculum to demonstrate core concepts in React, global state management, and component architecture.

Technology Stack

• React Function Components: Used to build the entire UI structure out of modular, reusable pieces.
• React Hooks: Thorough implementation of useState for managing input data, dynamic arrays, and UI toggles (such as switching between forms and display modes).
• Vite: Used as the frontend build tool for fast initialization, hot module replacement, and bundling.
• Vanilla CSS: Utilized to design the UI components and scale the generated Resume preview to exactly match the size, padding, and typography of a standard professional A4 document.

Architecture and Structure

The application enforces a strict separation between data entry and data display:

• State Management (App.jsx): Acts as the single source of truth for the application. It holds the overarching state for every section (Personal Info, Education, Experience arrays) and passes this state down as props, adhering to the principle of lifting state up.
• Form Components (general.jsx, educational.jsx, experience.jsx): These components receive the state and setter functions via props. They contain the internal logic that allows the user to individually enter, submit, duplicate, or remove entries.
• Preview Component (view.jsx): This component strictly receives all the top-level state and maps out the data. Its sole responsibility is rendering the visual resume dynamically.

Core Features

• Real-Time Sync: Characters typed in any active input box immediately update onto the mapped preview document.
• Dynamic Arrays: Users can seamlessly add multiple distinct education history blocks and professional experience records.
• Entry Management: Out-of-the-box functionality to safely manage or delete any added job or school from the state arrays.
• Smart Placeholders: The preview logic calculates when data is empty, partially complete, or actively being typed, rendering beautifully formatted fallback placeholder data directly into the blank spaces.

Running the project locally

1. Clone the repository to your local machine.
2. Ensure you have Node.js installed, then run npm install inside the root project directory to install dependencies.
3. Run npm run dev to start the local development server.
4. Open the localhost URL provided in your terminal to view and run the application in your browser.