Front-end renderer app for Art404's CMS platform. The aim is to provide a navigable, contextualized display of our work while allowing third party social networks to host the majority of our content. Projects can then be posted naturally on popular networks such as tumblr, instagram or github and then be packaged up with additional metadata for display in a portfolio context.
| Variable | Description |
|---|---|
| firebase_url | The Firebase server to listen to. |
$ npm installStart development server:
$ npm run firebase_url=XXX start:devStart production server:
$ npm startDEPLOY:
- add new git commit
git push heroku master
Without authorizing, the database is read only, with the following endpoints available:
| Endpoint | Description |
|---|---|
| db | repository of all projects where each key is a project ID. |
| main | holds the sites page configuration. eventually we will have alternate page configurations for different members / purposes so main will be distinguished. |
| squad | array of members with the following self-explainable properties: name, role, url. |
You can access the api from any node app with firebase like so:
var Firebase = require('firebase');
var fireAssAPI = new Firebase(process.env.firebase_url);
function doSomeCrazyShitWithProjectData (data) {
console.log('holy shit ->', data.val());
}
fireAssAPI.child('db').once('value', doSomeCrazyShitWithProjectData);
see firebase docs for more on using firebase.
All configuration is stored and read from firebase. Refer to firebase_url in Heroku for appropriate firebase app.
The pages object determines the category heirarchy of the site's navigation.
eg given a config that looks like:
{
"apps": {
"label": "Apps",
"url": "apps",
"icon": "apps_icon.png",
"layout": {
// ...
},
"submenu": [
{
"label": "Javascript",
"url": "javascript"
},
{
"label": "Python",
"url": "python"
},
{
"label": "CSS",
"url": "css"
}
]
},
// required, becomes highest level nav link, links to home
"home": {
"label": "WORK",
"layout": {
// ...
}
}
}The home object will become the first link in the menu and will serve as an anchor to the homepage. Any other objects, in this case Apps, will become the rest of the links in the menu.
| Property | Type | Description |
|---|---|---|
| label | String |
This is the label that will be rendered in the browser for all navigation purposes. |
| url | String |
This is the slug that will be used in the url, will also be used for any non-browser purposes. |
| icon | String |
Direct link to image file that hosts icon for this menu item. |
| submenu | Array |
Collection of hashtags that will become the "submenu" when user is on that tag's page. |
The submenu links will go to a page that shows a grid view of projects that contain both the submenu tag + its parent tag.
| Property | Type | Description |
|---|---|---|
| label | String |
This is the label that will be rendered in the browser. |
| url | String |
Where the submenu link will go to. |
| bold | Bool |
Makes the link bold. |
For every object in pages, the layout property will determine the components rendered on the page + where they get content from.
eg:
{
"home": {
"label": "WORK",
"layout": {
"banner": {
"projects": [
"138398520861",
"139572811486",
"101728537521"
],
"tags": [
"viral"
],
"type": "scroller"
},
"rows": [
{
"content": {
"projects": [
"121467069611",
"120898900716",
"120898177576"
],
"subtitle_tags": [
"open source",
"JavaScript",
"web"
],
"tags": [
"code"
],
"title": "Code",
"url": "code"
}
},
{
"content": {
"subtitle_tags": [
"branding",
"identity",
"logo"
],
"tags": [
"design"
],
"title": "Design",
"url": "design"
}
}
]
}
}
}Will produce a page with a scroller banner, and two Row components; Code & Design.
| Property | Type | Description |
|---|---|---|
| banner | object |
Contains project IDs and or tags to pull in (both optional but need at least 1). |
| banner.type | String |
Currently the only banner type supported is scroller. |
| projects | array |
Always refers to an array of project IDs that take precedence over any tagged projects. |
| tags | Array |
Collection of tags that will be pulled into the component after any projects. |
| rows | Array |
These will render Row components in order with the projects & tags. |
| Property | Type | Description |
|---|---|---|
| projects | array |
Always refers to an array of project IDs that take precedence over any tagged projects. |
| tags | Array |
Collection of tags that will be pulled into the component after any projects. |
| title | String |
The title of the Row. |
| url | String |
Where the "see more" button of a Row will link to. |
| subtitle_tags | Array |
Will be rendered underneath the title as a collection of clickable tag links. |
While projects come from various sources, all of their data models are adopted to fit platform404's expected model. This happens via the-standardizer.
{
"title" : "Netflix and Chill Room",
"id" : "138398520861",
"created_at" : "2016-01-31T08:58:35-05:00",
"priority" : 0,
"tags" : [
"performance",
"social",
"installation",
"brand"
],
"text" : "The Netflix & Chill Airbnb Room is a project presented by ART404 + Tom Galle. With this project we bring the famous ‘Netflix & Chill meme’ to life and offer it as an IRL experience that people can rent for a night on AirBnB. ",
"type" : "media",
"url" : "netflix-and-chill-room",
"additional" : {
"collaborators" : [
{
"collabee" : "Tom Galle",
"url" : "http://tomgalle.com"
}
],
"embeds" : [
{
"embed" : "<blockquote class=\"twitter-tweet\" lang=\"en\"><p lang=\"en\" dir=\"ltr\">Impressive Netflix & Chill listing, <a href=\"https://twitter.com/artnotfound\">@artnotfound</a> <a href=\"https://twitter.com/tomgalle\">@tomgalle</a>. We've got some (G-rated) ideas on how to up the game. <a href=\"https://t.co/QiOoQlYP0S\">https://t.co/QiOoQlYP0S</a></p>— Airbnb (@Airbnb) <a href=\"https://twitter.com/Airbnb/status/693237148292509696\">January 30, 2016</a></blockquote><script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>",
"id_str" : "693237148292509696",
"type" : "tweet"
}
],
"press" : [
{
"publication" : "Tech Insider",
"url" : "http://www.techinsider.io/netflix-and-chill-airbnb-in-new-york-city-2016-1"
}
],
"project_link" : "https://www.airbnb.com/rooms/10831922"
},
"media" : [
{
"alt_sizes" : {
"large" : {
"height" : 854,
"url" : "http://41.media.tumblr.com/ad1473210777ef310a56cb995297bbe7/tumblr_o1t7lnKjNh1r1ubs7o1_1280.png",
"width" : 1280
},
"medium" : {
"height" : 167,
"url" : "http://40.media.tumblr.com/ad1473210777ef310a56cb995297bbe7/tumblr_o1t7lnKjNh1r1ubs7o1_250.png",
"width" : 250
},
"small" : {
"height" : 75,
"url" : "http://41.media.tumblr.com/ad1473210777ef310a56cb995297bbe7/tumblr_o1t7lnKjNh1r1ubs7o1_75sq.png",
"width" : 75
}
},
"height" : 334,
"type" : "photo",
"url" : "http://41.media.tumblr.com/ad1473210777ef310a56cb995297bbe7/tumblr_o1t7lnKjNh1r1ubs7o1_500.png",
"width" : 500
}
],
"source" : {
"author" : "art404",
"author_url" : "http://art404.tumblr.com",
"platform" : "tumblr",
"url" : "http://www.art404.com/post/138398520861/netflix-and-chill-room"
},
"stats" : {
"likes" : 1231,
"reshares": 7200,
"views": 9000
}
}| Property | Type | Default | Description |
|---|---|---|---|
| title | String |
null |
Label to be used as project title |
| id | Number |
none | Unique id, if source has id we use that one otherwise create one |
| url | String |
none | Url slug that will be used for project detail page, manually set or generated from source |
| thumbnail | String |
null |
Optional, if provided will be used as the preferred picture for Card previews. |
| priority | Number |
0 |
0-1000, will affect a projects position when creating collection previews |
| text | String |
null |
Related project copy |
| created_at | String |
none | Date project was posted, also used in conjunction with priority to determine project position |
| type | String |
none | Project types dictatate what components will render them, manually set or generated from source |
| source | Object |
none | Contains relevant info from a project's source (where its hosted) |
| stats | Object |
null |
Statistical info about project |
| tags | Array |
none | Tags are used to sort projects and create relationships |
| media | Array |
null |
External media links, with types and alt sizes if available |
| additional | Object |
null |
Any meta data not existant on the source manually added by contributor |
- firebase
- heroku
- Babel
- ESLint
- Express
- Mocha
- React
- React Router
- React Transform HMR
- Redux
- Redux DevTools Extension
- Webpack
.
├── client # Source code for client-side application
│ ├── actions # Redux action creators
│ ├── components # Presentational/dumb components
│ ├── constants # Global constants (action types etc.)
│ ├── containers # Stateful/smart components
│ ├── reducers # Redux reducers
│ ├── routes # Routes used by React Router (shared with server)
│ ├── store # Redux store
│ └── index.js # Entry point for client-side application
├── server # Source code for Express server
│ ├── api # Mock API
│ ├── middleware # Server middleware
│ ├── views # Server views (Jade templates)
│ ├── index.js # Entry point for server (with babel-register etc.)
│ └── server.js # Express server
├── test # Test setup and helpers
├── .babelrc # Babel configuration
├── .eslintrc # ESLint configuration
└── webpack.config.babel.js # Webpack configuration- Clean up CSS
- Refactor / comment some of the more complex bits like the layout creator, menu and project pages
- Write Tests
* Cookie based "seen" projects with total counter
- Dynamically change database source with special route
- More banner + row + card types