🖐 Delivered Bookbix Frontend ver1.0

.env.template

@@ -0,0 +1,16 @@
+# Web Application Environment Variables
+NODE_ENV = development
+CLIENT_PORT = 3000
+SERVER_PORT = 3000
+BACKEND_SERVER_PORT = 3001
+VITE_API_URL = "http://localhost:3001"
+
+# MongoDB Environment Variables
+
+DB_CLIENT_PORT = 27017
+MONGO_ROOT_USER = admin
+MONGO_ROOT_PASSWORD = admin
+MONGO_INITDB_DATABASE = bookbix
+MONGO_INITDB_USER = user
+MONGO_INITDB_PWD = password
+

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends" : [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ]
+}

.gitattributes

@@ -0,0 +1,7 @@
+# Handle line endings automatically for files detected as text 
+# and leave all files detected as binary untouched.
+* text=auto
+
+# Never modify line endings of our mongo scripts
+*.sh text eol=lf
+mongoscripts/* text eol=lf

.gitignore

@@ -8,10 +8,19 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+# Build files
 dist
+/dist/*
 dist-ssr
 *.local
 
+# Environment variables
+.env
+
+# Database files and Mongoscripts
+/data/*
+mongoscripts/*
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -21,4 +30,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120
+}

README.md

@@ -1 +1,64 @@
-# sec33_Group4_BookBix_Frontend
+# BookBix_Frontend 
+
+### Development Setups
+
+##### Docker up
+
+```bash
+docker-compose up -d --build && docker rmi $(docker images -f “dangling=true” -q)
+```
+
+##### Docker down
+
+```bash
+docker-compose down -v
+```
+
+##### Extension on VSCode 
+```
+Dev Containers
+```
+
+### First approach to the project
+1. ##### open you docker desktop 
+2. ##### run the shell script 
+```
+sh docker.sh # this command will docker-compose down then docker-compose up automatically
+```
+3. ##### re-check that your docker container ready in docker deaktop
+4. ##### install node_module
+```
+npm install # for your local development 
+```
+> noted: if you desire to put additional package from node_modules, you can do it! but remind yourself to run sh docker.sh again because you should ensure that devEnv in contaner should up to date with your desire ! 
+
+5. ##### try to make some runable changes on your code !
+6. ##### test on localhost
+```
+http://localhost:[PORT] # in this project PORT = 3000
+```
+
+#### Current tech list
+
+- front end
+<img align="left" alt="Typescript" width="40px" src="https://cdn.cdnlogo.com/logos/t/96/typescript.svg"/> 
+<img align="left" alt="React" width="40px" style="padding-right:10px;" src="https://cdn.cdnlogo.com/logos/r/63/react.svg" />
+<img align="left" alt="Vite" width="50px" style="padding-right:10px;" src="https://user-images.githubusercontent.com/89622162/216382527-be11e41a-1ed5-4b52-9da5-d6fdf5c19d11.png" />
+<br/>
+
+#
+
+- back end 
+<img align="left" alt="Typescript" width="40px" src="https://cdn.cdnlogo.com/logos/t/96/typescript.svg"/> 
+<img align="left" alt="mongoDB" width="40px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg" />         
+<img align="left" alt="NestJS" width="100px" style="padding-right:10px;" src="https://www.vectorlogo.zone/logos/nestjs/nestjs-ar21.svg" />
+<br/>
+
+#
+
+- Devops 
+<img align="left" alt="Docker" width="40px" style="padding-right:10px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" />
+<br/>
+
+
+## !! DO NOT TOUCH DOCKER FILE !!

docker-compose.front.yml

@@ -0,0 +1,18 @@
+version: '3.7'
+services:
+  vite-app:
+    container_name: vite-app
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: s1xz/bookbix-frontend
+    restart: unless-stopped
+    ports:
+      - '${CLIENT_PORT}:${SERVER_PORT}'
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      PORT: ${SERVER_PORT}
+      NODE_ENV: ${NODE_ENV}
+    working_dir: /app

docker-compose.yml

@@ -5,13 +5,49 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+    image: s1xz/bookbix-frontend
+    restart: unless-stopped
     ports:
-      - 3000:3000
+      - '${CLIENT_PORT}:${SERVER_PORT}'
     volumes:
       - .:/app
       - /app/node_modules
-    command: npm run dev
     environment:
+      PORT: ${SERVER_PORT}
+      NODE_ENV: ${NODE_ENV}
+    working_dir: /app
+    depends_on:
+      - backend-app
+    networks:
+      - backbone
+  backend-app:
+    image: s1xz/bookbix-backend:latest
+    ports:
+      - '${BACKEND_SERVER_PORT}:3000'
+    restart: unless-stopped
+    environment:
+      MONGODB_DBURL: mongodb://${MONGO_INITDB_USER}:${MONGO_INITDB_PWD}@db:27017/${MONGO_INITDB_DATABASE}?authSource=${MONGO_INITDB_DATABASE}
+      MONGODB_DBNAME: ${MONGO_INITDB_DATABASE}
       PORT: 3000
-      NODE_ENV: development
-    working_dir: /app
+    depends_on:
+      - db
+    networks:
+      - backbone
+  db:
+    image: mongo:4.0.2
+    restart: unless-stopped
+    ports:
+      - '${DB_CLIENT_PORT}:27017'
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${MONGO_ROOT_USER}
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_ROOT_PASSWORD}
+      MONGO_INITDB_DATABASE: ${MONGO_INITDB_DATABASE}
+      MONGO_INITDB_USERNAME: ${MONGO_INITDB_USER}
+      MONGO_INITDB_PASSWORD: ${MONGO_INITDB_PWD}
+    volumes:
+      - ./mongoscripts:/docker-entrypoint-initdb.d:ro
+    networks:
+      - backbone
+networks:
+  backbone:
+    driver: bridge

docker.ps1

@@ -0,0 +1,4 @@
+Remove-Item -Force -Recurse ./data
+docker-compose down -v
+docker-compose up -d --build
+docker image prune -af

docker.sh

@@ -0,0 +1,4 @@
+rm -rf ./data
+docker-compose down -v
+docker-compose up -d --build
+docker image prune -af

dockerfront.ps1

@@ -0,0 +1,3 @@
+docker-compose down -v
+docker-compose -f docker-compose.front.yml up -d --build
+docker image prune -af

dockerfront.sh

@@ -0,0 +1,3 @@
+docker-compose down -v
+docker-compose -f docker-compose.front.yml up -d --build
+docker image prune -af

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/books.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>BookBix</title>
   </head>
   <body>
     <div id="root"></div>

mongoscripts/00-init-mongo.sh

@@ -0,0 +1,16 @@
+#FOR WHOM TO USE/EDIT THIS SCRIPT
+#THE END OF LINE MUST BE LF, NOT CRLF
+echo '################ MONGO ENTRYPOINT START ################';
+echo 'CREATING USER:'$MONGO_INITDB_USERNAME;
+mongo -- <<EOF
+    use admin;
+    db.auth('$MONGO_INITDB_ROOT_USERNAME', '$MONGO_INITDB_ROOT_PASSWORD');
+    use $MONGO_INITDB_DATABASE;
+
+    db.createUser({
+      user: '$MONGO_INITDB_USERNAME',
+      pwd: '$MONGO_INITDB_PASSWORD',
+      roles: ["readWrite"]
+    });
+EOF
+echo '################ MONGO ENTRYPOINT END ################';

mongoscripts/01-customers.js

@@ -0,0 +1,62 @@
+db.customers.insertMany([
+  {
+    _id: ObjectId('000000000001000000000001'),
+    firstname: 'John',
+    lastname: 'Doe',
+    sex: 'Male',
+    birthdate: '1985-03-15',
+    username: 'johndoe85',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'johndoe85@gmail.com',
+    date_created: new Date('2022-12-01T10:00:00.000Z'), //Stored in ISO format
+    latest_device: 'WINDOWS - CHROME',
+  },
+  {
+    _id: ObjectId('000000000001000000000002'),
+    firstname: 'Jane',
+    lastname: 'Smith',
+    sex: 'Female',
+    birthdate: '1990-07-20',
+    username: 'janesmith90',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'janesmith90@gmail.com',
+    date_created: new Date('2022-11-15T11:30:00.000Z'),
+    latest_device: 'WINDOWS - CHROME',
+  },
+  {
+    _id: ObjectId('000000000001000000000003'),
+    firstname: 'Michael',
+    lastname: 'Johnson',
+    sex: 'Male',
+    birthdate: '1995-01-10',
+    username: 'michaelj95',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'michaelj95@gmail.com',
+    date_created: new Date('2022-10-20T09:00:00.000Z'),
+    latest_device: 'WINDOWS - CHROME',
+  },
+  {
+    _id: ObjectId('000000000001000000000004'),
+    firstname: 'Emily',
+    lastname: 'Brown',
+    sex: 'Female',
+    birthdate: '1992-06-05',
+    username: 'emilybrown92',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'emilybrown92@gmail.com',
+    date_created: new Date('2022-09-10T14:00:00.000Z'),
+    latest_device: 'WINDOWS - CHROME',
+  },
+  {
+    _id: ObjectId('000000000001000000000005'),
+    firstname: 'David',
+    lastname: 'Williams',
+    sex: 'Male',
+    birthdate: '1987-12-25',
+    username: 'davidw87',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'davidw87@gmail.com',
+    date_created: new Date('2022-10-20T09:00:00.000Z'),
+    latest_device: 'WINDOWS - CHROME',
+  },
+]);

mongoscripts/02-providers.js

@@ -0,0 +1,32 @@
+db.providers.insertMany([
+  {
+    _id: ObjectId('000000000002000000000001'),
+    username: 'provider1',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'provider1@example.com',
+    date_created: new Date('2023-02-04T12:34:56.789Z'),
+    organization_name: 'Provider Inc.',
+    locations: [
+      ObjectId('000000000004000000000001'),
+      ObjectId('000000000004000000000002'),
+    ],
+  },
+  {
+    _id: ObjectId('000000000002000000000002'),
+    username: 'provider2',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'provider2@example.com',
+    date_created: new Date('2023-02-04T14:12:43.456Z'),
+    organization_name: 'Provider Co.',
+    locations: [ObjectId('000000000004000000000003')],
+  },
+  {
+    _id: ObjectId('000000000002000000000003'),
+    username: 'provider3',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'provider3@example.com',
+    date_created: new Date('2023-02-04T09:23:11.111Z'),
+    organization_name: 'Provider LLC',
+    locations: [ObjectId('000000000004000000000004')],
+  },
+]);

mongoscripts/03-admins.js

@@ -0,0 +1,9 @@
+db.admins.insertMany([
+  {
+    _id: ObjectId('000000000003000000000001'),
+    username: 'admin1',
+    password: '$2a$12$rCMpOnOuZMulEy.SrzMH7.mx3gzWgwVh96EgIuKuvYXI7A.9SBJJK', //test123
+    email: 'admin1@example.com',
+    date_created: new Date('2023-02-04T15:06:22.333Z'),
+  },
+]);