Project: nextjs
Task (challenging): 1) Implement a Comment and Rating System where users can leave feedback on products only after completing a payment transaction. Store comments in DB. 2) On the product detail page, display the average rating of the product at the top, using classNames: .product-average-rating (with number inside). 3) When a user has purchased the product, display a form on the product page with classNames: .comment-form, .rate-input with five stars inside: (.rate-1-star, .rate-2-star, ... , .rate-5-star), , .comment-textarea, .comment-submit-button allowing users to submit their ratings and comments. 4) Display all comments in a list on the product page, with each comment showing the username, the rating, and the comment text, styled using classNames: .comment-item, .comment-username, .comment-rating(with number inside), .comment-text. 5) Every User can ONLY comment a product for one time 6) Create CSS files to beautify CSS. Constraint: DO NOT use a third-party UI library.