Search for a command to run...
I’m a Web Developer based in Adelaide, Australia. Even though I have a Telecommunications Engineering degree and an MBA, coding is my passion and my new professional career focus. Developing applications for the web has become my drive.
No comments yet. Be the first to comment.
The first time you look at Claude Code closely, it can feel like a box full of parts that all seem important, but not obviously related. You see CLAUDE.md. Then rules. Then skills. Then hooks. Then su
TL;DR: We’re no longer limited to using generic productivity tools. With the rise of AI-assisted coding and platforms like v0, Bolt, Cursor, and Windsurf, it’s now possible to build simple, custom tools (microtools) that fit the way you think and wor...
Unlock the Full Potential of Static Typing in Your React Projects
Front-End vs Full-Stack Web Development: Which Career Path Is Right for You?
Do you want to learn Python or improve your skills in this popular programming language? If so, you might be interested in the Python for Everybody Specialization course on Coursera. It’s a great way to master the basics of Python and explore its app...
Damian Demasi's Blog
34 posts
Web Developer - I switched careers in my 40s - Writer of web development blog posts - I love to share Notion templates
Buy me a coffee!On this page
Web Development Glossary Search is a web application that I created with the objective of taking part in the MongoDB Atlas Hackathon hosted by the DEV.to community.
The app makes use of several MongoDB features:
In this project, I also implemented a save to favourites functionality using localStorage, and React pagination to browse through the multiple documents returned by MongoDB.
The app was developed using:
realm-web: for the MongoDB connectivity and Realm accesshtml-react-parser: for parsing the data contained in the documentsreact-paginate: to paginate the documents returned by MongoDB👉 Watch it live here: https://hackathon-mongodb-devto.vercel.app/
The project is basically a glossary search app. The user can search a web development related term and save it as a favourite.
On the start page, the app will present a list with all the terms that are present on the MongoDB database. As there are quite a lot of them, they are paginated.
Once the user starts searching for a particular term, the search field will offer auto-complete options after the third character is entered in the input field. This is accomplished by calling a serverless function on MongoDB Realm.
This is the code for the function:
exports = function (arg) {
let collection = context.services.get("mongodb-atlas").db("hackathon_db").collection("web_glossary");
let pipeline = [
{
$search: {
index: "autoCompleteDefinitions",
"autocomplete": {
"query": arg,
"path": "title",
"tokenOrder": "sequential"
}
}
},
{
$limit: 10
},
{
$project: {
// "_id": 0
"title": 1
}
}];
return collection.aggregate(pipeline);
};
What this function does is to build a pipeline that searches the auto-complete index (defined in MongoDB Atlas) for query matches, limits those matches to 10, and returns the title of the matching documents. As a result, a dropdown list is shown when the user searches for a term, and the user can select one of them to see its definition:
Here is a demo of this functionality in action:
The user can also type a term on the search field and press Enter or click on the Search button. This will call another serverless function defined in MongoDB Realm that will deliver the first 10 matches that are similar to the query sent by the user.
This allows for fuzzy matching terms. For example, the user can enter javoscrpt, and MongoDB will return documents that are a close match to that term, such as JavaScript. This is a really awesome functionality! MongoDB will also return a score indicating how close to the query term is the returned result.
Here is a demo of this functionality in action:
In case you are wondering, this is the code for this serverless function:
exports = function (arg) {
let collection = context.services.get("mongodb-atlas").db("hackathon_db").collection("web_glossary");
let pipeline = [
{
'$search': {
'index': 'searchDefinitions',
'text': {
'query': arg,
'path': {
'wildcard': '*'
},
'fuzzy': {}
}
}
},
{
$project: {
title: 1,
excerpt: 1,
score: { $meta: "searchScore" }
}
},
{
$limit: 10
}
];
return collection.aggregate(pipeline);
};
I wanted to keep this app simple enough to focus on the MongoDB aspect of it, so if you think it's quite bare-bones, that's the reason why. That's also the reason behind the data (the definitions) not being polished enough.
You can take a look at the app source code in my GitHub repository.
Before starting working on this hackathon, I knew one thing: I wanted to implement auto-complete on a search bar because that was something I had never done before. This was the initial stepping stone that pushed me to create a project for the hackathon.
I explored several ideas regarding what the app was going to be all about, ranging from an e-commerce store to hire Hobbits to help around the house, to a database of monsters from Dungeons and Dragons (D&D), and some other cool ideas, but all of them had one fatal flaw: the user should know what to search for. Not many people know by heart the names of Hobbits or D&D demons, so I switched to something more proper for the audience of this hackathon: web development terms.
Doing my research I came across the MDN Glossary of Web-related terms definitions. I found out that I could clone their repository and get all the definitions straight from their GitHub repository, so I did just that!
My goal was to get all the definitions from MDN and transform them into JSON format so I could upload that into a MongoDB collection (a table, in SQL language). Unfortunately, due to the nature of the data, it wasn't an easy task.
The glossary data from MDN is divided into multiple files in markdown format, and I wasn't planning on copying and pasting that by hand. After some online search, I came across the markdown-json package which, after some trial and error, converted all my markdown files into a single JSON file. I did this directly in the console:
npx markdown-json -c ./my-app-settings.json -p */*.md
Once the data was ready, I created a new database and collection on MongoDB and imported the JSON file.
I didn't know anything about MongoDB Atlas, so I wanted to know what it was capable of and how I could use it. I found an awesome tutorial by codeSTACKr (who, as far as I know, is working for MongoDB) in which he builds an e-commerce solution using MongoDB Atlas.
After building that app, I had an idea of what I could be doing with my own app. I used React, Next.js, and TailwindCSS to build it, as well as a couple of packages to implement certain functionalities, such as pagination and HTML parsing (the glossary terms extracted from MDN are described using HTML code). I tried to make my app as different from the tutorial as possible so I could actually learn and understand what I was doing. I hope to have accomplished that.
Another great resource for understanding how MongoDB works is its official documentation. This proved to be helpful when I had to modify and delete the collection, because I had to do this using the MongoDB shell.
If you would like a full, detailed, tutorial about how to build this app, please send me a message to my Twitter account.
I hope you enjoyed this post. Hopefully, I managed to inspire you to build your own implementation of the MongoDB features I described earlier.
Cheers!
🗞️ NEWSLETTER - If you want to hear about my latest articles and interesting software development content, subscribe to my newsletter.
🐦 TWITTER - Follow me on Twitter.