https://github.com/shubhamv123/react-resume-builder
A simple react application to create your resume based on dynamic configuration
https://github.com/shubhamv123/react-resume-builder
javascript reactjs resume resume-creator resume-website snowpack
Last synced: 6 months ago
JSON representation
A simple react application to create your resume based on dynamic configuration
- Host: GitHub
- URL: https://github.com/shubhamv123/react-resume-builder
- Owner: shubhamV123
- License: mit
- Created: 2020-10-03T15:03:15.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-22T09:10:45.000Z (over 3 years ago)
- Last Synced: 2025-03-28T05:13:42.355Z (7 months ago)
- Topics: javascript, reactjs, resume, resume-creator, resume-website, snowpack
- Language: JavaScript
- Homepage: https://resume-builder-react.netlify.app/
- Size: 48.9 MB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React resume builder
A simple react based web app for which you can use to generate a resume. All configs are dynamic so need to worry you can simply update config and download your resume. That's it.
### How it works?
1. Simply you need to update json value that's it.
2. I would suggest to get basic overview of **html, json** for playing with this tool. You can directly pass html tag in it. For better resume modification.
3. **Make sure** set print option `A4` and `uncheck print header and footer` option
#### How to use locally
- You need to download this project locally. Then install dependencies using `yarn install` or `npm install`
- Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
- Update you `resume-details-dev.json` config according to your requirement
- If you found there is not required field according to your requirement. You can simply add your config in `resume-details-dev.json`. The only **catch** here is you need to to defined in your json this format:
```json
{
"objectKey": {
"title": "Your title",
"description": ["list of dependency you want to show"]
}
}
```
- Once you have done this to your json file. You can simply use list based ui by going through `Resume.js` and add
```jsx
```
- If you want to add section like `profession experience` then use same data format as it is used in `.json` file. For more `Reference` check out how `ProfessionExperience` component is work
- There are two type of generic components currently `Section`(professional experience like) and `DescriptionList` (certificationa and award like). Choose based on the requirement. _Currently you have to add manually add in `Resume.js` for your requirement field. I have plan in future to handle this dynamically_
## Available Scripts
### npm start
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### TODO
- [ ] Add another version template
- [x] Create website based config so that user can directly play with tools
- [ ] Added proptypes or flow/ts
- [x] Add pdf button to download resume directly
- [ ] Improve readme doc
- [ ] Current code is raw one. Refactor it
- [ ] Add workflow to auto approve dependabot request
### REFERENCE:
1. [How I structure my css](https://matthiasott.com/notes/how-i-structure-my-css)
2. Tailwing [config](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js)