{"id":25601065,"url":"https://github.com/arifshariati/dockerized-nestjs-react-mongodb-pagination","last_synced_at":"2026-04-15T19:38:57.640Z","repository":{"id":125597261,"uuid":"367074197","full_name":"arifshariati/dockerized-nestjs-react-mongoDB-pagination","owner":"arifshariati","description":"dockerized nestjs react pagination with mongoDB is basic filter and pagination example implemented on backend (nestjs). NestJs backend code is focused on generalizing pagination for its usability for future modules to be constructed upon by creating separate paginatModule.","archived":false,"fork":false,"pushed_at":"2021-05-14T18:50:02.000Z","size":999,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-21T15:51:02.849Z","etag":null,"topics":["filter","mongodb","nestjs","nodejs","pagination","query","query-builder","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arifshariati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-13T14:27:25.000Z","updated_at":"2024-05-19T05:56:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"406feab0-d641-4f8f-be92-f606c3ee8da3","html_url":"https://github.com/arifshariati/dockerized-nestjs-react-mongoDB-pagination","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/arifshariati/dockerized-nestjs-react-mongoDB-pagination","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifshariati%2Fdockerized-nestjs-react-mongoDB-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifshariati%2Fdockerized-nestjs-react-mongoDB-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifshariati%2Fdockerized-nestjs-react-mongoDB-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifshariati%2Fdockerized-nestjs-react-mongoDB-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arifshariati","download_url":"https://codeload.github.com/arifshariati/dockerized-nestjs-react-mongoDB-pagination/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifshariati%2Fdockerized-nestjs-react-mongoDB-pagination/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31857615,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filter","mongodb","nestjs","nodejs","pagination","query","query-builder","reactjs"],"created_at":"2025-02-21T15:40:10.121Z","updated_at":"2026-04-15T19:38:57.631Z","avatar_url":"https://github.com/arifshariati.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dockerized-nestjs-react-mongoDB-pagination\n\ndockerized nestjs react pagination with mongoDB is basic filter and pagination example implemented on backend (nestjs).\n\nGoing though backend code, you will get familized with easy to understand modularized backend implementation in any project in nestjs, which i personally like.\n\n## Key Points\nNestJs backend code is focused on genaralizing pagination for its usability for future modules to be constructed upon by creating seperate paginatModule.\n\n### Backend\nPaginate Module has two main tasks such as generateQuery and Paginate. generateQuery takes care of request params sent from frontend and Paginate handles formulate data to be sent back such as an object of page, perPage, total etc. below is sample code for PaginatModule service. \n\n```\nuserPaginate = async (req: Request) =\u003e {\n\n        let options = this.generateUserQuery(req);\n\n        const query = this.userService.find(options);\n\n        const page: number = parseInt(req.query.page as any) || current_page;\n        const limit: number = parseInt(req.query.perPage as any) || per_page;\n        const total = await this.userService.count(options);\n\n        const data = await query.skip((page) * limit).limit(limit).exec();\n\n        return {\n            data,\n            total,\n            page,\n            last_page: Math.ceil(total / limit)\n        };\n    }\n\n    private generateUserQuery = (req: Request) =\u003e {\n\n        let options = {};\n        let and = [];\n        let or = [];\n    \n        if(req.query.search){\n            or.push(\n                {name: new RegExp(req.query.search.toString(), 'i')},\n                {email: new RegExp(req.query.search.toString(), 'i')}\n            );\n        };\n    \n        if(req.query.gender){\n            and.push({gender:req.query.gender});\n        };\n    \n        if(or.length \u003e0 \u0026\u0026 and.length \u003e 0){\n            options = {\n                $or: or,\n                $and: and\n            };\n        }else{\n    \n            if(or.length \u003e 0){\n                options = {\n                    $or: or\n                };\n            }\n            \n            if(and.length \u003e 0){\n                options = {\n                    $and: and\n                };\n            }\n        }\n        \n        return options;\n    };\n\n```\n\n### Frontend - React \n\nkey things to focus on frontend side is how to dynamically joing query fields based on required data state values such as Search Gender etc. Have a look at below code;\n\n```\nlet endPoint = 'http://localhost:4000/user/all';\n\nconst [users, setUsers] = useState([]);\nconst [search, setSearch] = useState(\"\");\nconst [gender, setGender] = useState(\"\");\nconst [page, setPage] = useState(0);\nconst [perPage, setPerPage] = useState(10);\nconst [total, setTotal] = useState(100);\n\n// load users on page load\n  useEffect(() =\u003e {\n    \n    (\n      async () =\u003e {\n        \n        let arr = [];\n        arr.push(`page=${page}`, `perPage=${perPage}`,`search=${search}`,`gender=${gender}`);\n\n        try{\n          \n          Axios.get(`${endPoint}?${arr.join('\u0026')}`)\n          .then(result =\u003e {\n            updateState(result.data);\n          })\n          .catch(err =\u003e {\n            console.log('Axios Error', err);\n          })\n        }catch(e){\n          console.log(e);\n        }\n        \n      }\n    )();\n  },[search,page,perPage,gender]);\n\n  const handleChangePage = (event, newPage) =\u003e {\n    setPage(newPage);\n  };\n\n  const handleChangePerPage = (event) =\u003e {\n    setPerPage(event.target.value);\n    setPage(0);\n  };\n\n  const updateState = (response) =\u003e {\n    setUsers(response.data);\n    setPage(response.page);\n    setTotal(response.total);\n  }\n\n  const handleSearch = (event) =\u003e {\n    setSearch(event.target.value);\n  }\n\n  const handleFilterGender = (event) =\u003e {\n    setGender(event.target.value);\n  }\n\n```\n\n### Docker \nProject has been dockerized. I think there is nothing much more to go into Docker and Docker config details.\n\n## Install \u0026 User  \n\nafter forking or cloning project, move to project folder and use below to make project running;\n\n```\ndocker-compose up\n\n```\n\nPlease note, in order to run project in docker, you mush have docker installed in your machine. \n\nHappy Coding !! \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifshariati%2Fdockerized-nestjs-react-mongodb-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farifshariati%2Fdockerized-nestjs-react-mongodb-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifshariati%2Fdockerized-nestjs-react-mongodb-pagination/lists"}