A quick job board with React, Meteor and Material UI

Getting Started

meteor create projectnamemeteor add react coffeescript http cosmos:browserify mquandalle:jade meteorhacks:npm

Main Template

head
title ReactJobs
body
#App

Startup.jsx

Jobs = new Mongo.Collection("jobs");if (Meteor.isClient) {
Meteor.startup(function () {
// injectTapEventPlugin();
React.render(<App />, document.getElementById("App"));
});
}

App.jsx

const {
Paper,
List,
ListItem,
ListDivider,
Avatar,
RaisedButton,
AppBar,
FlatButton,
IconButton,
NavigationClose
} = mui;
const ThemeManager = new mui.Styles.ThemeManager();
App = React.createClass({
mixins: [ReactMeteorData],
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChildContext: function() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},
getMeteorData() {
return {
jobs: Jobs.find({}).fetch()
}
},
componentDidMount() {
{this.loadJobs()}
},
loadJobs() {
loadJobs = Meteor.call("loadGithubJobs");
},
renderJobs() {
return this.data.jobs.map((job) => {
return <Job key={job._id} job={job} />;
});
},
render() {
return (
<div className="wrapper">
<AppBar title="Github Jobs" />
<div className="container">
<List subheader="Latest Github Jobs">
{this.renderJobs()}
</List>
</div>
</div>
);
}
});

Job Component

const {
FontIcons,
IconButton,
Icons,
List,
ListItem,
ListDivider,
Avatar
} = mui;
// Task component - represents a single todo item
Job = React.createClass({
render() {
return (
<ListItem
primaryText={ this.props.job.title }
leftAvatar={ <Avatar src={ this.props.job.company_logo }/> }
secondaryText={ this.props.job.location }
href={this.props.job.company_url}
rightIcon={ <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub" /> }
/>
);
}
});

Pull in the Github data from the API

Meteor.methods
loadGithubJobs: ->
@unblock()
Meteor.http.call "GET", "https://jobs.github.com/positions.json", (error,result) ->
if(error)
console.log error
if(result)
Meteor.call "writeJobs", (result.data)
writeJobs: (jobs) ->
Jobs.remove({})
Jobs.insert job for job in jobs

Some other bits required for Material UI

{
"material-ui": "0.10.1",
"externalify": "0.1.0"
}
{
"transforms": {
"externalify": {
"global": true,
"external": {
"react": "React.require"
}}}}
mui = require('material-ui');
injectTapEventPlugin = require('react-tap-event-plugin');
I love coffee, so if you liked this article and wish to share happiness consider buying me a coffee! I will be very happy. https://www.paypal.me/derrybirkett/5

--

--

--

Thoughts, stories and ideas from a UX Designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Basics of Javascript · String · trimStart() (method)

Visualize COVID-19 data using Postman, D3.JS and Bootstrap.

Table with collapsable Rows (code attached)

Angular 7 + unit testing + code coverage

Recipe site in Gatsby and Firebase-9

Top JavaScript Trends To Look For In 2019

[PARTNERSHIP] 📣 MONIWAR X COMIC COIN 📣

Express || NodeJs vs ASP .NET: What to Choose in 2022?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Derry Birkett

Derry Birkett

Thoughts, stories and ideas from a UX Designer.

More from Medium

The Plan for React 18…..

How to Reset React Context

React context code snippet

React quiz