CV Application

A hands-on exploration of building a CV/Resume application with React as part of The Odin Project curriculum. This repository documents my learning journey through creating interactive forms, managing state with Context API, and implementing a real-time preview system.

📋 Table of Contents

• CV Application
  • 📋 Table of Contents
  • ✨ Features
  • 🚀 Getting Started
    • Prerequisites
    • Installation
    • Building for Production
  • 💡 Future Improvements
  • 📚 What I Learned
  • 🛠️ Technologies Used
  • 🔗 Resources
  • 🙏 Acknowledgments

✨ Features

• General Information Form - Capture name, email, and phone number with real-time preview
• Educational Experience - Add multiple education entries with school name, degree, and dates
• Practical Experience - Track work history with company name, position, and employment dates
• Live CV Preview - See changes reflected instantly as you type
• CRUD Operations - Create, read, update, and delete entries for education and work experience
• Print/Export Functionality - Generate print-ready CV with optimized styling
• Responsive Design - Works seamlessly on desktop and mobile devices

🚀 Getting Started

Want to run this project locally? Here's how:

Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager
• Git for version control

Installation

1. Clone the repository

git clone https://github.com/yourusername/fullstackjs-cv-application.git
cd fullstackjs-cv-application

1. Install dependencies

npm install

1. Start the development server

npm run dev

1. Open your browser and navigate to http://localhost:5173

Building for Production

1. Create an optimized production build

npm run build

1. Preview the production build locally

npm run preview

1. Deploy to GitHub Pages

npm run deploy

💡 Future Improvements

If I were to continue working on this project, here's what I'd add:

• Add file upload for profile photo
• Implement multiple CV templates/themes
• Add skills section with proficiency levels
• Include PDF download functionality
• Add data persistence with localStorage
• Implement drag-and-drop to reorder entries
• Add form validation with error messages
• Create a projects/portfolio section

📚 What I Learned

• React Context API - Managing global state across multiple components without prop drilling
• Form Handling - Creating controlled components and managing complex form state
• Component Architecture - Organizing code into reusable, maintainable components
• CSS Modules - Scoping styles to prevent conflicts and maintain clean CSS
• Testing with Vitest - Writing unit tests for React components using Testing Library
• CRUD Operations - Implementing create, read, update, and delete functionality in React
• State Management - Using useState and useContext hooks effectively
• Print Styling - Creating print-optimized layouts with CSS media queries

🛠️ Technologies Used

• React 19.2.0 - UI library for building interactive interfaces
• Vite 7.2.4 - Fast build tool and development server
• React Router 7.12.0 - Client-side routing
• Vitest 4.0.16 - Unit testing framework
• Testing Library - React component testing utilities
• CSS Modules - Scoped styling solution
• ESLint - Code linting and quality checks
• Prettier - Code formatting

🔗 Resources

• The Odin Project - CV Application
• React Documentation
• Vite Documentation
• React Testing Library
• CSS Modules Guide

🙏 Acknowledgments

• The Odin Project - For providing an amazing free curriculum
• The TOP Community - For being supportive and helpful throughout
• React Team - For creating an excellent framework and documentation

Special thanks to everyone who maintains open-source projects that made this possible!

---

Built with 💡 and ☕ as part of my journey through The Odin Project