[DRAFT] Javascript Landing Page

developers/academy/js/standalone/_want-stack/index.md

@@ -0,0 +1,62 @@
+---
+title: What is the WANT stack
+sidebar_position: 10
+---
+
+## <i class="fa-solid fa-square-chevron-right"></i> What is the WANT
+
+### <i class="fa-solid fa-chalkboard"></i> What is WANT 
+
+Weaviate, AI, Next.js and Typescript.
+
+The want stack is collection of technologies that simplify the process of build AI Native Applications.
+
+
+#### Weaviate
+
+Weaviate is a vector database, it gives you these benefits 
+- vector search
+- dynamic generative model selection (you don't get stuck)
+
+#### AI 
+
+- this ties heavily into everything else, AI is at the center of AI native, leveraging the flexibility of weaviate and teh vastness of its integrations, you can bring AI to your application from embeddings, to generative models to rerankers or recommenders. Without any tie in. The goal is to give you the most flexibility without the burden on choosing
+
+#### Next.js (or Nuxt.js)
+
+This brings modern web development, 
+
+
+#### Typescript
+
+Typescript.. add content
+
+
+
+### <i class="fa-solid fa-chalkboard"></i> Building WANT applications
+
+- Resources
+- Starter templates
+- Learning 
+
+
+[Embed Youtube Course]
+
+A vector search is also versatile. It can be used to search multiple data modalities (e.g. text, images, audio, etc.), and across multiple languages.
+
+
+## <i class="fa-solid fa-chalkboard-user"></i> Learning objectives
+
+import LearningGoalsExp from '/src/components/Academy/learningGoalsExp.mdx';
+
+<LearningGoalsExp />
+
+import LearningGoals from '/src/components/Academy/learningGoals.jsx';
+
+<LearningGoals unitName="which_search"/>
+
+## Questions and feedback
+
+import DocsFeedback from '/_includes/docs-feedback.mdx';
+
+<DocsFeedback/>

developers/academy/js/standalone/client-server/10_why-client-server.mdx

@@ -0,0 +1,58 @@
+---
+title: What is the client-server architecture
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import FilteredTextBlock from '@site/src/components/Documentation/FilteredTextBlock';
+
+
+## <i class="fa-solid fa-square-chevron-right"></i> What and Why
+
+### <i class="fa-solid fa-chalkboard"></i> What is the client-server architecture
+
+A client-server application is one that runs on a client device while accessing information from a remote server.
+
+In the context of building applications with Weaviate, this means you would have a server as an intermediary to handle all interactions with your database as opposed to interacting with your database directly from your client application.
+
+This section aims to guide you through how to do that as you build applications with the Weaviate Typescript v3 client: [weaviate-client](https://www.npmjs.com/package/weaviate-client).
+
+<!-- ADD slide -->
+<!-- ![Vectorization across multiple modalities](./_img/multimodal_example.png) -->
+
+
+### <i class="fa-solid fa-chalkboard"></i> Why client-server
+
+
+Besides the requirements of running the [weaviate-client](https://weaviate.io/developers/weaviate/client-libraries/typescript/typescript-v3#node-support-only), the client-server architecture is reliably more secure than interactions directly from the client.
+
+Having a client-server approach means you can optimize your use of Weaviate by implementing one or more of the following..
+
+- Load Balancing 
+- User and Session Management
+- Security related Middleware 
+
+<!-- coming soon [Add video on load balancing with Gatling] -->
+
+
+### <i class="fa-solid fa-chalkboard"></i> Using the weaviate-client 
+
+Install the client by following these instructions. A big benefit of using the new v3 client is the introduction of the gRPC protocol. A fast, more reliable platform to handle interactions with the database at scale. Unfortunately, gRPC does not support browser-based client development.
+
+The v3 client uses gRPC to connect to your Weaviate instance. The client supports Node.js, server-based development. It does not support browser-based web client development.
+
+
+In the next sections we'll look at how to build client-server applications with..
+- [Using backend web frameworks](./20_building-client-server.mdx)
+- [Using fullstack web frameworks](./30_fullstack.mdx)
+
+
+
+### <i class="fa-solid fa-square-chevron-right"></i> Best Practices
+
+As mentioned, it is recommended to use these,
+
+As you build applications it is important to think about the following 
+- Your API Tokens and where in your architecture they live
+- Sanitize and validate all user inputs
+- Implement CORS (Cross-Origin Resource Sharing) correctly

developers/academy/js/standalone/client-server/20_building-client-server.mdx

@@ -0,0 +1,95 @@
+---
+title: Using backend web frameworks
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import FilteredTextBlock from '@site/src/components/Documentation/FilteredTextBlock';
+import TSCode from '!!raw-loader!./_snippets/20_backend.js';
+
+
+## <i class="fa-solid fa-square-chevron-right"></i> Building backend web frameworks
+
+This approach involves having two separate tools. One to build you server application; ideally a backend framework and another to build your client application. For this example, we will be using [Express.js](https://expressjs.com/en/starter/hello-world.html)
+
+### <i class="fa-solid fa-chalkboard"></i> Building a server
+
+#### 1. Initialize a Node.js application
+
+To build a server, we will use Express as an example.
+
+In a new directory, run 
+```bash 
+npm init
+```
+#### 2. Install relevant project dependencies including the weaviate-client
+
+```bash
+npm install express dotenv weaviate
+```
+
+#### 2. Create your project credentials including..
+- Your Weaviate cluster URL and API key
+- Your Cohere API key
+
+and add them to your `.env` file.
+
+
+ <TabItem value="js" label=".env">
+    <FilteredTextBlock
+      text={TSCode}
+      startMarker="// START .env"
+      endMarker="// END .env"
+      language="js"
+    />
+  </TabItem>
+
+ok.. 
+
+#### 2. Initialize Weaviate 
+Paste the following in `config/weaviate.js` 
+
+ <TabItem value="js" label="weaviate.js">
+    <FilteredTextBlock
+      text={TSCode}
+      startMarker="// START weaviate.js"
+      endMarker="// END weaviate.js"
+      language="js"
+    />
+  </TabItem>
+
+Ok..
+
+#### 2. Create your server
+
+ <TabItem value="js" label="app.js">
+    <FilteredTextBlock
+      text={TSCode}
+      startMarker="// START app.js"
+      endMarker="// END app.js"
+      language="js"
+    />
+  </TabItem>
+
+ok.. 
+
+
+#### 5. Run your server with 
+In your terminal type 
+```bash
+node app.js
+```
+
+Your server should be running on `localhost:3000`
+
+
+
+### <i class="fa-solid fa-chalkboard"></i> Adding a client application
+
+With our server built, we can now make a call from a client application. We'll can create a basic client application with HTML and Javascript.
+
+
+
+Alternatively, in [Hoppscotch](https://hoppscotch.io/), 
+
+<!-- ADD stuff -->