The latest articles on DEV Community by Sohaib (@sohaibmanah). https://dev.to/sohaibmanah https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F982110%2F63af4cf6-3f26-496b-8e6a-b50e417b9324.jpeg https://dev.to/sohaibmanah en Sohaib Sun, 04 Dec 2022 01:11:49 +0000 https://dev.to/sohaibmanah/mongodb-atlas-hackathon-2022-on-dev-37f https://dev.to/sohaibmanah/mongodb-atlas-hackathon-2022-on-dev-37f <h2> What I built </h2> <p>I have built a <strong>vanilla JavaScript application</strong> that interacts with <strong>Node Js and express Js back-end</strong> and a <strong>MongoDB Database</strong> , it uses the <strong>Atlas search</strong> to suggest for you the best recipes results bases on a search index. Read the Description for more details </p> <h3> Category Submission </h3> <p>Search No More</p> <h3> App Link </h3> <p><a href="https://rich-lime-piglet-tam.cyclic.app/" rel="noopener noreferrer">https://rich-lime-piglet-tam.cyclic.app/</a></p> <h3> Screenshots </h3> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09zhjgnbvx6sc5zwl85i.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09zhjgnbvx6sc5zwl85i.jpg" alt="Image description" width="800" height="522"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbumkak5wb5mziykl46qf.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbumkak5wb5mziykl46qf.png" alt="Image description" width="800" height="447"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnstaana2usy67nlge1pg.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnstaana2usy67nlge1pg.png" alt="Image description" width="800" height="447"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiklxm2d8hzohiq3wfiuh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiklxm2d8hzohiq3wfiuh.png" alt="Image description" width="800" height="447"></a></p> <h3> Description </h3> <p><strong>Forkify</strong> is a vanilla JavaScript application that interacts with the <strong>Forkify API</strong> to fetch and display recipe food data. The user can search for a specific recipe and save it to a favorite list via local storage. The user can easily increase or decrease servings as per his need and can view detailed directions. You can add your own recipe to the list, it will be automatically added to your bookmarks.<br> the search functionality is implemented with <strong>MongoDB atlas search</strong> to suggest to you the appropriate recipe for you base on a search index on recipes name.</p> <h3> Link to Source Code </h3> <p><a href="https://github.com/sohaibMan/FORKIFY-FIND-YOUR-RECIPE" rel="noopener noreferrer">https://github.com/sohaibMan/FORKIFY-FIND-YOUR-RECIPE</a></p> <h3> Permissive License </h3> <p>You can use this project code for learning purposes only </p> <h2> Background </h2> <p>(What made you decide to build this particular app? What inspired you?)</p> <p>I am preparing for MongoDB developer path so I decided to practice a little bit what I've learned with this simple app.</p> <h3> How I built it </h3> <p>(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)</p> <p>For the <em>Front end</em> I have used <strong>Vanilla js ** with the **MVC</strong> software architecture and <strong>OOP</strong> principles.</p> <p>For the <em>back end _<strong>Node js</strong> with <strong>express Js</strong> to build the search API <br> finally as a _database</em> I have used MongoDB Atlas for managing my database cluster(duplication,Sharding,scalability,hosting,...) and also the embedded full-text Atlas search engine for the search functionality ,it makes the search queries faster and much easier ,because I didn't need to break my head to sync between the search database for example Elastic search and the backend server. and I have used also the Atlas aggregation pipeline to visualize the flow of the data across all pipeline stages </p> <h3> Additional Resources/Info </h3> <p>Don't hesitate to contact me in LinkedIn<br> <a href="https://www.linkedin.com/in/sohaibmanah/" rel="noopener noreferrer">https://www.linkedin.com/in/sohaibmanah/</a></p> watercooler