https://github.com/gonzarascon/manabu
Manabu is a gamified e-learning platform
https://github.com/gonzarascon/manabu
e-learning gamification gamified-learning nextjs react
Last synced: 26 days ago
JSON representation
Manabu is a gamified e-learning platform
- Host: GitHub
- URL: https://github.com/gonzarascon/manabu
- Owner: gonzarascon
- Created: 2019-05-24T04:18:19.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:28:44.000Z (over 2 years ago)
- Last Synced: 2025-02-13T19:41:11.081Z (3 months ago)
- Topics: e-learning, gamification, gamified-learning, nextjs, react
- Language: JavaScript
- Size: 47.8 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :dragon_face: Manabu :dragon_face:
> A gamified e-learning platform
## Run this project
- Clone the repository & install it's dependencies using `yarn`
- Run it using `yarn run dev`
## Layout Logic
Manabu has an unique Layout that is shared throughout all its pages.
For a more clean code experience, each page should import both the Layout component and the corresponding Page Layout component.
```
import {Layout, PageLayout} from 'components';
const page = (props) => (
);
```
## Components & Breakpoints Sizes
Manabu uses [Grommet](https://github.com/grommet/grommet) basic UI theme settings such as Breakpoints for quick component creation.
Each component receives `responsiveSize` as a prop which indicates the actual view-port size.
This prop is handled by the actual page where the component is being rendered from in pages this value comes as `props.viewportSize`.
With this configuration you can not only manage the display behavior in each component, but also which components should render in that page.
### `responsiveSize`
responsiveSize can be used to modify component behavior around different view-port sizes.
The sizes can be: `'small'`,`'medium'` or `'large'`. If needed, more breakpoints can be added to the `customTheme` helper under `global.breakpoints.[custom size]` and `global.deviceBreakpoints.[device name]`.
Please note that **both properties are required in `customTheme`**
#### myComponent.jsx
```
myComponent.propTypes={
responsiveSize: PropTypes.string.isRequired,
...
};
```
#### page.js
```
page.propTypes={
viewportSize: PropTypes.string.isRequired,
...
};
```
## Want to contribute?
You can [open an issue](https://github.com/gonzarascon/Manabu/issues) with your questions or features proposals!
Contribution guides are on their way!