React CMS Client

A CMS client interface built with React. It allows for interaction with an API server built using Laravel.

This project makes use of the following frameworks and technologies:

• ReactJS
• React Router
• Redux
• React Redux
• Redux Saga
• react-router-redux
• Material UI
• SuperAgent
• Stripe
• ContentTools

The dev environment for the app was created using react-create-app, an excellent tool for generating a skeleton React app with all the basic configuration taken care of. Visit the url above for more details. Redux Devtools are also used in dev environment.

CRUD admin interface is setup to be generic.

Screenshots of Current State of the App (11/01/2016)

Edit Page with inline content editor:

View More Screenshots

Admin interface

Example Index Page

View More Screenshots

Admin Login Page

View More Screenshots

Form Validation

View More Screenshots

API Server

Currently I have an API server built using Laravel 5.2 which this client app interacts with. The API server code can be found on GitHub here. There are plans to migrate the current server code over to Sails so that both the client and the server will be written in JS. If you have any questions regarding server specifics, please give me a shout by email or on LinkedIn.

Setup Instructions

Install node modules

$ npm install

Create app_config directory

$ mkdir app_config

Cloudinary Setup

To set up Cloudinary so that image uploading works in the content editor, follow the guide here to set and get the CLOUDINARY_PRESET_NAME, CLOUDINARY_RETRIEVE_URL and CLOUDINARY_UPLOAD_URL values.

Create config files: app.js and stripe.js

• app.js:

const app_config = {
  baseUrl: 'http://localhost:3000', // Note: If you are unsure what this is, try running `npm start` to see.
  apiBaseUrl: 'http://localhost:8000/api/', // Note: Should be the base route of your API with a trailing "/"
  routes: {
    public: [
      { label: 'Log In', url: '/login' },
      { label: 'Home', url: '/' },
      { label: 'About', url: '/about' },
      { label: 'Make a donation', url: '/donate' }
    ],
    admin: {
      dashboard: { label: 'Dashboard', url: '/admin' },
      pages: { label: 'Pages', url: '/admin/pages' },
      cards: { label: 'Cards', url: '/admin/cards' },
      roles: { label: 'Roles', url: '/admin/roles' },
      books: { label: 'Books', url: '/admin/books' },
      users: { label: 'Users', url: '/admin/users' },
      permission: { label: 'Permissions', url: '/admin/permissions' },
    },
  },
  validResources: [
    'users',
    'books',
    'permissions',
    'roles',
    'pages',
    'cards'
  ],
  resourcesWithEditor: [ // Specify resources that you would like to use the inline editor for rather than a form.
    'page',
    'card'
  ],
  CLOUDINARY_PRESET_NAME: 'PRESET NAME',
  CLOUDINARY_RETRIEVE_URL: 'ex. https://res.cloudinary.com/mycloud/image/upload',
  CLOUDINARY_UPLOAD_URL: 'ex. https://api.cloudinary.com/v1_1/mycloud/image/upload'
};

module.exports = app_config;

NOTE This app currently requires Stripe for payments to be set up.

• stripe.js:

var stripe_config = {
  test: {
    pk: 'YOUR STRIPE TEST PUBLIC KEY'
  }
};

module.exports = stripe_config; 

Start Client App in Development mode

$ npm start

Build Client App for Productions with Server-side rendering

$ npm run build & npm run build-server

Launch Production Server

$ npm run server

WIP

• Add backend search functionality
• File Management System
• Service Workers for caching data (PWA)
• Improve content editor
  • Inserting quotes
  • Text highlighting
• Role based permissions
• Inline Editor with image upload and manipulation functionality.
• Form Validation using Redux
• Allow Page nesting in Index
• Image Uploading and editing
• Add Tests using Jest
• Page Template Loading