KUDAPACH_TODOLIST

This is the first project I completed in only two weeks and I was in charge of the Back-end and Code Review.

Deployment

https://kudapach.com

Presentation:

About TODOLIST

Planning is often a difficult task since we have so much in our minds — we think about work, our personal lives, and more. There are so much things going on in our head to the point that we sometimes forget to do something.
But is it due to the development of services?
It is difficult to find a service where you can simply write your plans and check your schedule. There are so many additional features.
Obviously, there are already existing services that is only focused on basic functions. But these services have a crude design that also affects how we interact with the application. The complicated design and interface of already existing applications cause users to dislike or have a trouble navigating through the app to be able to use it; which eventually leads users to try and look for another service or just not use it at all.
To address this issue / pain point, we have designed an application that just does that.
A beautiful design that is patterned to the original TODOLIST function.
Introducing KUDAPACH_TODOLIST to everyone.

WHY KUDAPACH_TODOLIST ?

  1. Straightforward and minimalistic design

2. Service that is focused on basic functions

3. Plans that can work alongside the calendar

4. Modify with various colors

Service Demonstration Gif

  • Login
  • To-do List
  • Group Setting
  • Setting

Position

  • Back-End/Code Reviewer

Stack

  • Node.js, express, Sequelize, MySQL2, React, React-Google-login, Amazon Web Services-S3, CloudFront, EC2, Elastic Load Balancer, RDS, Route53, Certificate Manager

Contributions

  • Planning
  • schema configuration
  • Create Router
  • Sign up function(SHA 256)
  • My Page function
  • Setting function
  • Group To Do card function
  • Group Setting function
  • Google-Oauth function
  • Deployment through AWS
  • Code Review and refactoring both front-end and back-end

Reflection

For this project, our team is composed with 4 people, Chris, Daniel, Kuzhi and myself, Paige. We composed our group name as ‘KUDAPACH’ by combining the first two letters of our English names.

Chris and I were in charge of the back-end while Daniel and Kuzhi were in charge of front-end. We used React, React Hooks, React Router, React Calendar, HTML, CSS, Sweetalert, Colorpicker for the front-end. For the back-end, we used Node.js, express, Sequelize, MySQL2, React-Kakao-login, PM2, Amazon Web Services(AWS)-S3, CloudFront, EC2, Elastic Load Balancer, RDS, Route53, and Certificate Manager.

Of course, in the beginning, we discussed altogether what to create and list all of our plans. However, the list we composed did not include the specific instructions on how the code should be written. Even though we wrote the APIs, communication was only active between front-end itself and back-end itself. Through this project, I realized how much we lacked communication and planning. To be honest, we were not able to set our schema. This project required us to have N:M associations and it was hard for us to decide which tables should be connected. Therefore, we ended up modifying the schema more than 10 times. The more we write our code, the more we realized what we wrote was not correct and some things needed to be revised. I think this is one of the biggest reason why our project had a delay. We used ‘Postman’ to check how responses came back while we write our code; but the front end actually needs that information as well. The communication was inactive between front-end and back-end, so they used fake data to write code and check through browser. And, they used that fake data as props and apply to their code first by using the localhost. Therefore, at the end I had to revise a lot of the code to connect the back-end to the front-end. And, we as the backend only mentioned to them to use ‘axios’ when they write code, no additional details. I realized how important communication is and how it has to be improved.

I was set with the decision of finishing the project, therefore I think I was not able to check with all the team members if they understand what I have been revising. We started to revise code from Day 11 out of Day 14; however, it took all four days to revise everything. In those four days, all of us lacked sleep, were so tired and annoyed of why the code was not working as what we expected. But, once we finished we were relieved and satisfied with the quality of our project. It was quite a long journey for all four of us who are not majoring in Computer Science. We did not have a real break for 14 days. I would like to say thank you to my team members and I am excited to make an advanced project for our next project (which is a 4 week project that is coming up in few days).

I had a doubt of changing my career because I think my career path has been built well in the hospitality industry. Due to Covid-19 and my desire to learn more, I ended up learning computer science and I actually enjoy every single moment I do this. I rarely study all night while I was in college and my sleep pattern was usually around 10pm to 6am; however, nowadays I usually sleep at 2am just to finish writing code or review everything I learned from the day’s lesson. I was surprised in myself that I can study this hard in my life. I believe in effort and consistency and I will try my best to learn more from this bootcamp.

--

--

--

Consistency achieves everything https://github.com/paigekim29

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

test this medium post

Frontend Weekly Digest #252 (21–27 March 2022)

Leet Code 1 Two-Sum

McKinley Beach Lot 3s5s, Siding Going Up

McKinley Beach Lot 3s5s, Siding Going Up

test this medium post

How to Create Interactive Charts with Simple HTML

Frontend Weekly Digest #43 (22–28 January 2018)

Static Analysis of JavaScript applications with SonarQube

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joo Hee Paige Kim

Joo Hee Paige Kim

Consistency achieves everything https://github.com/paigekim29

More from Medium

Understanding JavaScript for the Future!

JavaScript Block Scope V/S Function Scope

JavaScript Simplified — Variables

Understanding Selection Sort Algorithm (in JavaScript!)