|
1 |
| -# React Material Admin Full |
| 1 | +# React Material Admin Full — Material-UI Dashboard Template |
2 | 2 |
|
3 |
| -## This project was generated by Flatlogic Platform. |
| 3 | +Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/). |
| 4 | +**No jQuery and Bootstrap!** |
4 | 5 |
|
5 |
| -## To start the project: |
| 6 | +**This version uses React 17, React Router v5, MaterialUI v5, built with React Hooks and React Context (No Redux)** |
6 | 7 |
|
7 |
| -Install dependencies via npm or yarn |
| 8 | +[Demo](https://flatlogic.com/admin-dashboards/react-material-admin/demo). Use any credentials to log in. |
8 | 9 |
|
9 |
| -```shell |
10 |
| -npm install |
11 |
| -``` |
| 10 | +[](https://flatlogic.com/admin-dashboards/react-material-admin/demo) |
12 | 11 |
|
13 |
| -```shell |
14 |
| -yarn |
15 |
| -``` |
| 12 | +## Features |
16 | 13 |
|
17 |
| -Run development server |
| 14 | +- React (**17.0.2**) |
| 15 | +- React Hooks |
| 16 | +- React Context |
| 17 | +- **No jQuery and Bootstrap!** |
| 18 | +- Mobile friendly layout (responsive) |
| 19 | +- Create-react-app under the hood |
| 20 | +- React Router v5 |
| 21 | +- Material-UI v5 |
| 22 | +- Modular Architecture |
| 23 | +- CSS-in-JS styles |
| 24 | +- Styled Components |
| 25 | +- Webpack build |
| 26 | +- Stylish, clean, responsive layout |
| 27 | +- Authentication |
18 | 28 |
|
19 |
| -```shell |
20 |
| -yarn start |
21 |
| -``` |
| 29 | +## Pages |
22 | 30 |
|
23 |
| -## Support |
| 31 | +We have implemented some basic pages, so you can see our template in action. |
24 | 32 |
|
25 |
| -For any additional information please refer to [Flatlogic homepage](https://flatlogic.com). |
| 33 | +- Profile |
| 34 | +- Dashboard |
| 35 | +- E-commerce (Product Management, Products Grid, Product Page) |
| 36 | +- Typography |
| 37 | +- Tables (Static, dynamic) |
| 38 | +- Forms |
| 39 | +- Notifications |
| 40 | +- Charts |
| 41 | +- Icons |
| 42 | +- Maps |
| 43 | +- Login |
| 44 | +- Error |
26 | 45 |
|
27 |
| -## To start the project with Docker: |
| 46 | +## Quick Start |
28 | 47 |
|
29 |
| -## Description: |
| 48 | +#### 1. Get the latest version |
30 | 49 |
|
31 |
| -The project contains the **docker folder** and the `Dockerfile`. |
| 50 | +You can start by cloning the latest version of React Dashboard on your |
| 51 | +local machine by running: |
32 | 52 |
|
33 |
| -The `Dockerfile` is used to Deploy the project to Google Cloud. |
| 53 | +```shell |
| 54 | +$ git clone https://github.com/flatlogic/react-material-admin.git MyApp |
| 55 | +$ cd MyApp |
| 56 | +``` |
34 | 57 |
|
35 |
| -The **docker folder** contains a couple of helper scripts: |
| 58 | +#### 2. Run `yarn install` |
36 | 59 |
|
37 |
| -- `docker-compose.yml` (all our services: web, backend, db are described here) |
38 |
| -- `start-backend.sh` (starts backend, but only after the database) |
39 |
| -- `wait-for-it.sh` (imported from https://github.com/vishnubob/wait-for-it) |
| 60 | +This will install both run-time project dependencies and developer tools listed |
| 61 | +in [package.json](package.json) file. |
40 | 62 |
|
41 |
| - > To avoid breaking the application, we recommend you don't edit the following files: everything that includes the **docker folder** and `Dokerfile`. |
| 63 | +#### 3. Run `yarn start` |
42 | 64 |
|
43 |
| -## Run services: |
| 65 | +Runs the app in the development mode. |
44 | 66 |
|
45 |
| -1. Install docker compose (https://docs.docker.com/compose/install/) |
| 67 | +Open http://localhost:3000 to view it in the browser. Whenever you modify any of the source files inside the `/src` folder, |
| 68 | +the module bundler ([Webpack](http://webpack.github.io/)) will recompile the |
| 69 | +app on the fly and refresh all the connected browsers. |
46 | 70 |
|
47 |
| -2. Move to `docker` folder. All next steps should be done from this folder. |
| 71 | +#### 4. Run `yarn build` |
48 | 72 |
|
49 |
| - `cd docker` |
| 73 | +Builds the app for production to the build folder. |
| 74 | +It correctly bundles React in production mode and optimizes the build for the best performance. |
50 | 75 |
|
51 |
| -3. Make executables from `wait-for-it.sh` and `start-backend.sh`: |
| 76 | +The build is minified and the filenames include the hashes. |
| 77 | +Your app is ready to be deployed! |
52 | 78 |
|
53 |
| - `chmod +x start-backend.sh && chmod +x wait-for-it.sh` |
| 79 | +## Support |
54 | 80 |
|
55 |
| -4. Download dependend projects for services. |
| 81 | +For any additional information please refer to [Support forum](https://flatlogic.com/forum). |
56 | 82 |
|
57 |
| -5. Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile. |
| 83 | +## How can I support developers? |
58 | 84 |
|
59 |
| -6. Make sure you have needed ports (see them in `ports`) available on your local machine. |
| 85 | +- Star our GitHub repo :star: |
| 86 | +- [Tweet about it](https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-material-template&via=flatlogic). |
| 87 | +- Create pull requests, submit bugs, suggest new features or documentation updates :wrench: |
| 88 | +- Follow [@flatlogic on Twitter](https://twitter.com/flatlogic). |
| 89 | +- Subscribe to Flatlogic newsletter at [flatlogic.com](https://flatlogic.com/) |
| 90 | +- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup: |
60 | 91 |
|
61 |
| -7. Start services: |
| 92 | +## More from Flatlogic |
62 | 93 |
|
63 |
| - 7.1. With an empty database `rm -rf data && docker-compose up` |
| 94 | +- [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application |
| 95 | +- [Sing App](https://github.com/flatlogic/sing-app) - 💥 Free and open-source admin dashboard template built with Bootstrap 4 |
| 96 | +- [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✅ Pure css way to make inputs look prettier |
| 97 | +- [React Dashboard](https://github.com/flatlogic/react-dashboard) - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL |
| 98 | +- [Light Blue Dashboard](https://github.com/flatlogic/light-blue-dashboard) - 💦 Free and open-source admin dashboard template built with Bootstrap |
64 | 99 |
|
65 |
| - 7.2. With a stored (from previus runs) database data `docker-compose up` |
| 100 | +## Premium themes |
66 | 101 |
|
67 |
| -8. Check http://localhost:3000 |
| 102 | +Looking for premium themes and templates? Check out more [admin dashboard templates at flatlogic.com](https://flatlogic.com/admin-dashboards). |
68 | 103 |
|
69 |
| -9. Stop services: |
| 104 | +## License |
70 | 105 |
|
71 |
| - 9.1. Just press `Ctr+C` |
| 106 | +[MIT](https://github.com/flatlogic/react-material-dashboard/blob/master/LICENSE.txt). |
0 commit comments