Cloud-Bookstore(구름책방)

  • Team Name : KUDAPACH
  • Project Name : Cloud-Bookstore(구름책방)
  • Team Members : 김주희(팀장), 최상혁, 추성엽, 조한준
  • Deployment Link : cloud-bookstore.com
  • Service Presentation: link

Project Introduction

Nowadays, people carry around a kindle (a small hand-held device used for reading books) or a smartphone to browse through a library and read books online. I see people use these everywhere; when on the way to work, while having lunch, going home and more. With this concept, we wanted to create a Web Novel Service Application. Unlike any other website, “Cloud-Bookstore” allows the user to debut themselves as an author easily (without any red tape or the complications) and allows everyone that uses the application to freely communicate.

Stack Introduction

Deployment

Flow Chart

Service Demonstration Gif

  • Please check our link to check ‘Responsive’ mode and more details!
  • Landing Page
  • Main Page
  • Category
  • Novel List
  • My Page
  • Setting

Role

  • Team Leader

Position

  • Full Stack

Stack

  • TypeScript, Node.js, express, TypeORM, PM2, Amazon Web Services(AWS)-S3, CloudFront, EC2, Elastic Load Balancer, RDS, Route53, Certificate Manager, Docker, React, React Hooks, React Router, react-calendar, react-scroll, react-share, react-icons, HTML, CSS

Contributions

Basic

  1. Idea Planning
  2. Project flow, task cards creation and management

Back-end

  1. Initial Setting — ESLint, Prettier, TypeScript
  2. schema configuration
  3. Deployment through AWS
  4. Docker configuration
  5. Configure APIs
  6. Configure routes
  7. Create models
  8. Configure controllers boilerplate
  9. Category filter function
  10. Create/Edit/Delete novel function
  11. Create/Edit/Delete novel comment function
  12. Like/Unlike novel function
  13. Create novel episode function
  14. Cloud History accumulation/deduction function
  15. Change nickname function
  16. Code review and refactoring

Front-end

  1. User Cloud History — Accumulation/Deduction function and Responsive Web Design
  2. Change nickname function and Responsive Web Design
  3. Novel list — component separation and router
  4. Novel list —novel introduction, novel episode, last read episode function and Responsive Web Design
  5. Novel list — Like/Unlike Novel function and Responsive Web Design
  6. Novel list — Share function (Share to Media Outlets — Email, LinkedIn, Line, and more) and Responsive Web Design
  7. Search function
  8. Logout User Function and Responsive Web Design
  9. My Page — Novel Episode Update and Delete function
  10. Code review and refactoring

Reflection

For this project, I was the Team Leader of three members and the Full-Stack Developer. As a team, we decided to implement or use a new stack that applies in both front-end and back-end. We looked for a stack that can match both the front-end and back-end, we came upon TypeScript. After we discussed and decided to proceed with TypeScript in the back-end, we had a little bit of a difficult time. When we used TypeScript with Sequelize, we encountered some difficulties which led to more research with how TypeScript works with Sequelize. According to Sequelize: “As Sequelize heavily relies on runtime property assignments, TypeScript won’t be very useful out of the box. A decent amount of manual type declarations are needed to make models workable.”. Thus, we decided to apply another stack, TypeORM instead of Sequelize. We were going to use MySQL, TypeScript, and Node.js which was all supported by TypeORM, so TypeORM was perfect. Since we already learned and used Sequelize in the last project, TypeORM was not that difficult to use in the back-end given its usage with SQL. We had a difficult time at the beginning with the configurations, but after that, everything else was seamless as we were able to research and look for references on their documentation and on Google. There were some parts where I couldn’t find the answer to, but with the use of the console and Postman (and not giving up), I was able to figure things out. I also wrote about it in one of my other blog posts so that I can look back at it and others can use it to review their code if they were ever stuck in the same issue. Another new stack that we used in the back-end was Docker. In the last project, it was difficult to check the values in the front-end from the server, so we decided to build a docker image. Every team member would pull that image and open it in their laptop. However, since we had already deployed certain parts to AWS (Amazon Web Services) we ended up using docker in AWS EC2 ubuntu environment. We built images with Node.js environment and push it to the Docker hub and pull that in the EC2 ububntu environment.

For the front-end, we used React Hooks. The most important thing that I learned from the front-end was the importance of being able to properly divide components and connecting it to React Router while having responsive web design. The motivation of making the application was from people reading novels/books through the use of smartphones (mobile), so we decided to make our application have responsive web design so that users can access and use our website with any platform (Either web or mobile). In order to do that, we had to think about how components should be divided. Without proper division, it would be difficult to adjust certain widths or heights once it becomes responsive. Consequently, our application has a lot of functions compared to any other projects that we have ever done before. So we definitely had to find a way to divide the components properly in order to effectively write and edit code. By having multiple smaller components, we had to think about how to properly implement react-router. If we put the route in the wrong component, the components would end up overlapping one another. Before this project, I thought that I had already known how to use React. But what I knew was only the tip of the iceberg. I definitely had a lot more to learn and gladly, with this project, I was able to practice more and learn React better. With this project, I learned how to use React and use its core benefit and advantage of components. Since we are doing responsive web design and repetitive design patterns, we could keep reusing the code through components. I know responsive web design requires time to write code, but I did not expect it to take awhile because of the massive amount of devices I had to account for.

As the Team Leader, I can say that I am proud of the output that my team and I made. We were first insecure of how much we could actually finish and achieve, but in the end, we were able to successfully apply and implement all of the goals, functions and plans we ever thought of. Though, there were times that I felt bad for my team because from the moment we started our project, we never really had the proper rest period to get our energies back. Though, without those sacrifices and hard work, we wouldn’t have had the output we achieved.

I started this bootcamp in October 2020. Today is March 16, 2021 — I am in the last week of the bootcamp and I cannot believe of how far I have come. Before joining Code States, I was a novice in web development where I had only picked up a couple of free online courses and lessons. Now, after the 6 months of continuously coding and learning everyday, I believe that I have grown. With this project, I researched and applied new stacks to the point that I feel a sense of growth and accomplishment. Having learned new stacks and tools that I can use in my career, alongside my already extensive knowledge in JavaScript and other stacks, I believe that I can take on the next step. I am excited to start my career as a web developer.

--

--

--

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

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

Recommended from Medium

‘Stored Procedure’ Structure in SQL Server

Software for the Soul

Setup a Docker environment using Vagrant

Don’t “be” a Metaverse, build for the public one.

Cloud Migration Benefits for Online Businesses

Pointers in Depth

KYVE. Mission Korellia

8 VS Code Plugins To Improve Your Productivity

Laptop and desktop computers on desk

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

To Function Or Not To Function

DOES THE ALGORITHM MAKE THE DECISION?

Does Technology Really Influence Everything?

Nutrition Introduction