🐶 PetWithU

Hi, we are team 'PetWithU'! 🤗

• 'PetWithU" is the final project team name and our service name consisting of students from the 41st Wecode Coding Boot Camp.
• It is an application that provides community services and sells pet products to users who have pets.
• We clone-coded the 'Today's house' web site.
  • 'Today's house' is an interior platform service launched by a Korean startup that provides all the services for interior design, from online housewarming contents to stores and expert construction services.

🖥️ Demo video

🐩 Our Service

• We use the social login to simplify the membership process to increase user accessibility and convenience.
• When user creates a feed post, user can tag products that purchased on the site so that other users can access product information.
• Users can view the promenade filtered by region, so they can quickly find local information on the promenade.
  • We use the map API to mark the location of the promenade as coordinates on the map.
• Users can view a lot of collected posts on a single page.

🗓 Period

2023/01/30 ~ 2023/02/10 (About 2 weeks)

👥 Team Members

Back-End

👑 Judy Choi (Product Manager)

Front-End

👑 SY Kang (Project Manager), KM Bae, NH Kwon

💻 Tech Stack

Frond-End

Back-End

Common

Communication

🖼️ Example

Show Images

!Images will be changed!

Page	Screenshot	Developer
DB Architecture/ Migration	Detail LINK	[BE] Judy Choi
Main Nav Bar Footer		[FE] KM Bae [BE] Judy Choi
Kakao Login	default.mov	[FE] KM Bae [BE] Judy Choi
Feed Main	default.mov	[FE] KM Bae [BE] Judy Choi
Feed Detail		[FE] NH Kwon [BE] Judy Choi
Feed Collection		[FE] KM Bae [BE] Judy Choi
Feed Create		[FE] NH Kwon [BE] Judy Choi
Search Products		[FE] KM Bae [BE] Judy Choi
Product detail		[FE] NH Kwon [BE] Judy Choi
Promenade Main		[FE] SY Kang [BE] Judy Choi
Promenade Detail		[FE] SY Kang [BE] Judy Choi
Promenade Collection		[FE] SY Kang [BE] Judy Choi
Carts	FE to be continued..	[FE] NH Kwon [BE] Judy Choi

📑 API Documentation

Postman Link

🛠️ Dev Details

Details

🗄️ Server & DataBase

• Set DB on AWS RDS to enable FE and users to access DB at any time.

👨‍👩‍👧‍👦 Users

Login / Sign Up

• Social login and sign in with Kakao SDK for JavaScript
• After login, use JWT instead of password for user authentication/authorization (to improve security)
• Encrypt user's password using Bcrypt and save it to DB
  • Manage user's account information more securely

Follow / Following

• Follow / Following between users

🦴 Products

Main page

• Today's products : Sort each category's products in descending order by sales volume and extract only the top 1 product
• All products : Sort all products in descending order by sales volume

Detail page

• View the details of the product

🖼️ Feed

• Authorization after user authentication by verifying the JWT of the signed-in user before all APIs are runned.

Main Page

• Efficient request from FE by using query parameters
• Pagination
  • In order to support Page Nation of FE, default 9 datas (per page) are extracted from DB and provided to FE.
    • It also reduces traffic overload and execution time (prevent delivering too much data at once)
• View only posts written by users who are followed by logged in users
  1. Get the user ID you follow.
  2. Sort the posts written by the ID by the latest order by the size of the pagination.
• Increase efficiency by using Flag to return only the information needed for Feed Main
• Like / Collection / Review
  • Click the Like and Collection button to see easily the results of the status change in FE (toggle)

Detail Page

• Like / Collection / Review
  • Click the Like and Collection button to see easily the results of the status change in FE (toggle)
• Review - Create / Read / Delete
  • User information is returned to FE when a reivew is created

Collection(Scraped posts) Page

• Increase user convenience by allowing users to view collected posts on a page

📝 Feed (Special Options)

Create post

• Bulk INSERT
  • Store large amounts of data in DB with Bulk Insert
    • Minimize execution time, increase efficiency by using only one query
• Multer & AWS S3
  • Multer middleware for image upload
    1. Store image file from FE to S3
    2. Store S3 image url to DB

Search Products

• Receive keywords from FE with request query and search in DB
  • Return up to 10 items by sorting product information including keywords order by sales volume

🏞️ Promenade

Authorization after user authentication by verifying the JWT of the signed-in user before all APIs are runned.
Displaying the location of the promenade using the map API (Kakao Map)

Main Page

• Efficient request from FE by using query parameters

• Increasing Query reuse when filtering by category (city, administrative district)

  • Minimize repeated use of similar SQL queries when viewing posts
    • Duplicate queries are declared with defaultQuery string only once, and then we joinned additional query

• Pagination

  • In order to support Page Nation of FE, default 9 datas (per page) are extracted from DB and provided to FE.
    • It also reduces traffic overload and execution time (prevent delivering too much data at once)

• Increase efficiency by using Flag to return only the information needed for Feed Main

• Like / Collection / Review

  • Click the Like and Collection button to see easily the results of the status change in FE (toggle)

Detail Page

• Store the information needed to use Kakao Map API in FE (place name, place ID, latitude, longitude)
• Like / Collection / Review
  • Click the Like and Collection button to see easily the results of the status change in FE (toggle)
• Review - Create / Read / Delete
  • User information is returned to FE when a reivew is created

Collection(Scraped posts) Page

• Increase user convenience by allowing users to view collected posts on a page
• Returns all the map information (place coordinates) of the collected post so that all place coordinates can be displayed on a single map.
  • Increase user convenience.

🛒 Carts

Authorization and authentication using JWT

• Verify logged-in user's JWT before all APIs are performed.

Add product to shopping cart / change quantity

• Implementing INSERT and UPDATE simultaneously within one API and one query using 'UPSERT'

Lookup Shopping cart / delete product in the cart

• Combine 'INNER JOIN' to get all information of the shopping cart with just one JWT (minimize information exposure and enhance security)
• Delete multiple shopping carts as a single query with Bulk Delete

💡 Improved Works

Read more

JWT is too weak...

• 💡 Social login & sign in with Kakao SDK for JavaScript
  • Improve both security and user convenience

Our DB is in only BE's local...

• Could not share same DB & Could not test our module in the same environment
  • 💡 All team members use one DB in any time with AWS RDS
  • 💡 Share one DB when uploading an image file with AWS S3

Inefficient FE-BE connection test

• Can run only one server at the same time

  • 💡 We changed port number of test branch

• We had to wait until our supervisor feedbacks to the pull request and merges to the main branch

• There are many sub branches. So when we had some module test, we had to checkout sub branches often

  • 💡 We made test branch & merge all sub branches to the test branch

• If the main branch and test branch are run at the same time, the debugger is attached to the test branch process instead of the main branch (can't debug).

• Switching test branches makes interrupt, also it's annoying to integrate the code.

  • 💡 Create an AWS EC2 instance and pull source code from the GitHub repository using git
    • Real-time testing is available

Bulk Insert / Delete

• We had to use same queries with different values several times.
  • 💡 Make values into one array and use bulk insert / delete

API Documentation

• I don't know what API I developed because I developed more than 20 😂
  • 💡 Let's try API documentation tool
    • Create Postman Team Workspace and invite team members
    • Check the updated API information in Postman

Spaghetti code 🍝

• Too many bugs 🐞
  • 💡 TDD (ex : Jest)
  • 💡 When reporting issues from FE to BE, report error status code and error message.
    • It is helpful to catch issue quickly

🤔 Future Works (Trouble Shooting)

Read more

• In the Dao Layer, Transaction(Query Runner) often works abnormally.

  • ☠️ The reason is unknown and the problem is not resolved... 😂

• When we tried VScode SSH remote debugging to AWS EC2 server, server responded very late.

  • ☠️ The reason is unknown...

• API Documentation Tool

  • Malform Header error is occured when Multer tested with Postman
    • 💡 Postman's own bug so we used Insomenia instead.
  • Is the Postman the best?
    • 💡 We can try other API documentation tool than Postman / Insomenia
      • ex) Swagger