ballerina-guides · Xenowa · Apr 29, 2024 · Apr 30, 2024 · May 3, 2024 · May 3, 2024
diff --git a/session-3/frontend/.env b/session-3/frontend/.env
@@ -0,0 +1,6 @@
+VITE_GRAPHQL_ENDPOINT_HTTP=http://localhost:9000/reviewed
+VITE_GRAPHQL_ENDPOINT_WS=ws://localhost:9000/reviewed
+
+# For SSL Enabled endpoints
+# VITE_GRAPHQL_ENDPOINT_HTTP=https://localhost:9000/reviewed
+# VITE_GRAPHQL_ENDPOINT_WS=wss://localhost:9000/reviewed
diff --git a/session-3/frontend/.gitignore b/session-3/frontend/.gitignore
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/session-3/frontend/README.md b/session-3/frontend/README.md
@@ -1 +1,63 @@
 # Frontend implementation for Reviewed!
+
+## Overview
+
+This is the frontend implementation for Reviewed!. It consists of a React application that works with a Ballerina GraphQL backend. It uses the Apollo Client on the frontend to connect to the GraphQL backend.
+
+## Get Started
+
+There are two ways to instantly serve up the frontend application:
+
+1. Serve the application using NodeJS.
+
+```bash
+npx serve dist --single --listen 3000
+```
+
+2. Serve the application using Python.
+
+```bash
+python -m http.server 3000 --directory dist
+```
+
+> Note: URL rewriting is not supported when serving the production build using Python. Also, the contents of ErrorPage.jsx will not render for invalid URLs.
+
+- Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+
+## Running the Application in Development Mode
+
+### Prerequisites
+
+Install the following software.
+
+- [Node.js (version v20.12.0)](https://nodejs.org/en/blog/release/v20.12.0)
+- [npm (version 10.5.0 or later)](https://www.npmjs.com/package/npm)
+
+### Steps
+
+1. Install the required project dependencies by running the following command.
+
+```bash
+npm install
+```
+
+2. To change the backend endpoints, update the environment variables in the `.env` file.
+
+```.env
+VITE_GRAPHQL_ENDPOINT_HTTP=http://localhost:9000/reviewed
+VITE_GRAPHQL_ENDPOINT_WS=ws://localhost:9000/reviewed
+```
+
+3. Start the application.
+
+```bash'
+npm run dev
+```
+
+4. Open the browser and navigate to [http://localhost:3000](http://localhost:3000).
+
+5. To deploy the application, create a production build by running the following command.
+
+```bash
+npm run build
+```
diff --git a/session-3/frontend/dist/assets/header-logo-D8fjayuH.png b/session-3/frontend/dist/assets/header-logo-D8fjayuH.png
diff --git a/session-3/frontend/dist/assets/index-CelfHX13.js b/session-3/frontend/dist/assets/index-CelfHX13.js
diff --git a/session-3/frontend/dist/assets/index-Cp-0kh0u.css b/session-3/frontend/dist/assets/index-Cp-0kh0u.css
diff --git a/session-3/frontend/dist/assets/placeholder-C5SiT5C2.jpg b/session-3/frontend/dist/assets/placeholder-C5SiT5C2.jpg
diff --git a/session-3/frontend/dist/assets/quicksand-latin-400-normal-UA8GZWWY.woff2 b/session-3/frontend/dist/assets/quicksand-latin-400-normal-UA8GZWWY.woff2
diff --git a/session-3/frontend/dist/assets/quicksand-latin-400-normal-cOvQkyzV.woff b/session-3/frontend/dist/assets/quicksand-latin-400-normal-cOvQkyzV.woff
diff --git a/session-3/frontend/dist/assets/quicksand-latin-ext-400-normal-Dr17GbVs.woff b/session-3/frontend/dist/assets/quicksand-latin-ext-400-normal-Dr17GbVs.woff
diff --git a/session-3/frontend/dist/assets/quicksand-latin-ext-400-normal-dVGbDDrC.woff2 b/session-3/frontend/dist/assets/quicksand-latin-ext-400-normal-dVGbDDrC.woff2
diff --git a/session-3/frontend/dist/assets/quicksand-vietnamese-400-normal-CuU2vBN1.woff b/session-3/frontend/dist/assets/quicksand-vietnamese-400-normal-CuU2vBN1.woff
diff --git a/session-3/frontend/dist/assets/quicksand-vietnamese-400-normal-SBD_i_7S.woff2 b/session-3/frontend/dist/assets/quicksand-vietnamese-400-normal-SBD_i_7S.woff2
diff --git a/session-3/frontend/dist/favicon.ico b/session-3/frontend/dist/favicon.ico
diff --git a/session-3/frontend/dist/index.html b/session-3/frontend/dist/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reviewed!</title>
+    <script type="module" crossorigin src="/assets/index-CelfHX13.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cp-0kh0u.css">
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+  </body>
+
+</html>
diff --git a/session-3/frontend/index.html b/session-3/frontend/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reviewed!</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+
+</html>