Full Stack MongoDB Query Fetcher

ℹ️ This is a web application built using Next.js, MongoDB, and Mongoose.

The application enables users to perform queries on a MongoDB database and displays the results in a table. It includes a homepage with a drop-down menu that triggers different queries to the MongoDB database.

The major tech stack includes Next.js for the frontend, MongoDB and Mongoose for the database, and various API endpoints for querying the data. Additionally, the project includes a test data loader, a User model definition, and utility files for connecting to the MongoDB database.

For further information on queries that are retrieving data, you can refer here

---

🔥 Deployed Link

This project is hosted on Vercel Platform. Visit the following link to view the web application.

https://mongodb-query-fetcher.vercel.app/

---

✅ Guidelines to run web app locally

• For this app to work, you need to configure the following environment variables in your .env.local file in the root directory. No need to use NEXT_PUBLIC since the credentials are not exposed to the browser..

(These are MongoDB Atlas cluster credentials)

MONGODB_USERNAME=<value>
MONGODB_PASSWORD=<value>

• Use these commands to run the application

# to install dependencies 
npm install

# to run the server
npm run dev

• Open http://localhost:3000 with your browser to see the application.

---

📂 Folder Structure

A quick look at the folder structure of this project.

.
|──node_modules
|──next.config.json
|──jsconfig.json
|──.eslintrc.json
|──package-lock.json
|──package.json
├── components
    |───table
        |───table.js
        |───table.module.css
├── data
    |───stats.json
└── models
    |───userModel.js
└── pages
    |───api
        |───test
        |───query
└── public
    |───fonts
└── styles
    |───stats.json
└── util
    |───connectMongo.js
    |───connectUrl.js

---

Frameworks & Languages Used

---

How I made this?

This is a web application built using Next.js, MongoDB, and Mongoose. The application enables users to perform queries on a MongoDB database and displays the results in a table. I also used MongoDB Compass and Postman to verify the queries and API requests.

The index.js file in the pages folder contains the code for the homepage of the application. It imports the table component and the Home.module.css styles. The homepage contains a drop-down menu with five options, each of which triggers a different query to the MongoDB database when selected.

When the user selects an option, the handleApiChange function is called. This function sends a GET request to the appropriate endpoint of the application's API using the fetch function. It then sets the state of the userResults variable to the data returned from the API. If an error occurs, it is caught and logged to the console.

The api/test/loadDB.js file is used to load test data into the MongoDB database. It connects to the database using the connectMongo function from the connectMongo.js file and inserts the data from the stats.json file into a User collection. It then retrieves all of the users from the collection and sends them back as a JSON response.

The models/userModel.js file contains the Mongoose schema for a User document in the database. It defines the fields for the document, including id, firstName, lastName, email, gender, income, city, car, quote, and phone_price. If the User model has already been defined, the code uses that model; otherwise, it defines a new model using the schema.

The util/connectUrl.js file contains the URL for the MongoDB database. It is constructed using environment variables for the username and password. The URL is exported as a default module.

The util/connectMongo.js file exports a function that connects to the MongoDB database using the URL from the connectUrl.js file and the mongoose.connect function. The function is used in the api/test/loadDB.js file to connect to the database before inserting the test data.

The pages/api/query folder contains several files that define the endpoints for the API. Each file exports an asynchronous function that retrieves data from the database and sends it back as a JSON response. The files are named after the query they perform, and their contents depend on the specifics of the query. For example, the AudiEmailNoDigit.js file retrieves data on users who own a BMW, Mercedes, or Audi and whose email addresses do not contain any digits.

---

🖥️ The Interface

Starting Interface

Display Fetched Data from DB using Query5

Display Fetched Data from DB using Query2

MongoDB Compass Aggregation Stage Pipeline MongoDB Compass Aggregation Stage Pipeline

---

References

• MongoDB Atlas: https://cloud.mongodb.com/v2/64463b7e3b1b9f39c0c957fb#/clusters
• Query Documents MongoDB: https://www.mongodb.com/docs/manual/tutorial/query-documents/
• Installation of MongoDB 6.0: https://stackoverflow.com/questions/73081708/mongo-exe-not-installed-in-version-6-0-0
• MongoDB Compass: https://www.mongodb.com/products/compass
• Postman: https://www.postman.com/downloads/
• NPM Package: https://www.npmjs.com/
• Next.js Documentation: https://nextjs.org/docs/basic-features/pages