{"id":19302772,"url":"https://github.com/arifulhb/react-playing-card","last_synced_at":"2026-04-10T15:40:47.977Z","repository":{"id":152317971,"uuid":"177828623","full_name":"arifulhb/react-playing-card","owner":"arifulhb","description":"A simple playing card distribution package to distribute 52 cards from 4 different card type to `n`  number of people. ","archived":false,"fork":false,"pushed_at":"2019-03-27T07:25:36.000Z","size":3391,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T23:27:13.409Z","etag":null,"topics":["babel","babel7","laravel","laravel5","php","react","react-router-v4","reactjs","webpack","webpack4"],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/arifulhb.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2019-03-26T16:33:09.000Z","updated_at":"2019-03-27T07:25:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"b5d0bc3b-0173-4ad1-b72f-82983680aaca","html_url":"https://github.com/arifulhb/react-playing-card","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifulhb%2Freact-playing-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifulhb%2Freact-playing-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifulhb%2Freact-playing-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifulhb%2Freact-playing-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arifulhb","download_url":"https://codeload.github.com/arifulhb/react-playing-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240404681,"owners_count":19796062,"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":["babel","babel7","laravel","laravel5","php","react","react-router-v4","reactjs","webpack","webpack4"],"created_at":"2024-11-09T23:23:45.544Z","updated_at":"2025-12-30T22:46:15.999Z","avatar_url":"https://github.com/arifulhb.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playing Card Distribution \nA simple playing card distribution package to distribute 52 cards from 4 different card type to `n`  number of people. \n\nAfter distribution of card properly, show who get which cards in a predefined format.\n\n## Tech Used\n- Laravel 5.8 `{backend api}`\n- ReactJs `{front-end}`\n- Material UI\n- Webpack 4\n- Babel 7 For `js`/`jsx` compiling\n- Axios for API calling\n\n## Front-end and Backe-end explaination\n### Back-end\nThe app back-end is used as Laravel Framework. Though the back-end work is very minimum here. Still the framework is used to make it flexible for future improvement along with Routes, MVC capability \u0026 understanding presentation.\n\nThe algorithm to distribute `52` cards to `n` number of peoples are done in `app/Http/Controller/Api/CardContrller.php` file, `index()` function.\n\nCards name and page number are stored as configure file in `config/card.php`.\n\n### Front-end\nFront-end is coded with `React.js`, `react-Router-v4`, `Material@UI` is used as UI framework. `Webpack 4` and `Babel 7` is used to compile the `ES6` Javascript used and export it to `public/dist` directory.\n\nAll `React.js` front-end code will be found in `resource/src` directory.\n\nWebpack configuration to compile the file is in `webpack.config.dev` file.\n\n\n## Instlallation\nClone the repo on your development/test environment\n\n```\ngit clone git@github.com:arifulhb/react-playing-card.git react_playing_card\ncd react_playing_card\ncomposer install\n```\n\nNow you should be able to access the site based on your `apache` / `nginx` configuration.\n\n## Install via Docker : Keep your enviornment clear\n![Docker](https://i.imgur.com/Kal7nwu.png)\n[LempDock](https://github.com/arifulhb/lempdock) Docker Image is integrated with this project for quick start. To install via Docker, you need to have Docker install in your Windows, Mac, Linux PC/Laptop. \n\n\nPlease use this [Docker Website](https://www.docker.com/products/docker-desktop) to download and install Docker.\n\nAfter installing docker, use this steps to run the docker container and install our app inside docker. \n\n\n```\ngit clone git@github.com:arifulhb/react-playing-card.git react_playing_card\ncd react_playing_card/docker\n```\nAfter moving to the `react_playing_card/docker` directory, run this command to build the docker container.\n```\nlemp/build\n```\nAfter build command complete building the container, run this two command one after another to run the docker and install the app\n```\nlemp/run\nlemp/install\n```\nAfter install is successful, go to your [browser](http://localhost) `http://localhost` to run the site.\n\n## Development\nTo develop the front-end (React, Javascript) and compile again, you need to install npm packages used in this project.\n\n```\nnpm install\n```\n### Compile the React and Javascript\nTo compile the new javascript, react codes\n```\nnpm run dev\n```\nThis will compile all vendors `node_modules` and `src` code and export in `public/dist` directory.\n\n\n## ToDo\n1. Webpack for Production is not ready\n2. Implement Redux, Saga \n## Contact\nIf you have any question to ask, please email me at [arifulhb@gmail.com](mailto:arifulhb@gmail.com). \nI usually replay within 24 hours.\n\n\n## Screenshots\n\nPage 1: Input Page\n![Page 1](https://i.imgur.com/KMDJRdN.png)\n\nPage 2: Result Page\n![Result Page](https://i.imgur.com/ZvDao4S.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifulhb%2Freact-playing-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farifulhb%2Freact-playing-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifulhb%2Freact-playing-card/lists"}