{"id":14957605,"url":"https://github.com/shakilhasan/sabil","last_synced_at":"2025-05-02T07:31:54.578Z","repository":{"id":37957907,"uuid":"446497412","full_name":"shakilhasan/sabil","owner":"shakilhasan","description":"A full-functional (Work in progress now) ecommerce web application that is developed by using MERN (MongoDB, Express.js, React.js, and Node.js)","archived":false,"fork":false,"pushed_at":"2023-12-12T12:25:37.000Z","size":16332,"stargazers_count":89,"open_issues_count":2,"forks_count":26,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2024-10-29T23:14:58.078Z","etag":null,"topics":["blog","docker","ecommerce","express-js","full-stack","jest","jwt","material-ui","mern","mern-project","mern-stack","microservices","mongo","mongoose","nestjs","nodejs","rbac","react","redux","typescript"],"latest_commit_sha":null,"homepage":"https://sabil.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakilhasan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["shakilhasan"],"patreon":"mdshakilhasan","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-01-10T16:24:00.000Z","updated_at":"2024-10-28T08:09:07.000Z","dependencies_parsed_at":"2023-12-12T11:24:13.426Z","dependency_job_id":"428f85d6-101f-4eb4-8b59-dedb45ae7c60","html_url":"https://github.com/shakilhasan/sabil","commit_stats":{"total_commits":135,"total_committers":4,"mean_commits":33.75,"dds":0.08148148148148149,"last_synced_commit":"694c3486e2b879d5ee63700a96d785550c955b67"},"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakilhasan%2Fsabil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakilhasan%2Fsabil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakilhasan%2Fsabil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakilhasan%2Fsabil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakilhasan","download_url":"https://codeload.github.com/shakilhasan/sabil/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224305842,"owners_count":17289446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blog","docker","ecommerce","express-js","full-stack","jest","jwt","material-ui","mern","mern-project","mern-stack","microservices","mongo","mongoose","nestjs","nodejs","rbac","react","redux","typescript"],"created_at":"2024-09-24T13:15:13.812Z","updated_at":"2024-11-12T16:03:13.138Z","avatar_url":"https://github.com/shakilhasan.png","language":"JavaScript","readme":"# Welcome to the Sabil Project\n#### This is a full-functional (Work in progress now)  ecommerce web application that is developed by using MERN (MongoDB, Express.js, React.js, and Node.js).\n\n## Features:\n1. In this repository I will keep adding the best practices we should follow in a MERN project. Also for better UX I am using MUI for the UI.\n2. It can be run in two ways. One is using Docker, another way is to run manually.\n3. Dynamically control the access of any component or API for any user or role via the admin control panel.\n4. I will keep adding the best practices we should follow in a MERN project. Also for better UX I am using MUI for the UI.\n\nBelow are the sample of a product-shop and list page:\n\n![Product List Page](docs/images/product-shop.png)\n\n![Product List Page](docs/images/product-list-search.png)\n\n## Technology stack\n\nThis repository is built on top of Express.js and React.js, however in the implementation detail, we will find other supporting technologies as well.\n\n#### Client side\n\n- React - A JavaScript library for building user interfaces\n- Material-UI Design - A design system for enterprise-level products. Create an efficient and enjoyable work experience\n- Testing Library - React Testing Library (Not done yet)\n\n#### Server side\n\n- Node.js - evented I/O for the backend\n- Express.js - Fast, unopinionated, minimalist web framework for Node.js\n- MongoDB - The application data platform for NoSQL databases\n- Mongoose - mongoose\n- Swagger - Swagger (Not done yet)\n- Jest - JavaScript testing framework (Not done yet)\n- Super Test - Super test API testing framework (Not done yet)\n\nDetails frameworks and packages can be found in the package.json files in server and client directory.\n\n## Running the application\n\nThis project can be run basically in two ways. One is using docker, other way is to run manually via vscode.\n\n### Docker\n\nDepending on the MongoDB hosting option, we choose the appropriate docker-compose file.\n\n#### Docker compose files\n\nCurrently we have two docker-compose files:\n\n- `docker-compose.mongocloud.yml` - MongoDB.com hosted cluster\n- `docker-compose.yml` - Local MongoDB container\n\n##### Notes\n\n1. We need to change the `MONGODB_CLOUD_URL` in `docker-compose.mongocloud.yml` to the appropriate MongoDB URL.\n2. We need to change the `REACT_APP_API_URL` in `docker-compose.yml` to the appropriate API URL. If we want to expose our client to the internet, we need to change the `REACT_APP_API_URL` to the appropriate API URL. Otherwise keep `REACT_APP_API_URL` as `http://localhost:8008`.\n\n**Run docker-compose commands**\n\nIt is expected that the machine must have docker and docker-compose installed. Go to the root of the repository and execute appropriate commands. This will spin up the server and client containers along with the MongoDB container (if we are using local MongoDB server) inside of Docker environment.\n\n\n**Using docker containers with cloud hosted MongoDB**\n\n```sh\n\u003e cd project-root\n\u003e docker-compose -f docker-compose.mongocloud.yml build\n\u003e docker-compose -f docker-compose.mongocloud.yml up\n```\n\n**Using docker containers with local MongoDB**\n```sh\n\u003e cd project-root\n\u003e docker-compose build\n\u003e docker-compose up\n```\n\nThe client and server both are up and running and we should see the following screen if we navigate to the client url.\n\n![Login screen](./docs/images/login-screen.png)\n\n\n- seed data\n  Go inside of the docker container and execute below commands. These will seed the database with `roles`, `users` and `products` data.\n\n  ```sh\n  docker exec -it appserver bash\n  npm run db:seed\n  npm run db:migrate\n  ```\n\n  You should see the following output:\n  ![Product List Page](./docs/images/appserver-lsla.png)\n\n  ![Product List Page](./docs/images/appserver-db-seed-users.png)\n\n  ![Product List Page](./docs/images/appserver-db-seed-products.png)\n\n  You should be now login to the application and see the products list.\n\n### Visual Studio Code\n\n#### Prerequisites\n\n- Node.js : To run npm packages\n- MongoDB : As a database for the application\n\n##### Steps\n\n- To run via vscode, we should run the server and client side projects separately, and also make sure mongodb is up and running.\n- Create a `.env` file inside of the `server` directory. Add the below entries or change accordingly. You can follow the `.env.sample` file to see the format.\n\n  ```\n  DB_HOST=localhost\n  DB_PORT=27017\n  DB_NAME=sabil\n  JWT_SECRET=secret\n  JWT_EXPIRES_IN=3600\n  PORT=8008\n  IS_MONGODB_CLOUD_URL=false\n  MONGODB_CLOUD_URL=mongodb+srv:// \u003cUSER \u003e: \u003cPASSWORD \u003e@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true\n  ```\n\n#### Server commands\nWe assume we run the MongoDB in the docker container.\n```sh\ncd server\nnpm i\nnpm run db:up\nnpm start\n```\n\n#### Client commands\n\n```sh\ncd client\nnvm use --lts\nnpm i\nnpm start\n```\n\n## Data seeding\n\nTo seed the database, we need to run the following commands in the docker container. You can run these commands in the terminal as well if you are running the server and client outside of the docker environment.\nI assume we are running appserver in the docker container.\n\n```sh\ndocker exec -it appserver bash\nnpm run db:seed\nnpm run db:migrate\n```\n\nYou should be able to see the username and password in the `/server/setup/users.json` file.\n\n## 🔗 Important Links ❗\n- 🔴 Project Live : [Sabil](https://sabil.vercel.app)\n","funding_links":["https://github.com/sponsors/shakilhasan","https://patreon.com/mdshakilhasan"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakilhasan%2Fsabil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakilhasan%2Fsabil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakilhasan%2Fsabil/lists"}