I was really excited when I got to know about hashnode's Christmas hackathon as I would get the chance to build something exciting, not just for fun, but also for an amazing prize.

I was thinking of what to build for the #christmashackathon on Hashnode, something that would also be beneficial for the developers community, then i decided to build a resume creator, and named the app resumeCraft.

The idea

As I said above, resumeCraft is an application that helps you create resumes. All you need to do is to fill in your information that is required to make a good resume, and the application helps you generate a beautiful resume that you can download in PDF format.

The process; from idea to product.

UI/UX design

To bring my idea to life, I decided to create the UI/UX design of the application first, before moving on to development.

Since I also have good knowledge of UI/UX design, I made research, came up with sketches, wireframes, and high fidelity mockups for the application.

These are some of the screens I designed:

Create resume-4.jpg

Development

I decided to use ReactJS for the development of the application. I also used some extra JavaScript libraries which I listed below, that helped achieve some of the functionalities of the application.

Styled Components (for Styling)
Kendo React PDF (For PDF generation)
React step builder (For creating multistep forms)
React Router (For routing and navigation)
React icons (For Icons)
React responsive modal (For creating beautiful and responsive modals)

Things i learnt from building this application

Building this application came which challenges, which in the process of going through them, I learnt quite a lot. I learnt how to:

Create multistep forms
Create and Manipulate PDF files
Convert ReactJS components into document files. This technique can be employed in web applications where reports have to be generated.
Convert UI/UX designs into frontend code more efficiently

The Product

So I scaled through all of the challenges this project presented me with, and came up with a MVP.

You can try out the live demo here.

I would love that you try it out and give me feedback and suggestions regarding the application.

These are more screenshots of the application.

Create resume-5.png

Create resume-2.png

What next?

So these are steps i would be taking next concerning this project:

Make this project open source on github
Make the application generate more customised resumes for the users.

Conclusion

I really had great fun building this project because I was able to merge my interest for both design and development in creating a tangible product that solves a problem. I hope to continually add more features to this application to make it more valuable to its users.

If you like this article, please do not forget to drop a reaction, comment and also share on your social media platforms.

Thanks for reading!, and happy new year!!!

Creating resumeCraft - An application that helps you create resumes.