diff --git a/Footer.png b/Footer.png new file mode 100644 index 0000000..45dd8e4 Binary files /dev/null and b/Footer.png differ diff --git a/Header.png b/Header.png new file mode 100644 index 0000000..158dbfc Binary files /dev/null and b/Header.png differ diff --git a/NetflixClone.png b/NetflixClone.png new file mode 100644 index 0000000..303cae6 Binary files /dev/null and b/NetflixClone.png differ diff --git a/README.md b/README.md index 58beeac..f92e0e3 100644 --- a/README.md +++ b/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: +
+
+ +
+
-### `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` +
+
+ +
+
+

By building out the MongoDB Netflix Clone application, you'll demonstrate all sorts of complex, fine-grained full-text searches on your Atlas data.

-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. +

www.atlassearchmovies.com

-### `npm run eject` +

The movie search application was created using:

-**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. +

API Points of Integration

+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. +

Currently this app is not suitable for mobile, but feel free to send a PR. 😊

-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. +

Attendee Prerequisites:

-## Learn More +- A MongoDB Atlas account. Get one for free here. +- A recent version of Node.js and npm. +- Atlas sample dataset +- (Recommended) MongoDB Compass - GUI (optional) -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +

This application is hosted entirely by MongoDB Atlas was created using:

-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 +

Workshop Attendees Will Need to:

-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) +
    +
  1. Load data to Atlas cluster: + +
    2. -### Analyzing the Bundle Size +
  2. Create Search indexes.
    3. +
  3. Create a Realm Application.
    4. +
  4. Create 2 HTTP Endpoints inside of Realm.
    5. +
-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) +

To Build and Run this Search Workshop Application:

-### Making a Progressive Web App +1. Clone the repo. +2. Navigate inside directory. +3. Run npm install . +4. Run npm start . -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) +

To Customize this Workshop:

+The workshop is all entirely on App.js with the following React components: +
+ + +
-### 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) +

Special Thanks

+
-### `npm run build` fails to minify +
+

Brian Leonard - In my 4+ years at MongoDB, I have never written a workshop that wasn't ripped off of Brian in some way. #BeLikeBrian

+Snehal Bhatia- That Google doc, tho!

+
+
-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 MongoDB Community to interact with our product and engineering teams along with thousands of other MongoDB and Realm users.

Have fun and happy coding! diff --git a/WorkshopWebSite.png b/WorkshopWebSite.png new file mode 100644 index 0000000..e1b5786 Binary files /dev/null and b/WorkshopWebSite.png differ diff --git a/src/App.js b/src/App.js index 00b22f9..2fcd51d 100644 --- a/src/App.js +++ b/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() {
search hero
- Tutoriel: Premiers Pas avec MongoDB Atlas Search + Atlas Search: To Find it Fast, Look No Further
-
+
QRCode
search hero -
- 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!



Au cours de - cet atelier, nous allons créer notre propre clone de Netflix en - utilisant la base de données{" "} +
+ 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! +



In this workshop, we will build out our very + own Netflix Clone using the{" "} sample_mflix {" "} - 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.
@@ -59,8 +61,8 @@ function App() {
- 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:
{" "}
    - 1. Un ordinateur avec une connexion Internet et un navigateur - moderne. + 1. local computer with internet connection and a modern browser

    2.{" "} - Compte Atlas MongoDB et cluster gratuit + MongoDB Atlas account and free cluster

    4.{" "} @@ -102,8 +103,8 @@ function App() { MongoDB Compass (Optional)

    - 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.
@@ -124,16 +125,8 @@ function App() {
+ -
- -
diff --git a/src/components/CodeSandbox.js b/src/components/CodeSandbox.js new file mode 100644 index 0000000..941c129 --- /dev/null +++ b/src/components/CodeSandbox.js @@ -0,0 +1,17 @@ +import React from "react"; + +const CodeSandbox = () => { + return ( +
+ +
+ ); +}; + +export default CodeSandbox; diff --git a/src/components/Footer.js b/src/components/Footer.js index 4130d9c..9f69554 100644 --- a/src/components/Footer.js +++ b/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 = () => {
search hero
- Idriss Ouazzani

Senior Solutions Architect + Chaitanya Varanasi

Senior Solutions Architect
{" "} { className="w-12 object-contain" /> -
@OuazzaniIdriss
+
@tryChai
@@ -65,19 +65,19 @@ const Footer = () => {
search hero
- Snehal Bhatia

Solutions Architect + Rick Houlihan

Director, Developer Relations
{" "} { className="w-12 object-contain" /> -
+
@houlihan_rick
diff --git a/src/components/Header.js b/src/components/Header.js index 6ca60a2..1ce8eaf 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -10,9 +10,9 @@ const Header = () => {
{" "} - MongoDB .local Paris + MongoDB Day with AWS & Accenture
-
5 Avril 2022
+
May 11, 2022
); }; diff --git a/src/images/Andrew.jpeg b/src/images/Andrew.jpeg new file mode 100644 index 0000000..8a2ab37 Binary files /dev/null and b/src/images/Andrew.jpeg differ diff --git a/src/images/Chai.jpeg b/src/images/Chai.jpeg new file mode 100644 index 0000000..4d026f4 Binary files /dev/null and b/src/images/Chai.jpeg differ diff --git a/src/images/JPMC_QR_Code.png b/src/images/JPMC_QR_Code.png new file mode 100644 index 0000000..bf59301 Binary files /dev/null and b/src/images/JPMC_QR_Code.png differ diff --git a/src/images/QRCode.png b/src/images/QRCode.png deleted file mode 100644 index f0562bb..0000000 Binary files a/src/images/QRCode.png and /dev/null differ diff --git a/src/images/Rick.png b/src/images/Rick.png new file mode 100644 index 0000000..de64c57 Binary files /dev/null and b/src/images/Rick.png differ