Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moduscreateorg/labs
Modus Create Labs web site
https://github.com/moduscreateorg/labs
aws ionic nodejs react vue
Last synced: about 2 months ago
JSON representation
Modus Create Labs web site
- Host: GitHub
- URL: https://github.com/moduscreateorg/labs
- Owner: ModusCreateOrg
- License: mit
- Created: 2018-07-11T07:29:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T23:25:17.000Z (over 1 year ago)
- Last Synced: 2024-04-14T04:01:25.592Z (10 months ago)
- Topics: aws, ionic, nodejs, react, vue
- Language: JavaScript
- Homepage: https://labs.moduscreate.com
- Size: 9.31 MB
- Stars: 5
- Watchers: 11
- Forks: 17
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://labs.moduscreate.com)
# Modus Labs Website
🔗 [https://labs.moduscreate.com](https://labs.moduscreate.com)
[](https://moduscreate.com)
[](./LICENSE)
[](https://labs.moduscreate.com/capsule-aws-static-web-app-service)
- [Developing](#developing)
- [Server-side rendering](#ssr)
- [Setup](#setup)
- [Code organization](#code-organization)
- [Styling](#styling)
- [Add a new project](#add-a-new-project)
- [Project config properties](#properties)
- [Deployment pipeline](#deployment-pipeline)
- [Modus Create](#modus-create)
- [License](#license)
# Developing
[Gatsby](https://www.gatsbyjs.org/) is a React-based static web generator. React code is pre-built and served as static HTML. All resources such as images, CSS, and JS are pre-built, too. Users will receive rendered HTML and Javascript. Once Javascript is bootstraped, the page will silently re-render and enable active content.
### SSR
React developers should understand the traits of Server Side Rendering when developing this web site.
- Do not rely on browser-specific globals such as `window` or `document`. They may not exist in node environment.
- `componentDidMount` does not fire during SSR. There's no mounting at that stage
- Use [React Helmet](https://github.com/nfl/react-helmet) to work with tags that go in ``
- Use [React Idle](https://github.com/ModusCreateOrg/react-idle/) to omit parts of the web site that doesn't need to be rendered on the server. You will want to avoid the parts that do not contribute to [Above the Fold](https://en.wikipedia.org/wiki/Above_the_fold) or [Critical Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) content.
### Setup
This site can be built on any system that supports **Node v6.9+**.
```sh
git clone [email protected]:ModusCreateOrg/labs.git
cd labs
npm install
```
##### Dev server
```sh
npm run develop
```
##### Build static web for production
```sh
npm run build
```
### Code organization
| File/Folder | Description |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| [components](./src/components) | Data-agnostic atomic components |
| [containers](./src/containers) | Reusable combinations of components built using a specific layout that represents a meaningful portion of a view |
| [data/projects](./src/data/projects) | JSON-formatted representation of projects. See [the docs](#properties). |
| [pages](./src/pages) | Pages or routes for this web site |
| [theme](./src/theme) | Sass globals and variables |
| [html.js](./src/html.js) | HTML template formatted for Server Side Rendering |
### Styling
We use Sass for styling. All variables are in the [theme](./src/theme) folder
# Projects
Take a look at current [Modus Labs projects](https://github.com/ModusCreateOrg/labs/tree/master/src/data/projects) in JSON format.
### Add a new project
- Copy one of the project JSON files and change properties
- New JSON file will automatically generate a project on the web site
- Changes will automatically apply on each merge
### Properties
| Property name | Description |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | Project name |
| `featured` | Set to `true` to appear at the top of the page. Keep max 4 featured projects |
| `weight` | The higher the number, the closer to the top the project will show. This is useful to sort projects |
| `repo` | Repository URL (https) |
| `headline` | Short pitch < 250 characters |
| `description` | Meaningful description. < 600 characters. Use all the right keywords |
| `image` | File name stored in Cloudinary. Responsive images will be generated automatically |
| `stack` | Array of technologies used. Use `react`, `react-native`, `vue`, `ionic`, `angular`, or `aws`. The list may get bigger, but we need to prepare a logo for each. |
| `tags` | Keywords |
| `team` | Array of objects with `name` and `twitter` properties for the team who contributed to this project |
| `title` | Short pitch < 50 characters |
| `screenShots` | Array of objects with `screen` to explain the working app flow |
# Deployment pipeline
[](https://labs.moduscreate.com/capsule-aws-static-web-app-service)
The [Modus Labs](https://labs.moduscreate.com) web site is [deployed on AWS, powered by Capsule](https://labs.moduscreate.com/capsule-aws-static-web-app-service).
Here's how it works:
1. Create a Pull Request using [GitHub Flow](https://guides.github.com/introduction/flow/)
2. Capsule will use AWS CodeBuild service to build the site from your branch
3. If build is successful, the Pull Request checks section will go green.
4. Once the Pull Request is merged, Capsule will rebuild the `master` branch and deploy a new version of the web site to AWS CloudFront
# Troubleshooting
Issues with nodejs versions on npm install
Run:
````
# install NVM
$ bash nvm-install.sh
# Create a new terminal instance or refresh your profile/resource file
$ nvm install 12.15.0
$ nvm use
$ npm i
$ npm run build
```
# Modus Create
[Modus Create](https://moduscreate.com) is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.
[](https://moduscreate.com)
# License
MIT
````