Design and Planning
Rev 1.4 2022-12-08 - Sprint5 Version
We will use react-redux as frontend, django-sqlite3 as backend.
A simple Entity Relation Diagram for our database. Rectangles stand for entity sets, diamond represents the relation between entity sets, and numbers represent the cardinality constraints. The attributes for each entity is listed inside the entity set, with the Primary Key underlined. Weak entity set is represented with double lined diamond
A brief explanation about our E-R model:
- Comment and User have a many to one relationship as a user can write multiple comment, and each comment can be written by only one user.
- User, ShopItem, and Article(Review) form a ternary relationship, where User and ShopItem have a many to many relationship. For a given instance of User and ShopItem, there can only be one Article(Review) instance, shown with (0..1) cardinality.
- ShopItem and ShopItemDetail form a one to one relationship since there can only be one detail page for a specific ShopItem. ShopItemDetail is a weak entity set as there may be same ShopItemDetail values for different ShopItem.
- User is shown here through specialization to divide up seller and signedup user. In our case however, we will not be storing Seller information into our database, as we will not implement seller and only emulate it with garbage data.
Here is the relation schema diagram based on our E-R diagram. Rectangle represents a data table, with the schemas listed inside the rectangle. Primary keys are underlined, while foreign keys are represented through arrows outside the box. The schemas may be modified as we progress through the project.
- Log in page('/log_in')
- Sign in with email and password
- Alert and redirect to sign up page if the account credentials are not inside our database
- Sign up page('/sign_up')
- User signs up
- Inputs username, password, email, and height/weight as input
- Main page ('/home')
- Banner at the top to show hot items or advertisements from the sellers. If the user clicks the banner, it will redirect to a page with the items related to the banner post
- Trending list of items listed below the banner. User can filter the items to their needs
- Search bar at the nav bar allows user to search for items, or search for kpop stars to shop their looks
- Community link at the nav bar redirects to the community page
- Logged in user shown with 'Welcome,
{username}'. Redirects to my page when clicked
- Search page ('/search/:id')
- Shows results of the search
- Recommended items through ML listed below the search results.
- User can filter the search result to their specific needs
- Product page ('/product/:id')
- Show item details including average rating from previous buyers who have left a review of the product
- User can select color, quantity, and size according to their need
- Automatically recommends size to the user, using previous purchase history of other users(with height/weight information)
- Adds to users favorite list when clicking the 'heart' icon (add to favorites)
- Clicking 'Buy Now' will redirect to the payment page
- Clicking 'Add to cart' will add the item to the shopping cart, and user can browse for other items
- Scrolling down the page, the user will see reviews done by other people who have already purchased the product. Explore more button will show all of the reviews.
- Payment page ('/payment')
- User fills in data for shipping, and apply their credits to purchase the product
- Redirects to my page will successful order when pressing 'Buy with my credits'
- Alert the user if the user does not have enough credits when pressing 'Buy with my credits'
- My page ('/user/:id')
- List all the purchases and community comments of the user.
- When user clicks the listings in the purchases, it will redirect to the item page.
- When user clicks 'write a review', it will redirect to 'Review' page
- When user clicks a comment in the 'Community', it will redirect to the corresponding community post
- Community ('/community')
- Shows list of popular products with the corresponding review with most likes, and all the comments on the review.
- Explore more button will show all the reviews of the popular product
- Community Post ('/community/:id')
- Show all the comments and other details of the review post
- Redirects to the item page when pressing 'Purchase the look'
- New comment will be added when user types input and presses the 'comment' button
- Review ('/user/:id/review/:id')
- User fills out information such as title and description. Give a rating out of five
- 'Upload' button for the photo is used for user to upload their own photo wearing the clothes they bought
- 'Post your review' will redirect the user to the 'Community Post' with their review post now published.
- moreResultHandler(): Load more search results from server.
- navigateToSignup(): Navigate to SignupPage.
- navigateToLogin(): Navigate to LoginPage.
- editProfileHandler(): Popup the prompt to edit the profile, and when the user edits it and confirm, send to the server.
- navigateToPost(post_id: int): Navigate to PostPage with
post_id. - morePostHandler(): Load more posts from server.
- addCommentHandler(): Submit the comment to the server. If it succeeds, clear the comment input.
- navigateToItem(item_id: int): Navigate to ItemPage with
item_id.
- returnHandler(): Navigate to the previous page.
- moreReviewHandler(): Load more reviews from server.
- buyHandler(): Check the user’s credits from the server, and request the order to the server. If it succeeds, redirect to MyPage.
- navigateToItem(item_id: int): Navigate to ItemPage with
item_id
- openHandler(): Show all possible options when click the filter pill
- selectHandler(option: string): Toggle filter with
optionwhen it is clicked
- navigateToItem(item_id: int): Navigate to ItemPage with
item_id - paginationHandler(index: int): Switch the page when the pagination is clicked
- postReviewHandler() : Add the review to the database, and post the review to the community page
- navigateToPost() : redirect to the posted review in the community page
- submitHandler(): Check the input and request login to the server. When the login succeeds, redirect to previous visited page, or MainPage if there’s no previous visited page.
- submitHandler(): Check the input and request signup to the server. When the signup succeeds, redirect to LoginForm.
- cartHandler(): Add current item to the user’s cart.
- navigateToOrder(): Navigate to OrderPage.
- shippingFeeHandler() : Change the shipping fee state to $10 or $5
- buyHandler() : Check if the user has enough credit to purchase the item, and redirect to my page if order succeeds. If user does not have enough credit, alert the user that they do not have sufficient credit
- navigateToProductDetail() : Navigate to product detail page
- likeHandler() : Increment the like count when user presses like button
- postHandler() : Add the comment to the postComment component. Make sure page re-renders to update the comments
- navigateToMain: Navigate to MainPage.
- navigateToCommunity: Navigate to CommunityPage.
- navigateToSearch: Navigate to SearchPage.
- navigateToLogin: Navigate to LoginPage.
- navigateToMy: Navigate to MyPage.
- navigateToMain: Navigate to MainPage.
- navigateToReview(item_id: int): Navigate to ReviewPage with
item_id.
- navigateToPost(post_id: int): Navigate to PostPage with
post_id.
- uploadPhoto(): Select file and upload it to the server.
- submitPost(): Check the form and submit to the server. If it succeeds, redirect to corresponding PostPage.
| Model | API | GET | POST | PUT | DELETE |
|---|---|---|---|---|---|
| User | /api/signup/ |
X | Create new user | X | X |
| User | /api/signin/ |
X | Log in | X | X |
| User | /api/signout/ |
Log out | X | X | X |
| UserShop | /api/usershop/:user_id/ |
Get user's shop | X | X | X |
| ShopItem | /api/shopitem/ |
Get shopitem list | Create new shopitem | X | X |
| ShopItem | /api/shopitem/:item_id/ |
Get specified shopitem | X | Edit specified shopitem | Delete specified shopitem |
| ShopItem | /api/shopitem/:item_id/shopitemdetail/ |
Get details of specified shopitem | Create shopitemdetail on specified shopitem | X | X |
| ShopItemDetail | /api/shopitemdetail/:detail_id/ |
Get specified shopitemdetail | X | Edit specified shopitemdetail | Delete specified shopitemdetail |
| Review | /api/review/ |
Get review list | Create new review | X | X |
| Review | /api/review/:review_id/ |
Get specified review | X | Edit specified review | Delete specified review |
| Review | /api/review/:review_id/comment/ |
Get comments of specified review | Create comment on specified review | X | X |
| Comment | /api/comment/:comment_id/ |
Get specified comment | X | Edit specified comment | Delete specified comment |
The plan for our project implementation is based on user story. As the user should sign up and sign in at the service at first, they will be the first modules to be implemented. Then, User can approach the main page and search as he/she wants. After looking at the items, user should be able to purchase the items and check the current status or leave a review at the community for other users.
Update
Features left to implement
- All Done
- Minor bug fixes
| Page | Feature | Difficulties(1~5) | Time(mins) | Sprints | Persons | Comments |
|---|---|---|---|---|---|---|
| Main | Go to Sign up page | 1 | 30 | 3 | 심성원 | Done |
| Main | Go to Sign in page | 1 | 30 | 3 | 심성원 | Done |
| Main | go to search page | 5 | 300 | 4/5 | 김영인, 연태영 | Done |
| Main | go to the item page | 1 | 30 | 3 | 이태민 | Done |
| Main | show recommended items | 5 | 240 | 4 | 김영인 | Done |
| Main | Filter items | 5 | 240 | 4 | 김영인 | Done |
| Main | Show more Button | 1 | 30 | 4 | 이태민 | Done |
| Sign-up | Sign up and go to Main page | 2 | 60 | 4 | 이태민 | Done |
| Sign-in | Sign in and go to Main page | 2 | 60 | 3 | 이태민 | Done |
| Search | show all search results | 4 | 60 | 4 | 연태영 | Done |
| Search | go to Item page | 1 | 30 | 4 | 심성원 | Done |
| Community | go to Post page | 1 | 30 | 3 | 심성원 | Done |
| Community | show all the reviews enrolled | 4 | 80 | 3 | 연태영 | Done |
| Community | time stamp (x days ago) | 4 | 50 | 4 | 김영인 | Done |
| My | show all post and purchase notices | 5 | 120 | 3 | 김영인 | Done |
| My | go to write-review page | 1 | 30 | 3 | 이태민 | Done |
| write-review | write review and post it to community | 3 | 80 | 3 | 김영인 | Done |
| Review | Specific review you clicked | 4 | 90 | 3 | 김영인 | Done |
| Review | go to the Item page | 1 | 30 | 3 | 심성원 | Done |
| Item | Specific Item you clicked | 3 | 80 | 3 | 김영인 | Done |
| Item | go to Order page | 1 | 30 | 3 | 이태민 | Done |
| Item | Recommend similar products | 5 | 200 | 4/5 | 연태영 | Done |
| Item | Add item to Shopping Cart | 1 | 40 | 4/5 | 이태민 | Done |
| Item | Item color and size data get from backend | 3 | 60 | 5 | 심성원 | Done |
| Order | confirm purchase and go to My page | 5 | 30 | 3 | 김영인 | Done |
| Order | deny purchase and stay | 3 | 120 | 3 | 김영인, 연태영 | Done |
| Payment | Credit axios integration | 2 | 60 | 5 | 이태민 | Done |
Every components and modules will be tested. In each sprint, our team will implement the test modules by following frameworks. As given in the previous assignments, our team will accept the code coverage over 90% as success.
In Sprint 5, we have finished implementing front end components and pages testing to 81.81% test coverage. For the backend, we have also finished unit tests with coverage of 100%
- Test each components, pages, and individual parts
- React: Jest & React Testing Library
- Django: Python Unit test
Every APIs will be tested. As we already experienced in previous assignments, our team make tests based on mocking the function and click based on following frameworks. This will be done whenever we implement our new function.
- Test each API
- React: Jest & React Testing Library
- Django: Python Unit test
As Continuous Integration (CI) service automatically builds and runs tests for you in a separate environment, our team will user Travis CI and SonarCloud for integration test.
- Integration Testing: Travis CI & Sonar Cloud