https://github.com/gregolive/cv-builder
Build an online resume that adapts to any screen size.
https://github.com/gregolive/cv-builder
javascript react
Last synced: 3 months ago
JSON representation
Build an online resume that adapts to any screen size.
- Host: GitHub
- URL: https://github.com/gregolive/cv-builder
- Owner: gregolive
- Created: 2022-03-23T05:27:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-27T15:02:43.000Z (over 4 years ago)
- Last Synced: 2025-08-03T00:38:25.777Z (11 months ago)
- Topics: javascript, react
- Language: JavaScript
- Homepage: https://gregolive.github.io/cv-builder/
- Size: 2.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CV Builder
Enter your information to build an online resume that is beautifully formatted at any screen size.
[Live demo](https://gregolive.github.io/cv-builder/) 👈
## Functionality
- The resume is broken into 5 sections: Personal Information, Personal Statement, Experience, Education, and Skills
- Personal Information and Personal Statement are treated as 'static sections' and Experience, Education, and skills are 'dynamic sections' that allow users to add additional jobs/degrees/skills
- Each sections is saved seperately and a button on the top right of each section allows users to swtich between a 'normal mode' where the section and its inputs are formatted like a CV and an 'edit mode' that allows users to edit/delete the inputs
- The sections entered data (React state) is saved in the user's browser via Javascript's Web Storage API
- Each input group in a dynamic section is assigned a random id key generated via uniqid
- Date field's are set using a date-picker input and date-fns functions help to format dates in 'normal mode'
## Reflection
This project represented my first 'big' undertaking with React and was an opportunity to solidify my knowledge of props and state. One difficulty I ran into at first was the ability to add multiple job/degree/skill inputs dynamically and correctly implement a handleChange function with multiple inputs. At first I tried using prevState and a few other methods that would not allow for the use of setState without hard coding a specific object key. Eventually I came across the teachique of storing of storing the object ket in an input's name attribute and used the following to handle inputs changes:
````
handleChange = (e) => {
this.setState({
education: {
...this.state.education,
[e.target.name]: e.target.value,
}
});
};
````
Editing inputs that had multiple entries presented a similar problem, but I used a similar technique and matched id values to target the proper input:
````
editEducation = (e, targetId) => {
this.setState({
educations: this.state.educations.map((edu) => {
if (edu.id === targetId) { edu[e.target.name] = e.target.value };
return edu;
}),
});
};;
};
````
A final roadblock I encountered related to using localStorage and setState. Since setting state in React is asynchronous, there were times when the state was not set properly when saving or fetching data with localStorage,. I was able to fix this by when fetching data with:
````
this.forceUpdate();
````
And when saving data by implementing the save function in setState's callback:
````
saveEducation = () => {
this.setState({
...
}, () => this.storeState());
};
````
I am unsure, however, if there is a more elegent way of completeing this, especially in the case of using forceUpdate.
## Screenshot
