My roadmap to create makeresume.co
Tags: showdev, career, 100daysofcode, javascript
Published: 2021-04-30 11:36:21

Hello people, this is my first post. I want to share a personal project and the roadmap (list of tools, languages or technologies) that I used to complete it. 
The project is **[makeresume.co](https://makeresume.co)**. There are a lot of similar projects with better qualities and features, but I was looking for the opportunity to learn and/or refresh some technologies, so, that wasn't a problem for me.

The idea of this project was to learn/refresh some new technologies because I am currently working with some old ones (ColdFusion and AngularJS).

So, some time ago I used [resume.io](https://resume.io) and for me, that app is beautiful and I love it. "I can do something similar", I said.

**Intro**:
- I worked between 45 and 50 days (in my free time).
- The resume is generated using something similar to [jsonresume.org](https://jsonresume.org) but with a few updates.
- The UI is like a copy (poor quality) of the [resume.io](https://resume.io).
- Before starting the project, I watched some videos on YouTube to identify the best way to structure the code in the API (node.js) and also, I did a 5 hours duration free course to learn the basics about react.js.

**Roadmap**:
_API_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfdjaama4e9pi0ffs16s.png)
There is nothing strange here, a basic node.js project.
- node.js - https://nodejs.org
- express - https://expressjs.com 
- mongoose - https://mongoosejs.com
- handlebars - https://handlebarsjs.com
- puppeteer - https://pptr.dev
- nanoid - https://www.npmjs.com/package/nanoid
- dayjs - https://day.js.org
- PM2 - https://pm2.keymetrics.io

The API receives a json with the resume's data and it is processed with some services generating an HTML file (Handlebars) and then, generating a PDF (Puppeteer and Chrome).

_APP_
I tried to create most of the components and my idea is to create a repo with them and share it.
- react.js using create-react-app - https://create-react-app.dev/docs/getting-started
- react router dom - https://reactrouter.com/web/guides/quick-start
- axios - https://www.npmjs.com/package/axios
- fontawesome - https://fontawesome.com
- flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox
- react draft wysiwyg - https://www.npmjs.com/package/react-draft-wysiwyg
- smooth scrollbar - https://idiotwu.github.io/smooth-scrollbar
- react tooltip - https://wwayne.github.io/react-tooltip
- react device detect - https://www.npmjs.com/package/react-device-detect

_Deploy_
AWS - I am currently studying to get the AWS Practitioner Certification and the best way to learn something is using it.

The landing page and the UI are in S3 buckets with a CloudFront. I am using CloudFront because I wanted to implement an SSL certificate.
Domain and sub-domains with Route 53.
The API runs with PM2 in an EC2 instance (Linux) with a Load Balancer (to use SSL).

The database is hosted on MongoDB Atlas.

And that is all at this moment, I will continue working to improve the application and learning new things.

I made my resume with the app: https://s.makeresume.co/4AQzSi8lCV

Thanks for reading this article!