# App Find – Frontend
## Find Android application alternatives that require less permissions.

This recommendation engine was developed to help privacy-concerned users to find alternatives for their Android applications.

## How does it work?

Topic modeling was applied to the application descriptions of about 571k Android applications to create a model that we used to assign topic IDs to applications. These topic IDs group similar applications together.

A single page application (SPA) was developed based on React and Redux, which consumes the metadata and recommendations from the backend. The backend itself is developed in Python and fetches data from a PostgreSQL database that contains all the data needed.

## Functions
- [x] Search and filter functions to browse for Google Play Store applications
- [x] Find alternatives on the application detail page that require fewer permissions
- [x] Compare our recommendation with Google's filtered application recommendations

## Repository Description
This repository contains the frontend part of the application. The other parts of the application can be found in other repos:

App Find Backend: https://github.zhaw.ch/neut/appfind-backend
App Find Deployment: https://github.zhaw.ch/neut/appfind-deployment
App Find Machine Learning: https://github.zhaw.ch/neut/appfind-machine-learning

## Frontend Setup
The required dependencies can be installed with a JavaScript dependency manager called yarn.

Yarn is available here: https://yarnpkg.com/. Like other JavaScript dependency managers, yarn leverages `package.json` files, which are defining all the necessary dependencies of the web application. In our case, the package.json file is in the root folder.

Execute the yarn commands based on the need:
- `yarn install` This command installs all dependencies required to develop the app locally.
- `yarn start` The command compiles all scripts and starts a server to serve the web application. It re-compiles on every change and reloads the browser for an interactive developer experience.
- `yarn build` This command compiles and builds for production usage, therefore removes all development dependencies.

To make the process of deploying to production easier, there is an environment file called “.env” in the root folder, where the API URL and basename of the application can be configured. The basename should only be set when deploying to a subfolder, i.e. http://example.org/app/.

REACT_APP_API_URL=http://localhost:5000/api/v1
REACT_APP_BASENAME=

## Pages
For the proof of concept three pages were created, namely Home, App Detail and Search.

### Home
The page called "Home" is the first page where a user lands on in the application. A user can navigate through a list of apps and apply filters to the list and sort them.

URL: https://appfind.cloudlab.zhaw.ch/

The initial list can be sorted and filtered with the interaction elements like dropdown menus and checkboxes. The following filters are available:
- Genre (the list is loaded from database)
- Price: Free or Paid

The following sorting options are available:
- Alphabetically ascending and descending
- Downloads ascending and descending
- Permissions ascending and descending

By clicking on one of the tiles, the "App Detail" page of the application is displayed.

### App Detail
The App Detail page provides more information about a specific app. It displays the recommendations of our recommendation engine, Google’s recommendation which have less permission than the clicked application and the general application details like screenshots and permissions.

It shows following information:
- **Introduction**
- Icon, App Name, Category, Developer Name
- Stats: number of permissions, number of downloads, rating
- link to the application on the Google Play Store
- **Our Recommendations**
These recommendations are made by our recommendation engine. The displayed apps require fewer permissions.
- **Recommendations by Google**
These recommendations are made by Google and are filtered to display only applications that require fewer permissions.
- **More apps from Developer**
This list of applications are displaying applications from the same developer.
- **Screenshots**
The drawer displays screenshots from the application.
- **Description**
This text contains the description of the application.
- **Permissions**
These framed texts represent each permission that is requested by the application.
- **Additional Information**
The basic information of the application is displayed, such as the last update and advertisement information.

### Search
The user can search for an app by typing a query in the header where a search bar is located.

After typing and sending the query to the API, the data gets loaded from the API and presented to the user with a list of app tiles, which are clickable to get more information about the specific app.