Milestone 2 Report

Executive Summary

1. Introduction

Getflix is an online commerce platform that helps users find a plethora of products they need and purchase them in an easy and straightforward way. Getflix removes the friction of the shopping experience by providing an easy-to-use interface on all major desktop and mobile platforms. Shoppers are able to find products with the means of semantic search, view product details and decide whether a product is worth it by reading comments by verified buyers. When their shopping cart is finalized, they can easily buy their products with debit/credit card. Getflix also gives the opportunity for buyers to track price changes so that they can strike better deals. In Getflix there are four types of users: Guest, Customer, Vendor and Admins. Guest users are allowed to do basic operations such as searching products and viewing their details, as well as add products to their shopping cart. Customers are registered users that are allowed to continue with checking out process. They can also track their orders, ask for support from Admins and comment on products they have purchases. Vendors are allowed to setup an online shop where they can present their products on our platform. Admins maintain the system and make sure that operations go smoothly.

2. Work Done So Far

At the very beginning, we created a poll and decided to develop our API in the JavaScript ecosystem. One of our friends were quite experienced therefore he redirected us during the learning and development phase of the APIs. Before getting into the development phase, we decided which APIs will be developed and formed groups for the implementation. Each API is developed by two members and those members were also responsible for writing the tests. We then deployed our system to Amazon AWS and also created a description of our platform.

3. Future Work

After getting our first team-wide API development experience, most people now believe that we should put considerable amount of effort to get better at the web development technologies. Also considering the current pandemic crisis, it was harder to work on the same code together without being in the same physical environment. Also reviewing many different works of groups, and sustaining a proper communication of the progresses of these works was hard. But we believe that these experiences will grow us as a team and make each one of us an excellent team-player. When it comes to future work on the platform, we will definitely be working on improving the design of our platform. We will be learning new technologies for efficient development phase and continue to improve API's of our platform.

A brief and clear summary of the work done by each team member

Mehdi Saffar (Communicator)

I opened a poll for deciding the language to be used in the project. I volunteered to prepare a project template which comes with a README, comments about different parts and where things should go, examples of a route and how to call it from the frontend, and an example of unit test. I have also created a Husky pipeline to make sure that every commited code gets linted and formatted properly. I wrote and tested the Dockerfile. Through multiple announcements, and with the help of Furkan Nane, I describe how the template is to be used, how pull requests should be etc. I asked any questions we had on Piazza. I coordinated with my subgroup teammate Mehmet Umut to build our Location from map feature. I have extensively reviewed the pull requests of many of my peers, making sure that a certain standard of code quality is held. I have helped Asli and Aleyna on multiple occasions through a collaboration session over Visual Studio Code LiveShare, as well as many other members.

Burak Çetin

After our group decided on using Next.js first of all we had a meeting to decide on the API's we will use. At first I was assigned to a group who will work on Twilio API (An SMS based service.) but after consideration we decided it can be problematic if we run out of the free trial of this API. Then I decided to switch to Reddit API and started reading about it. At the same time I learned basics of JavaScript because I had no prior knowledge on the language. I decided to implement the front-end demo for this API as a simple post collector from country based subreddits. Since other API's we are including in the project are also about information about countries I think this was a good decision. I implemented basic GET requests to the reddit API and it collects top 10 posts from a designated subreddit. And I took the selected country information from the index.js page as the designated subreddit. After making sure it did not create errors on corner cases I implemented unit tests using Jest as our team decided upon.

Mehmet Umut Öksüz

After we decide JavaScript as our development language, I and Mehdi have taken Maps api as a subgroup. We were supposed to implement a map that shows country, language and currency of selected location. First I have researched various third party API's to see which can help us. Then I have decided that we can use positionstack. I have created a positionstack account and got an api key for us. Then using that api key I have implemented our api request and handled response. I also have written 9 unit tests to test any corner case. I have also reviewed other group members' codes and given feedback.

Ömer Faruk Deniz

In this assignment, I was partner of Furkan Nane in Covid-19 API. We decided to use this API considering the need for fresh information about the Covid-19 in the public. We took the data from the apify.com's Covid-19 API. In my part, I tried to give the Top 10 Death Statistics in the world in a bar chart. Considering the fact that I had nearly no experience in JavaScript previously, I first tried to learn the basics of JavaScript. Then I analyzed the previously written ReactJs codes in the web. In the code, I took the data from the API and found the top 10 countries with maximum number of deaths. Then I plotted them in a bar chart using chartjs. In the unit tests, I checked wheter the number of countries and number of death numbers is equal to 10. Also, I reviewed the code of my friends and helped them overcome the problems they have during the development phase.

Özdeniz Dolu

I have partnered up with Hande Şirikçi and we decided to add a price conversion route to our API. Together we have implemented the /api/getConvertedPrice. We have created a branch called locationcurrencyapi and worked on it. I have created the file practice_app/pages/api/getConvertedPrice.js. I have written the part in the index.js where we demonstrate how getConvertedPrice works. In the file practice_app/services/getConvertedPrice.js, I have created the functions getCountry,getCurrency,processIPInfo,getInfoFromIP and first part of getConvertedPrice. In the file /practice_app/pages/api/getConvertedPrice.spec.js.

Evaluation of tools and processes you have used to manage your team project

Next.js (by Mehdi Saffar)

After voting for using Javascript for the API assignment, I took the initiative of building the inital template for our project. We had to have a way to build frontend and backend easily. One way would be to create a server that serves only the frontend and another only for the backend. This setting would slow down the development as one would have to spin up two servers any time they would like to develop a new feature, and would have code spread over two projects. Instead, Next.js allows to have a unified environment where you could write client-side and server-side code easily. It also comes preconfigured with a testing framework so that adding unit tests is easy. Next.js uses React for the frontend which allows for declarative/functional approach for builiding user interfaces using a syntax very similar to that of HTML called JSX. Thanks to Next.js we were able to build a frontend and backend easily.

Jest (by Mehdi Saffar)

Jest is a popular Javascript unit-testing framework that comes bundled with Next.js. It works both on the client-side (browser) and server-side (node) environment. It is very easy to use and has provides a rich terminal output with satisfying colors. One neat thing about it is that it has a watch mode, which executes the tests every time a change in code is made. This allows for fast feedback which is especially crucical for TDD (Test Driven Development). It is also smart enough to only run the tests whose results are most likely to be affected by the current code change.

Husky (by Mehdi Saffar)

Husky is a Javascript package that allows developers to insert git hooks into their Javascript project. With the power of Husky, it is possible to do some processing when a developer makes some changes to the code and commits it. In our case, I used Husky to enforce code quality and format with eslint and prettier .

Eslint (by Mehdi Saffar)

ESlint is a linting tool for Javascript. It prevents common code problems by analyzing the source code and pattern matching against its continously increasing database. Not only does it warn for code mistakes, by reporting what is wrong with and where it occured, it also allows to fixing mistakes automatically if it knows that it is safe to do so. I have used ESLint with its autofix mode to get rid of a certain class of problems, and have added it to the Husky pipeline.

Prettier (by Mehdi Saffar)

Prettier is an opinionated Javascript formatting tool. With a single command, it goes through all the files and formats them according to strict rules. This removes any trailing whitespaces, breaks down long lines into shorter neater lines and much more. It is part of our Husky pipeline which guarantees that everyone's code looks the same, improving readability of both our code and the git diffs, since it prevents commits that only contain formatting difference.

Docker (by Mehdi Saffar)

Docker is containerization tool that we use for deploying our app. With a simple Dockerfile description, we are able to create a clean, predictable, reproducible environment for our app. By publishing the image to Dockerhub, we are able to deploy our app to AWS EC2 instance. It is easy to use and we practically only had to use two commands, one for building an image and one for running it.

Github Pull requests (by Mehdi Saffar)

Github Pull requests is probably the best tool we have used for this project team. Once a member finishes developing a feature or subfeature and testing it, they can easily open a pull request to merge that branch into master. Through its slick and modern interface, the developer is able to request its peer to review their work. We have asked that every one who opens a PR must provide a clear title, description and a test report. I have reviewed many pull requests and I love the Github interface for doing so. By going into the Files Changed tab, I am able to see exactly which lines changed when compared to master. I am able to comment on a specific line or even a group of lines in one go, which makes the feedback very specific and localized. I also like that it provides a Review session workflow which considers all review comments as part of one atomic review session. Once review is done, it gives the choices between simply commenting, approving PR or requesting changes. This allowed us to keep a certain standard when it comes to our code quality.

Reddit API (by Burak Çetin)

Reddit API is a really good starting point for someone who is new to REST API's and similar concepts. It is doucumented well with an active community on /r/redditdev where one can ask questions and see example projects. Also, as long as your script do not add posts or comments to reddit forums there is no need for an API key so this also lowers the knowledge barrier for entry. Though I used a really small poriton of the data provided by the API about posts one can parse or collect a lot of real world text data through reddit API without hassling with web crawlers.

PositionStack (by Mehmet Umut Öksüz)

To implement our map functionality we decided to use PositionStack API which is a Rest Api for forward geocoding and reverse geocoding. It can be used freely up to 25.000 requests per month. We got a free API key and used its reverse geocoding feature in our implementation. PositionStack's reverse geocoding function returns a response in json format containing various information about location specified with coordinates as a query parameter. To get detailed data like language, currency one needs to set another parameter in query that is country_module. When we set country_module = 1 than API returns all data that we need. API Website can be reached here.

ChartJS (by Ömer Faruk Deniz)

To show the top 10 death statistics in the world, I used chartjs. It has a clean and tidy documentation and sample videos with a lot of easy-to-use features and different chart types.

API documentation and URL