Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arifulhb/react-playing-card
A simple playing card distribution package to distribute 52 cards from 4 different card type to `n` number of people.
https://github.com/arifulhb/react-playing-card
babel babel7 laravel laravel5 php react react-router-v4 reactjs webpack webpack4
Last synced: 25 days ago
JSON representation
A simple playing card distribution package to distribute 52 cards from 4 different card type to `n` number of people.
- Host: GitHub
- URL: https://github.com/arifulhb/react-playing-card
- Owner: arifulhb
- Created: 2019-03-26T16:33:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-27T07:25:36.000Z (almost 6 years ago)
- Last Synced: 2024-11-09T23:29:05.521Z (3 months ago)
- Topics: babel, babel7, laravel, laravel5, php, react, react-router-v4, reactjs, webpack, webpack4
- Language: PHP
- Size: 3.23 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Playing Card Distribution
A simple playing card distribution package to distribute 52 cards from 4 different card type to `n` number of people.
After distribution of card properly, show who get which cards in a predefined format.
## Tech Used
- Laravel 5.8 `{backend api}`
- ReactJs `{front-end}`
- Material UI
- Webpack 4
- Babel 7 For `js`/`jsx` compiling
- Axios for API calling
## Front-end and Backe-end explaination
### Back-end
The 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 & understanding presentation.
The algorithm to distribute `52` cards to `n` number of peoples are done in `app/Http/Controller/Api/CardContrller.php` file, `index()` function.
Cards name and page number are stored as configure file in `config/card.php`.
### Front-end
Front-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.
All `React.js` front-end code will be found in `resource/src` directory.
Webpack configuration to compile the file is in `webpack.config.dev` file.
## Instlallation
Clone the repo on your development/test environment
```
git clone [email protected]:arifulhb/react-playing-card.git react_playing_card
cd react_playing_card
composer install
```
Now you should be able to access the site based on your `apache` / `nginx` configuration.
## Install via Docker : Keep your enviornment clear
[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.
Please use this [Docker Website](https://www.docker.com/products/docker-desktop) to download and install Docker.
After installing docker, use this steps to run the docker container and install our app inside docker.
```
git clone [email protected]:arifulhb/react-playing-card.git react_playing_card
cd react_playing_card/docker
```
After moving to the `react_playing_card/docker` directory, run this command to build the docker container.
```
lemp/build
```
After build command complete building the container, run this two command one after another to run the docker and install the app
```
lemp/run
lemp/install
```
After install is successful, go to your [browser](http://localhost) `http://localhost` to run the site.
## Development
To develop the front-end (React, Javascript) and compile again, you need to install npm packages used in this project.
```
npm install
```
### Compile the React and Javascript
To compile the new javascript, react codes
```
npm run dev
```
This will compile all vendors `node_modules` and `src` code and export in `public/dist` directory.
## ToDo
1. Webpack for Production is not ready
2. Implement Redux, Saga
## Contact
If you have any question to ask, please email me at [[email protected]](mailto:[email protected]).
I usually replay within 24 hours.
## Screenshots
Page 1: Input Page
Page 2: Result Page
