The 1st Team Project Review at WeCode Bootcamp

6 weeks at WeCode Bootcamp have already passed. As finishing the foundation course, we started a 2-week team project that ended yesterday with a final presentation. This blog is to review my team project and reflect on it.

Starting the project

Before talking about the project process, I had some issue that happened right before the project started. Unfortunately, I was notified that a close person to me contacted with a COVID positive person, and eventually was confirmed positive too on the Monday when the project kicked off. I was obligated to quarantine for the next two weeks. I was upset that I could not be at school for the project, and frustrated and worried about the whole situation.

However, I could not sit and be upset. I couldn’t do anything for what already has happened, and decided to do my best not to affect our work and team members. Now the two weeks have passed, I can assure myself I learned a ton not only in knowledge, but also mentally. I will write about this more in the coming sections.

Project Team and Topic

Our team consists of six members, three people for the front-end and back-end each. I notified one of my close team members about my situation, and we immediately met on Google Meet.

Our project topic was to clone Market Kurly web app which is the one of the most popular online food shopping website in Korea. They have a lot of products introduced on the main page with many categories, and have many functions that we could practice and learn from.

We came up with a new name “Market ChoKurly” as we chose the chocolate category specifically to clone from the web app because we could not make everything in such a tight time frame.

Work Distribution and Goals

Thankfully, team members suggested me for a PM position. I have never worked as a PM before, and considering the situation with quarantine, I was quite worried. However, I thought this will be a rewarding experience at the end, so I gladly took the suggestion and was excited to work hard.

We decided to create the main page, product list page, product details page, login, signup and cart pages. There are also components to be shared across all pages, which are the navigation bar, footer, and the aside bar. The front-end members were willing to take any parts as we thought all of them would be a lot of learning for us. So we took a draw to decide which parts each one will take. I ended up taking the navigation bar, main page, and the product list page.

Team Work and Scrum

Our daily standup meeting started at 11:10 a.m. every day. As I could not be at school, we always met on Google Meet. on Mondays, we plan on work to be finished by the week. Every day, we start by updating on each other about what we have finished yesterday, and what we have not. We discuss on the day’s plan and goals. If there are any blockers that could possibly cause the delay, we discuss about them. Based on what we discussed during the meeting, we updated the cards on Trello. One of our team members uploaded the meeting agenda on Trello as well. As we get busier, we sometimes got a little bit late on updating Trello, but seeing the cards piling up on ‘done’ column helped us to realize how far we have come and what we have not accomplished.

Gists to share

Hover-and-expand Category Menu

One of the hardest codes on this project for me was to create the category dropdown menu. The Market Kulry has the main category list which appears on mouse hover, and when the main category is hovered, the subcategory of each appears on the right. The data fetched from the back end has subcategories inside each main category which consist of arrays in an array. So, I thought to use map methods twice, but struggled to make the only corresponding subcategory list to appear for the selected main category.

I used the onMouseEnter event handler and saved the main category’s id to categoryIdx state, and change isSubOpen to true. Using the conditional rendering, I wrote conditions to check if categoryIdx and the data index + 1 match, and if isSupOpen is true. If the conditions are turned true, the corresponding subcategory is mapped.

Carousel

The main page consists of different types of carousels. I created a carousel component and imported a product card component to be showed in the frame. Market Kurly has four pictures of products in one slide, some of them move by two pictures or four with one click.

First, I passed the product data using map method to the child component ProductCard. Also, I used transform style with translateX to the child component as well. Then, onClick handlers are used on the two buttons to move the x axis of the pictures.

Used in goLeftand goRight functions,slideX is a prop passed from the parent component, which is the value representing how many pictures to move with one click. Also, if the x is 0, meaning it is in the first position, the slide should not be moved to the left anymore, but go back to the ending position. I used the ternary operator and setState to assign the x position.

This code is for creating a timer in HH:MM:SS form to be used in 24 hour limited sales section. I did some googling and learned it from tutorials. Before refactoring, the code looked quite complicated. Our team mentor asked to use variables where I can, and now the code looks much cleaner and simpler so I am satisfied with it.

const twoDigits = time => { return (time < 10 ? ‘0’ : ‘’) + time; };

This simple function is to make a single digit number to have 0 in front of it. So, instead of ‘7’, ‘07’ appears in a timer.

Pagination

Finally, this is a code for pagination on the product list page. When the page number button is clicked, the corresponding API should be fetched. I used states and a parameter and embedded them in the API address using the template literal.

Accomplishments

First, I would like to pat myself on the back for finishing the project successfully despite the quarantine. I expect that developers work remotely a lot, so this experience could actually be a good practice. Personally I was very worried about the person who was covid positive and the whole situation was tough to deal with at first, but now that I have successfully worked throughout the project, I feel like I grew stronger mentally and gained much confidence about myself that I could do a project in a dynamic situation.

Also, I think our team work was awesome. We worked together on Google Meet until 5 a.m. on the final day of the project. I had so much fun working with them, and putting our work together and fixing errors.

Knowledge wise, I became much familiar with using states, and had opportunities to think about how to plan and use components more efficiently. Additionally, I learned about and practiced on concepts and functions including event handlers, conditional rendering, ternary operator, dynamic routing, pagination, map method, creating carousel and timer using various functions.

What to improve

I had to invest much time on working with the back end at first, because I didn’t know about what is the best way to connect with their local server while I am remote. My mentor told me about the live share extension from VSC, which lets you to share the same server. Although it was tougher to work remotely from the back end, I think it was a good learning experience and everything went well overall.

There are a few things that I could have done better. The filtering function on the product list page somehow didn’t work on the first click (working fine on the second click!). Also I wanted to additionally realize the search filter function but couldn’t in this time frame. Our web app is not responsive to different screens, so some features go out of positions on larger or small screens, which I would like to fix later.

Finishing the project

We also learned how to deploy our proejct on AWS — EC2. I have deployed our front-end part, but the back end has not yet. If they do soon, the web app will be accessible by anyone.

Once again, I realized the team work and communication is the most important key in a team project. I would like to thank team members who understood my situation and helped me throughout the process. I feel very proud of the team who worked best for the same goal. Also, I would like to thank mentors who assisted me a lot on Zoom and Google Meet.

The final presentation was yesterday, and although I could not be there I watched them through Zoom. Our team has done an amazing job and the whole project process was such a rewarding experience. At first, I thought being alone remote from everyone else during the project will be so hard. However, I think this experience turned into my unique story and improved myself. As a PM, I don’t think I did something too extra, but tried to lead the meeting, ask questions, and update on each other as clearly and fast as possible. This was such a great project and I hope the next (starting right on the next Monday!) will be a better one applying what I have learned from this one!