To recap, we are going to build a simple app to manage banner ads using React and RefluxJS, one of the many implementations of Flux. My goal is to make this application as simple as possible while demonstrating the basics of React and Reflux. Last week we built a simple app that looks like the following:
- The 'home page which displays a table of all banners
- A form to add a new banner
- A view that displays a banner and provides the functionality to toggle the display status of the banner
Today we're going to build a super-simple API and then tie everthing together next week with a nice look UI.
Our API is going to be using Express and MongoDB for persistence. It's a basic Express app that I created using the command line app generator. I just added in MongoDB and the basic CRUD functionality to the routes. Security for the API is beyond the scope of this post. You can find all of the code for the API on this github repo.
To run the application locally, simply clone this repo
Then install all of the dependencies for the project defined in package.json:
Start Mongo locally (assuming it running on the default port of 27017) and then:
You should now be able to open up http://localhost:3000 and see an empty array returned. You can use the POST route to add some data based upon the model below.
Our model is pretty simple as we only have 4 properties for our banner object:
The bulk of the application is in the routes/index.js file. This is where we add all of the functionality to return all banner records, return a banner by its ID, create a new banner and of course update an existing banner. It's pretty much standard boilerplate CRUD functionality for MongoDB so it should be pretty straightforward looking at the code below.
Now that we have our API done, we are ready to implement our React components with a nice looking layout and wire them up the to API. We'll take a crack at this in next week's final post in this series.