update readme and move codesandbox into it's own component

README.md

@@ -1,70 +1,110 @@
-# Getting Started with Create React App
+## Atlas Search Workshop
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Hello! 👋 Do you want to run an Atlas Search Workshop the easy way? Clone this repo!
 
-## Available Scripts
+https://www.atlassearchworkshop.com
 
-In the project directory, you can run:
+<br/>
+<div align="center">
+<img src="WorkshopWebSite.png" width="650"  />
+</div>
+<br/>
 
-### `npm start`
+In the web application, you'll find:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+- a Google document with step-by-step instructions
+- an embedded CodeSandbox (ready to fork for workshop attendees) with the code for the MongoDB Netflix Clone found at www.atlassearchmovies.com (https://github.com/khuaulme/AtlasSearchWorkshop2022)
 
-### `npm test`
+<br/>
+<div align="center">
+<img src="NetflixClone.png" width="650"  />
+</div>
+<br/>
+<p> By building out the MongoDB Netflix Clone application, you'll demonstrate all sorts of  complex, fine-grained full-text searches on your Atlas data.</p>
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Current features implemented in this Movie Search Engine demo application include:
 
-### `npm run build`
+- fuzzy matching
+- highlighting
+- autocomplete
+- relevance-based scoring
+- custom function scoring
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Future Atlas Search features to implement can include:
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+- [ ] facets
+- [ ] synonyms
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+<h2 align="center"><a href="netflixclone-xwaaq.mongodbstitch.com/">www.atlassearchmovies.com</a></h2>
 
-### `npm run eject`
+<p>The movie search application was created using:</p>
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+- React
+- MongoDB Realm for backend HTTPs endpoints and webhooks
+- The Atlas sample dataset of sample_mflix.movies
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+<h3>API Points of Integration</h3>
+This application is hosted entirely on Realm and calls 2 API endpoints:
+
+ * getProductsEndpoint in the Home.js page on line 24
+ * Suggestions_AC_Endpoint, used for autocompleted product names, in the Header.js component on line 17.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+<p><em>Currently this app is not suitable for mobile, but feel free to send a PR.</em> 😊</p>
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+<h3>Attendee Prerequisites:</h3>
 
-## Learn More
+- A MongoDB Atlas account. Get one for free <a href="https://www.mongodb.com/cloud/atlas">here.</a>
+- A recent version of Node.js and npm.
+- Atlas sample dataset
+- (Recommended) <a href="https://www.mongodb.com/try/download/compass">MongoDB Compass - GUI (optional)</a>
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+<p>This application is hosted entirely by MongoDB Atlas was created using:</p>
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- React
+- MongoDB Realm for backend HTTPs endpoints and webhooks
+- MongoDB's Atlas sample_mflix dataset
 
-### Code Splitting
+<h2>Workshop Attendees Will Need to:</h2>
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+<ol>
+<li> Load data to Atlas cluster:
+<ul>
+<li>database: <code>sample_mflix</code></li>
+<li>collection: <code>movies</code></li>
+</ul>
+</li>
 
-### Analyzing the Bundle Size
+<li> Create Search indexes.</li>
+<li> Create a Realm Application.</li>
+<li> Create 2 HTTP Endpoints inside of Realm.</li>
+</ol>
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+<h2>To Build and Run this Search Workshop Application:</h2>
 
-### Making a Progressive Web App
+1. Clone the repo.
+2. Navigate inside directory.
+3. Run <code>npm install</code> .
+4. Run <code>npm start </code> .
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+<h2>To Customize this Workshop:</h2>
+The workshop is all entirely on App.js with the following React components:
+<div style="display:flex;">
+<img src="Header.png" width="350"  />
+<img src="Footer.png" width="350"  />
+</div>
 
-### Deployment
+Feel free to customize for the event name and details, presenters, resources or even the git repo in the embedded code sandbox.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+<h2>Special Thanks </h2>
+<br/>
 
-### `npm run build` fails to minify
+<div style="display: flex;">
+<iframe src="https://giphy.com/embed/3ohhwkfYcpOyeuepqw" width="434" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><b>Brian Leonard</b> - In my 4+ years at MongoDB, I have never written a workshop that wasn't ripped off of Brian in some way. #BeLikeBrian<br></br>
+<b>Snehal Bhatia</b>- That Google doc, tho!</p>
+</div>
+<br/>
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Also please join our online <a href="https://developer.mongodb.com/community/forums/">MongoDB Community</a> to interact with our product and engineering teams along with thousands of other MongoDB and Realm users. <br/><br/>Have fun and happy coding!

src/App.js

@@ -1,9 +1,13 @@
 import React from "react";
-import SearchHero from "./images/SearchHero.png";
-import QRCode from "./images/QRCode.png";
+//components
+import QRCode from "./images/JPMC_QR_Code.png";
+import CodeSandbox from "./components/CodeSandbox";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 import AdditionalResources from "./components/AdditionalResources";
+
+//images
+import SearchHero from "./images/SearchHero.png";
 import SearchIcon from "./images/SearchIcon.png";
 import Compass from "./images/Compass.png";
 import Mflix from "./images/Mflix.png";
@@ -18,9 +22,9 @@ function App() {
             <div className="flex items-center mx-auto justify-between">
               <img src={SearchIcon} alt="search hero" className="mx-2 w-24" />
               <div className="font-noto text-center text-3xl">
-                Tutoriel: Premiers Pas avec MongoDB Atlas Search
+                Atlas Search: To Find it Fast, Look No Further
               </div>
-              <div className="ml-40 w-36 p-4 border-2 border-springgreen">
+              <div className="ml-40 w-36 p-2 rounded-full border-2 border-springgreen">
                 <img
                   src={QRCode}
                   alt="QRCode"
@@ -30,13 +34,12 @@ function App() {
             </div>
             <div className="flex">
               <img src={SearchHero} alt="search hero" className="mx-6 w-64" />
-              <div className=" mx-4 flow-root text-lg mt-10">
-                Avec Atlas Search, nous avons rendu le travail avec les données
-                encore plus facile en vous permettant de construire des
-                capacités de recherche puissantes, flexibles et sophistiquées
-                dans vos applications MongoDB! <br></br> <br></br>Au cours de
-                cet atelier, nous allons créer notre propre clone de Netflix en
-                utilisant la base de données{" "}
+              <div className=" mx-4 flow-root text-lg mt-4">
+                With Atlas Search, we have made it even easier to work with data
+                by allowing you to build powerful, flexible, and sophisticated
+                search capabilities into your MongoDB applications!
+                <br></br> <br></br>In this workshop, we will build out our very
+                own Netflix Clone using the{" "}
                 <a
                   className="underline decoration-indigo-500"
                   target="_blank"
@@ -45,12 +48,11 @@ function App() {
                 >
                   sample_mflix
                 </a>{" "}
-                disponible dans le sample dataset que propose Atlas. Nous allons
-                construire et combiner rapidement des paramètres de recherche
-                variés tout en implémentant le fuzzy-matching, l’autocompletion,
-                le highlighting et de nombreuses autres fonctionnalités de
-                recherche. En cours de route, nous approfondirons également les
-                analyseurs et les index de Lucene.
+                database in the Atlas sample dataset. We will quickly construct
+                and combine varied search parameters while implementing
+                fuzzy-matching, autocomplete, highlighting and many other search
+                features. Along the way, we'll also go deep on Lucene analyzers
+                and indexes.
               </div>
             </div>
           </div>
@@ -59,8 +61,8 @@ function App() {
         <div className="flex items-center mx-20 justify-evenly">
           <div className="mx-4 mt-10 w-1/2 text-lg">
             <div>
-              Le matériel et les installations suivants sont nécessaires pour
-              suivre cet atelier :
+              The following hardware and installations are required to complete
+              this workshop:
             </div>
             <div className="flex">
               <img
@@ -69,8 +71,7 @@ function App() {
                 className="mx-auto items-center w-20 h-20 my-auto "
               />{" "}
               <ul className="ml-10 mt-4">
-                1. Un ordinateur avec une connexion Internet et un navigateur
-                moderne.
+                1. local computer with internet connection and a modern browser
                 <br></br>
                 2.{" "}
                 <a
@@ -89,7 +90,7 @@ function App() {
                   rel="noopener noreferrer"
                   href="https://cloud.mongodb.com"
                 >
-                  Compte Atlas MongoDB et cluster gratuit
+                  MongoDB Atlas account and free cluster
                 </a>
                 <br></br>
                 4.{" "}
@@ -102,8 +103,8 @@ function App() {
                   MongoDB Compass (Optional)
                 </a>
                 <br></br>
-                5. L’application frontend ci-dessous est hébergée sur GitHub et
-                CodeSandbox.io et est prête à être utilisée.
+                5. The frontend application below is hosted on GitHub and
+                CodeSandox.io and sits ready for you to fork.
               </ul>
             </div>
           </div>
@@ -124,16 +125,8 @@ function App() {
           </div>
         </div>
       </div>
+      <CodeSandbox />
 
-      <div className="h-full w-100">
-        <iframe
-          src="https://codesandbox.io/embed/github/khuaulme/AtlasSearchWorkshop2022/tree/main/?fontsize=14&hidenavigation=1&theme=dark"
-          className="mt-10 w-11/12 mx-auto h-96"
-          title="festive-platform-gshdc3"
-          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-        ></iframe>
-      </div>
       <Footer />
       <AdditionalResources />
     </div>

src/components/CodeSandbox.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const CodeSandbox = () => {
+  return (
+    <div className="h-full w-100">
+      <iframe
+        src="https://codesandbox.io/embed/github/khuaulme/AtlasSearchWorkshop2022/tree/main/?fontsize=14&hidenavigation=1&theme=dark"
+        className="mt-10 w-11/12 mx-auto h-96"
+        title="festive-platform-gshdc3"
+        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      ></iframe>
+    </div>
+  );
+};
+
+export default CodeSandbox;

src/components/Footer.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Karen from "../images/Karen1.png";
-import Snehal from "../images/Snehal.png";
-import Idriss from "../images/Idriss.jpeg";
+import Rick from "../images/Rick.png";
+import Chai from "../images/Chai.jpeg";
 
 import Twitter from "../images/Twitterblue.png";
 
@@ -10,19 +10,19 @@ const Footer = () => {
     <div className="flex justify-evenly px-20">
       <div className="flex mt-10 text-black px-8 text-lg pb-2">
         <img
-          src={Idriss}
+          src={Chai}
           alt="search hero"
           className="mx-6 w-48 h-48 rounded-full"
         />
         <div className="flex flex-col pt-12">
           <div className="mt-6">
-            Idriss Ouazzani<br></br>Senior Solutions Architect
+            Chaitanya Varanasi<br></br>Senior Solutions Architect
           </div>
           <div className="flex">
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="https://twitter.com/youoldmaid"
+              href="https://twitter.com/trychai"
             >
               {" "}
               <img
@@ -31,7 +31,7 @@ const Footer = () => {
                 className="w-12 object-contain"
               />
             </a>
-            <div className="my-auto ml-2">@OuazzaniIdriss</div>
+            <div className="my-auto ml-2">@tryChai</div>
           </div>
         </div>
       </div>
@@ -65,19 +65,19 @@ const Footer = () => {
       </div>
       <div className="flex mt-10 text-black px-8 text-lg pb-2">
         <img
-          src={Snehal}
+          src={Rick}
           alt="search hero"
           className="mx-6 w-48 h-48 rounded-full "
         />
         <div className="flex flex-col pt-12">
           <div className="mt-6">
-            Snehal Bhatia<br></br>Solutions Architect
+            Rick Houlihan<br></br>Director, Developer Relations
           </div>
           <div className="flex">
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="https://twitter.com/youoldmaid"
+              href="https://twitter.com/houlihan_rick"
             >
               {" "}
               <img
@@ -86,7 +86,7 @@ const Footer = () => {
                 className="w-12 object-contain"
               />
             </a>
-            <div className="my-auto ml-2"></div>
+            <div className="my-auto ml-2">@houlihan_rick</div>
           </div>
         </div>
       </div>

src/components/Header.js

@@ -10,9 +10,9 @@ const Header = () => {
       </div>
       <div className="flex text-4xl mr-20 text-springgreen font-noto">
         {" "}
-        MongoDB .local Paris
+        MongoDB Day with AWS & Accenture
       </div>
-      <div className="flex text-2xl"> 5 Avril 2022</div>
+      <div className="flex text-2xl"> May 11, 2022</div>
     </div>
   );
 };