End of 4th sprint - ex4

.github/workflows/main.yml

@@ -11,7 +11,6 @@ on:
       - main-Ex3
       - main-Ex4
       - main-Ex5
-      # TODO: Add more main-ExN branches as we need for assignments
 
 jobs:
   # ----- Build & tests the CPP server -----

.gitignore

@@ -36,7 +36,7 @@
 # CLion config
 .idea/
 # build, cmake folders
-server_cpp/build/
+**/build/
 server_cpp/cmake-build-debug/
 cmake-build-debug/
-/web_server/node_modules/
+**/node_modules/

README.md

@@ -1,19 +1,18 @@
 # Gmail-AdvancedSystemProgramming
 Daily meeting summaries are uploaded to `Issues` tab
-## Dear TA please check main-Ex1 for the final version of Ex1
-## Dear TA please check main-Ex2 for the final version of Ex2
-## Dear TA please check main-Ex3 for the final version of Ex3
+Roee's miluim service documents are uploaded to `Issues` tab if needed, Tzvika was informed about it.
+
+## Dear TA please check main-Ex4 for the final version of Ex4
 
 ---
 
 ## Table of Contents
 - [Running server and client](#testing-and-running)
   - [Getting started](#getting-started)
   - [Testing bloom filter server and python client](#to-test-the-python-client-and-bloom-filter-server) 
-  - [Running the web server](#running-the-servers)
-
-- [Screenshots & routes examples](#screenshots)
-  - [Ex3](#ex3-screenshots)
+  - [Running as web application project](#running-the-entire-web-app)
+  - [env variables](#env-variables)
+- [Screenshots](#screenshots)
 - [Useful links](#useful-links)
   - [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/tree/main-Exe/server_cpp) 
   - [Python client README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/python_client/README.md)
@@ -28,32 +27,30 @@ First clone the project
 git clone https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming.git
 cd Gmail-AdvancedSystemProgramming/python_client
 ```
-And build it
-```bash
-  docker-compose build
-```
+**If you want to change the configuration (ports, names, bloom filter integers etc.) you can do it in dockerfiles 
+and docker compose.**
 
 ### To test the python client and bloom filter server
-**Make sure you already cloned the project and built it using docker compose**
+This will build and run only the test related containers (CPP server, gtest, python test)
 ```bash
-  docker-compose run --build --rm gtest
-  docker-compose run --build --rm test_client
+  docker-compose --profile tests up --build
 ```
 
-#### Running the servers
-**Make sure you already cloned the project and built it using docker compose** </br>
-In case you want to change any configuration value (port, bloom filter integers etc.) change the relevant dockerfile or docker compose file. </br>
-Changing the port and the name of the cpp server also requires changing models/blacklist.js global vars (since we shouldn't include .env files)
-
-- To run the web server and bloom filter server
+### Running the entire web app
+This will build and run only the web application related containers (React, Node.js, CPP server)
 ```bash
-  docker-compose up web_server
+  docker-compose --profile web_app up --build
 ```
-- To run the python client 
+
+### env variables
+In Node.js and React root folders you can find .env files with default values to help you check the project.</br>
+In a real world application these wouldn't be uploaded, we did it for easier set up for the checkers :)
+
+### Running the python client
+**NOTE: The instructions didn't ask to run the python client and express server together using the same command**
 ```bash
-  docker-compose run python_client
+  docker-compose run client --build
 ```
-**NOTE: The Ex3 instructions didn't ask to run the python client and express server together using the same command**
 
 - Remainder, to exit the container gracefully use
 ```bash
@@ -63,26 +60,25 @@ control+c
 ---
 
 ### Screenshots
-#### Ex3 screenshots
 <details>
-<summary>Click to expand Ex3 screenshots</summary>
+<summary>Click to expand Ex4 screenshots</summary>
 
-<img src="screenshots/ex3/curl runexample1.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample2.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample3.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample4.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample5.png" height="50%" alt="">
+<img src="screenshots/ex4/light_login.png" width="50%" alt="light_login">
+<img src="screenshots/ex4/dark_inbox.png" width="50%" alt="dark_inbox">
+<img src="screenshots/ex4/light_compose.png" width="50%" alt="light_compose">
+<img src="screenshots/ex4/dark_reading.png" width="50%" alt="dark_reading">
+<img src="screenshots/ex4/dark_signup.png" width="50%" alt="dark_signup">
 
 </details>
 
-For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex3/screenshots/ex3)
+For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex4/screenshots/ex4)
 
 ---
 
 ## Useful links
-- [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/tree/main-Exe/server_cpp)
-- [Python client README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/python_client/README.md)
-- [JavaScript server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/web_server/README.md)
+- [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/server_cpp)
+- [JavaScript server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/web_server/README.md)
+- [React frontend README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/frontend/README.md)
 
 ---
 

docker-compose.yml

@@ -1,18 +1,39 @@
 services:
+  # React frontend
+  web_front:
+    profiles: ["web_app"]
+    build:
+      context: frontend
+      dockerfile: Dockerfile
+    container_name: react_frontend
+    depends_on:
+      - web_server
+    env_file:
+      - ./frontend/.env
+    ports:
+      - "${REACT_APP_PORT:-3000}:3000"
+    networks:
+      - gmail-net
+
   # Web server using JS express
   web_server:
+    profiles: ["web_app"]
     build:
       context: ./web_server
       dockerfile: Dockerfile
     container_name: web_server
-    ports:
-      - "3000:3000"
+    env_file:
+      - ./web_server/.env
     depends_on:
       - run_server
+    ports:
+      - "${NODE_PORT:-3001}:3001"
     networks:
       - gmail-net
+
   # Server itself (CPP)
   run_server:
+    profiles: ["web_app", "tests"]
     build:
       context: ./server_cpp
       dockerfile: Dockerfile
@@ -25,19 +46,23 @@ services:
       - "12347:12347"
     networks:
       - gmail-net
+
   # Server gtest
   gtest:
+    profiles: [ "tests" ]
     build:
       context: ./server_cpp
       dockerfile: Dockerfile_test
     container_name: gmail_tests
     # Prevent the use of terminal input during test runs
     stdin_open: false
     tty: false
+
   # Client (Python)
   python_client:
+    profiles: [ "client" ]
     build:
-      context: python_client
+      context: ./python_client
       dockerfile: Dockerfile
     # container_name: python_client
     depends_on:
@@ -51,19 +76,21 @@ services:
     command: [ "python", "main.py", "run_server", "12347" ]
     networks:
       - gmail-net
+
   # Client test runner (Python).
   test_client:
+    profiles: [ "tests" ]
     build:
-      context: .
-      dockerfile: python_client/Dockerfile.tests
+      context: ./python_client
+      dockerfile: Dockerfile.tests
     container_name: client_tests
     depends_on:
       - run_server
-    command: ["python","python_client/tests/test_client_unittest.py"]
+    command: ["python","tests/test_client_unittest.py"]
 
 
 volumes:
-  app_data:   # <-- define the named volume
+  app_data:
 
 networks:
   gmail-net:

frontend/.dockerignore

@@ -0,0 +1,21 @@
+# Node modules and build output should be created inside the container
+node_modules/
+build/
+dist/
+
+# Log files
+npm-debug.log*
+yarn-error.log*
+yarn-debug.log*
+*.log
+
+# Environment files
+.env
+
+# macOS/IDE files
+.DS_Store
+.vscode/
+.idea/
+
+# READMEs
+*.md

frontend/.env

@@ -0,0 +1,5 @@
+REACT_APP_API_URL=http://localhost:3001/api
+REACT_APP_PORT=3000
+REACT_APP_MAILS_PER_PAGE=10
+REACT_APP_NAME='Mail ASP'
+REACT_APP_DEFAULT_AVATAR=/profile_default.png

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:18-alpine
+
+# Copy and install dependencies
+WORKDIR /app
+COPY package*.json ./
+# and the app
+RUN npm install
+COPY . .
+# for developement time
+CMD ["npm", "start"]

frontend/README.md

@@ -0,0 +1,41 @@
+# React frontend
+
+## Setup & Running
+
+### Getting started
+First clone the project
+```bash
+git clone https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming.git
+cd Gmail-AdvancedSystemProgramming/python_client
+```
+And build it
+```bash
+  docker-compose build
+```
+
+### Running
+Note that the Node.js and Bloom filter servers are needed for using the React frontend
+```bash
+  docker-compose --profile web_app up
+```
+
+### env variables
+In Node.js and React root folders you can find .env files with default values to help you check the project.</br>
+In a real world application these wouldn't be uploaded, we did it for easier set up for the checkers :)
+
+
+## Screenshots
+<details>
+<summary>Click to expand Ex4 screenshots</summary>
+
+<img src="screenshots/ex4/light_login.png" width="50%" alt="light_login">
+<img src="screenshots/ex4/dark_inbox.png" width="50%" alt="dark_inbox">
+<img src="screenshots/ex4/light_compose.png" width="50%" alt="light_compose">
+<img src="screenshots/ex4/dark_reading.png" width="50%" alt="dark_reading">
+<img src="screenshots/ex4/dark_signup.png" width="50%" alt="dark_signup">
+
+</details>
+
+For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex4/screenshots/ex4)
+
+---