Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anmol-baranwal/mongodb-query-fetcher
🚀 Next.js app to fetch data using queries and aggregation on a MongoDB database
https://github.com/anmol-baranwal/mongodb-query-fetcher
mongodb mongodb-atlas-cloud mongodb-compass mongoose nextjs nodejs postman-test
Last synced: 1 day ago
JSON representation
🚀 Next.js app to fetch data using queries and aggregation on a MongoDB database
- Host: GitHub
- URL: https://github.com/anmol-baranwal/mongodb-query-fetcher
- Owner: Anmol-Baranwal
- License: mit
- Created: 2023-04-24T04:48:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-20T09:59:03.000Z (about 1 year ago)
- Last Synced: 2024-05-21T06:57:49.851Z (6 months ago)
- Topics: mongodb, mongodb-atlas-cloud, mongodb-compass, mongoose, nextjs, nodejs, postman-test
- Language: JavaScript
- Homepage: https://mongodb-query-fetcher.vercel.app/
- Size: 521 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 
Full Stack MongoDB Query Fetcher
> :information_source: 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](Queries_Explanation.md)
## :fire: Deployed Link ##
This project is hosted on [Vercel Platform](https://vercel.com/). 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=
MONGODB_PASSWORD=
```
- Use these commands to run the application
```bash
# to install dependencies
npm install
# to run the server
npm run dev
```
- Open `http://localhost:3000` with your browser to see the application.
## :open_file_folder: 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