Add frontend implementation for Reviewed!

ballerina-guides · Apr 29, 2024 · f27628f · f27628f
1 parent 9e90f3e
commit f27628f
Show file tree

Hide file tree

Showing 22 changed files with 6,818 additions and 0 deletions.
diff --git a/session-3/frontend/.gitignore b/session-3/frontend/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# 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,65 @@
 # Frontend implementation for Reviewed!
+
+## Overview
+
+This is the frontend implementation for Reviewed!. It consists of a React application that consumes Ballerina GraphQL services using Apollo Client.
+
+## Prerequisites
+
+- [Node.js version: v20.12.0](https://nodejs.org/en/blog/release/v20.12.0)
+- npm (version 10.5.0 or later)
+
+## Getting Started
+
+1. Install the required dependencies by running the following command:
+
+```bash
+npm install
+```
+
+2. Create a `.env` file and add the following environment variables:
+
+```bash
+VITE_GRAPHQL_ENDPOINT_HTTP=https://localhost:9000/reviewed
+VITE_GRAPHQL_ENDPOINT_WS=wss://localhost:9000/reviewed
+```
+
+3. Start the frontend application by running the following command:
+
+```bash'
+npm run dev
+```
+
+4. Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+
+## Deployment
+
+1. Create a production build by running the following command (Optional):
+
+```bash
+npm run build
+```
+
+2. Serve the production build by running the following command:
+
+- Serving the production build using NodeJS:
+
+  - Run the following command:
+
+  ```bash
+  npm run preview
+  ```
+
+  - Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+
+- Serving the production build using python:
+
+  - Run the following command:
+
+  ```bash
+  py -m http.server 3000 --directory dist
+  ```
+
+  - Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+
+  > Note: URL rewriting is not supported when serving the production build using python. (contents of ErrorPage.jsx will not render for invalid URLs)
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>