Skip to content

README.md

Latest commit

 

History

History
143 lines (102 loc) · 4.67 KB

README.md

File metadata and controls

143 lines (102 loc) · 4.67 KB

CV Application

License The Odin Project

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

✨ 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

🙏 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