siwon.log

[Project] Hidden Gem

03/27/23 ~ 03/30/23

Siwon Kim's photo
Siwon Kim
·

5 min read

[Project] Hidden Gem

Table of contents

🍴 Hidden Gem: Share your favorite restaurants!

"Hidden Gem" refers to hidden, lesser-known restaurants or eateries that one is familiar with. Users can share information about their hidden gem by entering the URL containing the information and sharing it with others.

1. Project Period & Developers

  • 03/27/2023 ~ 03/30/2023

  • Onboarding Toy Project

  • Developers Information

강동현

김시원

김영기

조우필

@kangdh208

@Siwon-Kim

@youngkikim14

@Cho-woo-pil

2. Tech Stack

  • back-end

    • Python

    • Flask

    • MongoDB

  • front-end

    • javascript

    • jQuery

    • Bulma

  • deployment

    • AWS EC2

3. User Stories

Users can share information about their hidden gem by entering the Mango Plate URL containing the information and sharing it with others.

Users can sign up, log in, and log out of the website.

Users can press the "like" button on the hidden gem post.

Users can delete their hidden gem posts.

  • Login and Sign-up

    • Display Login and Sign-up buttons before logging in.

    • Display only the Logout button when logged in.

    • Logout option.

  • Restaurant Sharing Feature on Main Page

    • Crawling of Mango Plate website through the link provided by the user.

    • Crawling of the restaurant name, address, food category, and images.

    • Users can attach comments and ratings.

  • Like Button Feature

    • Like button for recommending restaurants.

    • Only one like per user is possible.

    • The button can be clicked again to cancel the like.

  • Delete Restaurant Post

    • Clicking the delete button removes the post.

    • Only the author has permission to delete the post.

  • Edit restaurant post

    • Show the post edit toggle on the top when the edit button is clicked

    • Only the author has the authority to edit

4. APIs

FeaturesMETHODURLRequestResponse
Writing postsPOST/api/posts{‘url’: url, ‘star’: star, ‘comment’: comment}{ data: [ { url: ‘#’, comment: ‘so good!’, star: 5 }] }
List all posts on the main pageGET/api/postsWhen reloading the main page{ data: [ { id: 1, name: ‘Fresh Kitchen’, url: ‘#’, img: ‘#’, address: ‘Seoul …’, comment: ‘so good!’, star: 5, like: 15 }, {…}, {…}, …] }
Deleting the postDELETE/api/posts{‘nickname’: nickname, ‘postid’: 1}None
Signing upPOST/api/register{‘user_id’: user_id, ‘password’: password, ‘nickname’: nickname}{ data: [ jwtToken ] }
Signing inPOST/api/login{‘user_id’: user_id, ‘password’: password}{ data: [ jwtToken ] }
Clicking Like button on each postPOST/api/posts{‘nickname’: nickname, ‘like’: 1}{ data: [ { nickname: ‘nick’, comment: ‘so good!’, star: 1 }, {…}, {…}] }
Editing the postPUT/api/posts{‘nickname’: nickname, ‘postid’: 1}{ data: [ { id: 1, name: ‘Fresh Kitchen’, url: ‘#’, img: ‘#’, address: ‘Seoul …’, comment: ‘new comment', star: 3, like: 15 }] }

5. Troubleshooting

1) Distinguishing Post Cards

  • Task

    • When deleting a post, the corresponding card was being deleted.

  • Issue

    • The system could not distinguish the cards and was deleting the first row on the database.

  • Solution

    • Assign an ID value to the store API

    • Utilize the default _id generated by MongoDB

    • When using db.stores.find(), the _id is an ObjectId type and cannot be serialized to JSON directly, so it needs to be converted to a string with str(_id)

    • Assign the ID to the button tag's value attribute so that cards can be distinguished by ID

2) Implementation of Like button for each post

  • Task

    • Each post should have a like button, and each user should be able to click it only once, and if clicked again, it should unlike it.

  • Issue

    • When a user clicks the like button, it needs to be updated in the database, and the updated value needs to be fetched from the database to reflect the change on the webpage.

  • Solution

    • Separate the functionality for displaying the number of likes on the webpage and updating the like count in the database.

    • Frontend: Simply update the number of likes displayed on the webpage when the user clicks the like button.

    • Backend: Store the updated like count in the database when the like button is clicked, and handle the case where a page reload is required to fetch the updated like count.

  • Issue

    • The number of likes keeps increasing infinitely.

  • Solution

    • Separate the cases of increasing and decreasing likes.

    • Save the ID of the store that each user has liked in the DB, and determine whether they have liked the store based on this value.

    • Decrease the number of likes if the user has already liked the store, and increase it if they are liking it for the first time. Also, save this information to the DB to handle cases where a reload is needed.

3) Post Editing

  • Task

    • Allow users to edit their comments and ratings on each post through a "Edit" button.

  • Issue

    • Difficulty passing variables in the pop-up window.

  • Solution

    • Implement a toggle on the update-box to call the edit page.

    • Store the post's database ID as a global variable to be used in other functions.

    • Implement the update function and pass the global ID, updated comment, and rating values to update the post.

4) Main Page and Login/Sign Up Page Integration

  • Issue

  • Solution

    • Use Flask's blueprint to connect the two backend files.

    • Divide the code into two backend files for convenient and organized coding and easy modification.

6. Further Improvements

  • The HTML button styles for the Like button were hardcoded for each case during the reload.

  • There is a 1-second delay when loading posts during the reload process.

  • Implement duplicate checks for ID and nickname during sign-up.

  • Add a save feature to the MySave page.

Flask FrameworkjQueryMongoDBBulmaaws ec2