The 2nd Team Project at WeCode Bootcamp

Starting the project

Can’t believe my second project at WeCode has finished already! The last 2 weeks have been pretty crazy, lots and lots of fun and learning. This is to share my journey with the second team project.

My second project is to clone one of the most popular recruiting platforms in Korea, Wanted. We came up with our team project name and logo, <GetWanted/>, which shows that we chose to make a recruiting website for developers particularly. There are six members in the team including me, three for front-end and back-end each.

Although it is a clone project, our goal is not on cloning the web app identically. We aim to realize various functions on our own, especially the ones that we couldn’t experience from the last project. So, my team members and I shared what we did from the last project and assigned work based on what we can learn the most from.

My part was the resume file management page, resume writing page and the job post details page. I am going to share some codes in the coming section.

Team Work and Scrum

This time, we used Trello again, to update each other everyday on the progress and and share information. Meetings were pretty straight forward and quick, and most of our work was handled on time. Everyone worked hard on weekends and holidays, and I am proud of my team who did their best to complete each part. Once again, I realized communication between team members is extremely important. Next time, I hope to have more constructed communication with back-end members, as I found that the picture each team member is drawing can be very different from each other and it requires a lot of time to agree on if we find the difference too late.

Work Details Summary

The features I developed for this project include:

Resume Storage

• Upload PDF files
• Add, delete, modify resume files
• Load resume forms
• Dynamic routing

Resume Writing

• Auto-complete basic personal info
• Add/delete work experiences
• Save as draft / finish and update the storage

Job Posts

• Employer image carousel
• Display employer’s location by using Kakao map api
• Load the user’s resumes and submit files to the post

Gists to Share

On this project, I had to use a lot of fetch functions to get and post information working with the server side. In the later phases of the project, we had a session about reusing functions. I wanted to do some refactoring on my codes, especially fetch functions so that I don’t have to repeat writing the same lines over and over.

Above reuseFetch takes four parameters, api, method, token and payload. Methods that I used were only GET and POST so I used if condition for POST as it needs options.

The second gist I want to share is about enabling the submit button on the job post details page. The feature I had to develop has the following requirements:

1. There are checkboxes of file attachment that the user posted on the account, which means the number of files can be different.
2. The submit button (제출하기) should be enabled and changed in color when at least one of the checkboxes is checked.
3. The submit button should remain enabled when a number of checkboxes are checked, as multiple files can be submitted.
4. When unchecking checkboxes, the submit button should go disabled when all the checkboxes are unchecked.

It was quite tough for me to develop this feature because I was not sure about on what component I should manage the states for the checkboxes. Originally, I had the states on the checkbox component, as I thought each box should have its own state so that each box can be checked individually. Then, I had the submitReady state on its parent component. The problem was, although I was able to enable the submit button when multiple checkboxes are checked, as soon as one of them is unchecked, the submit button went disabled.

With help from my mentor, I realized that the states for each checkbox should be managed from the parent component as well. But, as the number of checkboxes are different depending on how many files the user uploaded, I had to think about how to get the number of states. So, I used map function to return boolean state for each file in the array of resumeList.

Then, handleCheckBoxClick changes only the selected checkbox’s state in the array. Finally, checkSubmitReadyfunction checks if at least one checkbox is clicked, the submitReady state should be true, otherwise remain false. This feature was more complicated that I thought would be. As a user, I would have never imagined such simple looking feature needs such logics behind, haha.

Finishing the project

On the day of final presentation, I was not too happy with the result. Everything worked fine until last night, but for some reason, some of the features on the resume page didn’t work so well. We couldn’t make it perfect on the presentation but still, I am proud of my work and progress that I have made so far at the bootcamp. Looking back to the start of the camp, what we all have accomplished is quite crazy!

From tomorrow, I am starting my one-month internship at a start-up company. I am nervous and excited at the same time. I look forward to learning so much more from working with developers in the field, and one month from now I will be more ready as a junior developer.