Milestone 3 Report

1- Final project assessment

Introduction

Getflix is an e-commerce platform that connects vendors and customers in one single platform with a great user experience. Our platform lets vendors signup to our system and add their products. They are able to later edit or delete their products through their vendor page. When a product of theirs is bought, they can display the order in the orders section on profile page. Then, they can change the current status of any order.

Getflix is also a nice and friendly place for buyers. Customers can signup and login into the system and immediately start shopping. The homepage displays our best products in certain categories. As customers make orders, Getflix recommends more personalized products. Customers can add products to their shopping cart and decide to continue their shopping later. Customers may decide to add products to their wishlist and get notified of any price changes. This system also notifies buyers as their orders’ status changes.

Getflix cares about customer satisfaction. Thus, offers much functionality to make customers sure about their buying choice. Getflix uses a rating and reviewing system for products, however, only the people who have bought the item can make reviews and rates. This way, we make sure products are rated fairly. Also, customers can contact the vendors about their questions and any problems. Getflix has a nice messaging functionality and supports sending media files.

Milestone 1 and Milestone 2 Assessment

For the first milestone, we have focused on building our foundation firm and clean. Our main prioritization was to keep our backend endpoints documentation up-to-date, to fix our meeting notes format, pull request templates and pull request review-approve-merge cycle, and to complete the CI-CD process to make things easier for further milestones. Team members followed our best practices and the management became much easier.

In terms of functionalities, we have completed the sign-up page, login page, auto-login using tokens, search page, product page, profile page, shopping cart page. We created a trending products section in our landing page, created a product card to display products in packed form, designed the header to show current user’s information.

For the second milestone, we were much confident about our performance and productivity since milestone 1 was showing that our team was working hard and communicating efficiently. Our work started working on the components that received feedback. We focused on fixing our bugs,

We have delivered our major components timely in accordance with our plan. We have completed purchasing a product including adding and editing credit cards and addresses, search page functionality in the backend, product reviewing system and displaying in the product page, managing customer orders for vendors, profile page with addresses, credit cards, messages sections, product page with detailed information, email verification system and displaying a warning to unverified accounts, wishlist functionality with mock data.

Although we have created many pages and components, all teams focused greatly on User Experience when designing the subcomponents. We have changed our homepage to display products in categorical format because of feedbacks in milestone 1. We have improved our init process by showing a user-friendly loading page, started to increase using status update messages at the right-top corner of the page, enhanced token management system by injecting tokens in HTTP headers, created a mock proxy server in frontend for faster development experience

Final Milestone

For the final milestone, our team knew that we were going to be busy at this time of the semester, so we have greatly advantaged our decisions in previous milestones like implementing continuous integration pipeline in milestone 1, or focusing on user experience and not overlooking small details and hoping our customer would not notice.

Teams were confident in their acquired skills obtained through milestones 1 and 2, so we did not experience technical slowness. After milestone 2, we all have gathered in the lab session and discussed the deliverables for the final milestone. As we concretized the tasks, we made sure that our customers and we were on the same page. Then, teams started arranging their own meetings.

Previous milestones were focusing on components from the customer’s point of view. However, for the final milestone, we focus more on vendor-related pages and components.

The functionalities we have implemented are as follows:

• We have started using personalized product recommendation system, this is the first time we have included data science into our system. We have displayed these recommended products on our homepage.
• We have created a notifications section on the profile page to let customers know about the change in their order status and any price change of products that are added to the wishlist.
• We have created a vendor page to display fundamental vendor information like title, description, image, and rating. Also, the page displays the main products of the vendor in a grid-based view. The page is designed for both customers and vendors so it normally shows vendor’s info but it enables the vendor owner of the page to edit it. The owner can add new products, edit existing products, edit its basic information in place, etc.
• To edit and add products, we have prioritized the user experience. A pop-up modal is shown and fills the information automatically from the clicked product.
• Messaging system that enables customers and vendors to connect and share information. Messaging functionality modal made accessible via Orders section and Vendor’s page. Previous messages can be accessed on the Profile page.
• Created an Orders page for Vendors that shows the current status of orders and it comes with functionality to change the status of orders.

Overall, we spent such a productive and amazing semester since we have practiced teamwork, realized the importance of communication, gained knowledge about software best practices, and obtained hands-on experience in many latest technologies.

2- Status of deliverables and evaluation of the deliverables

3- Activity stream implementation & W3C standard compliance

4- API documentation

5- User manual

6- System manual

Deploy on AWS

Requirements

• Docker

• Linux

• AWS

• gpg (GPG_PASSWORD is stored in Github Secrets)

• git

• Create an EC2 instance

  Steps

• Make sure that the EC2 instance has for name "instance"

• Make sure that it has the ports 80 (frontend), 8000 (backend) and 5432 (postgres) open in its Security Policy

• SSH into the instance and install Docker

• CD into the repo

• Execute the following:

./copy_backend_secrets.sh && ./encrypt_secrets.sh

• Merge master to deploy and push
• The .github/workflows will execute when pushed to deploy

Deploy on your local

Requirements

• Docker
• Linux
• git

Steps

To build the images from scratch please follow the commands below: IMPORTANT: For the purposes of testing, you can download the docker images from the drive link and continue from Step 4.

1. Clone the repo to your local and switch into it

git clone https://github.com/bounswe/bounswe2020group2 && cd bounswe2020group2

2. Download and copy .env.production and .env.development to ecommerce/backend

cp .env.development ecommerce/backend
cp .env.production ecommerce/backend

3. Build the backend and frontend images

docker build ecommerce/frontend -t frontend --build-arg REACT_APP_API_URL="http://localhost:8000"
docker build ecommerce/backend -t backend

4. Load docker images (skip if you are not in testing)

docker pull postgres
docker load -i frontend.tar.gz
docker load -i backend.tar.gz

5. Run and setup/restore database

docker run --name database --net=host -e POSTGRES_PASSWORD=admin postgres
docker cp dump.sql database:/
docker exec database psql -U postgres -f /dump.sql

6. Run backend

docker run --name backend --net=host -e DEBUG=False -e DB_HOST=localhost backend

7. Run frontend

docker run --name frontend --net=host frontend

8. Open the browser and go to http://localhost

7 - A summary of coding work done by each team member

Team Member	Contributions
A. Furkan Varol
Aleyna Kara
Aslı Aykan
Burak Çetin
Furkan Nane
Hande Şirikçi
Mehdi Saffar (Communicator)	refactor the CI/CD pipeline workflow files to work with only one single instance, implement the frontend interface of the messaging system, implement the vendor user interface focusing on the profile page and the vendor orders, report a few bugs in backend (image url confusion, vendor_id vs user_id confusion), co-author vendor orders page with Özdeniz Dolu, co-author add/edit product modal with Özdeniz Dolu, continue implementing missing functionalities of Product List with Özdeniz Dolu, hide customer-related actions from Vendor user interface (such as add to shopping cart, add to product list, checkout...), co-author the vendor homepage with Özdeniz Dolu and Abdullah Yıldız, due to our EC2 instance being hacked the day before the demo, refactor backend and github actions to hide django SECRET_KEY from github and pass it as an environment variable to the CI/CD pipeline, collect a list of bugs in the frontend (> 15) and fix them before the demo, build Docker images of backend and frontend for the Submission Delivery Package, write the System Manual with Ömer Faruk Deniz for deploying locally and to AWS
Mehmet Umut Öksüz
Ömer Faruk Deniz	Implemented the password change endpoint, send message and get conversations endpoints both of which compose the direct-messaging system of the platform, implemented the semantic search functionality, fixed the user_id and vendor_id in the system. Fixed the system before the Milestone 3 due to an attack to the server and wrote the System Manual with Mehdi Saffar. Attended all of the meetings of backend, arranged meetings for the specific needs of other teams. Reviewed and refactored nearly all of the pull requests opened for the Milestone 3.
Özdeniz Dolu
Abdullah Yıldız
Murat Can Bayraktar
Bekir Yıldırım