Frontend rework for Cruise Screening

.gitignore

@@ -2,6 +2,9 @@ data/
 .idea/
 *.DS_Store
 src/backend/docker-compose-local.yml
+miniconda.sh
+es_data
+node_modules
 
 # Byte-compiled / optimized / DLL files
 __pycache__/
@@ -132,3 +135,29 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+
+## Frontend
+# dependencies
+frontendApp/node_modules
+frontendApp/.pnp
+frontendApp/.pnp.js
+
+# testing
+frontendApp/coverage
+
+# production
+frontendApp/build
+
+# misc
+frontendApp/.DS_Store
+frontendApp/.env.local
+frontendApp/.env.development.local
+frontendApp/.env.test.local
+frontendApp/.env.production.local
+
+frontendApp/npm-debug.log*
+frontendApp/yarn-debug.log*
+frontendApp/yarn-error.log*
+
+*storybook.log

README.md

@@ -20,7 +20,15 @@ This project contains four parts:
 
 As a minimum, you need to install the first two parts.
 
-### 1.1 Python Django Backend
+### 1.1 Fast installation for Ubuntu/WSL
+
+Replace placeholders (YOUR_PASSWORD, your-secret-django-key, etc.) in the script `setup_cruise.sh` with your actual configurations.
+```bash
+chmod +x setup_cruise.sh
+bash setup_cruise.sh
+```
+
+### 1.2 Python Django Backend
 
 Project was tested on Python 3.9+. It will not run on Python 3.8 and below because of type hints for generics.
 
@@ -45,7 +53,7 @@ Use pip to install requirements (you will need `g++` to install fasttext):
 npm install bulma-calendar
 
 
-### 1.2 Postgres database
+### 1.3 Postgres database
 
 [Install PostgreSQL](https://www.postgresql.org/download/)
 
@@ -136,14 +144,14 @@ DATABASE_URL=postgres://SYSTEM_USERNAME:YOUR_PASSWORD@localhost:5432/cruise_lite
 ```
 
 
-### 1.3 ElasticSearch and Search API
+### 1.4 ElasticSearch and Search API
 
 Check [backend API](src/backend/README.md) documentation to learn more about installation.
 
 In order to use [CORE search API](https://core.ac.uk/services/api) create a file `data/core_api_key.txt` and insert your API key.
 Next, change `SEARCH_WITH_CORE` to  `True` in [`cruise_literature/settings.py`](src/cruise_literature/cruise_literature/settings.py).
 
-### 1.4 Text to text API
+### 1.5 Text to text API
 
 It is a separate `flask` application that can be used to generate text predictions (question answering, summarisation) for a given text.
 It is not necessary and can be switched off in the [`cruise_literature/settings.py`](src/cruise_literature/cruise_literature/settings.py) by setting:
@@ -231,3 +239,30 @@ Run Django server:
 ```bash
 (cruise-literature)$ python manage.py runserver YOUR_IP:YOUR_PORT
 ```
+
+
+## 3. React frontend
+
+### Installation
+1. NPM instalation
+   Make sure you have npm installed!
+   - WSL: https://stackoverflow.com/questions/49919063/installing-npm-node-on-bash-on-ubuntu-on-windows-wsl-what-architecture-does-u
+2. Dependency installation
+```bash
+cd src/frontend/
+npm ci
+```
+
+### Running
+```bash
+cd src/frontend/
+npm start
+```
+The project should open at `http://localhost:3000/`
+
+### Testing
+```bash
+npm run storybook
+```
+
+Navigate to `http://localhost:6006` and view the component rendered with mock data.