Snippod-Boilerplate (Deprecated)

About

This repository is deprecated. A Reflux and many other things are not valid these days. Furthermore, this is not a boilerplate anymore. So I upgraded many things and create a new repository to here.

Go to the new Snippod-Starter-Demo-App.

(Old)

Overview

Snippod-Boilerplate is a webapp baseline sample program using react+flux and django REST architectures. This program was made for Snippod's baseline. We'd like to build this starter kit based on full stack single page web application architecture. Snippod's architecture used a this kind of technology, React + Flux (RefluxJS) + django REST framewrok + RDBMS. This stack is presented by diagram too.

Base Repository, Module

Frontside Snippod-Boilerplate is based on a Yeogurt Generator and a React news clone like Hacker news site.
Also serverside are maded by django REST framework.

We made this using these technologies.

• React
• Reflux
• Immutable js
• React Router v1.0.0-rc1
• Django and Djnago REST Framework

Getting Started

Preliminaries :

• Python 3.4
• virtualenv (optional)
• npm

You have to git clone this repository.

git clone https://github.com/shalomeir/snippod-boilerplate

Installation for frontend WebApp

In the 'snippod-webapp' directory './snippod_webapp/'

There are a few dependencies that this project relies on: Node.js (v.0.10.36), Grunt & Bower

• npm install && bower install

Installation for REST API Server

In the 'snippod-server' Root directory './'

• virtualenv venv
• source venv/bin/activate
• pip install -r requirements.txt
• python manage.py makemigrations && python manage.py migrate
• python manage.py createsuperuser

Usage for frontend WebApp

In the 'snippod-webapp' directory './snippod_webapp/'

• grunt serve for previewing your site/app on a development server. (If you want live debugging, un-comment django dev setting file 69 line and install LiveReload chrome extension.)
• grunt build for build site/app for django 'collectstatic' command.

Usage for REST API Server

In the 'snippod-server' Root directory './'

• python manage.py runserver

Description

Front side

Almost main javascript source are located './snippod_webapp/client/scripts/' directory. Since, We'd like to apply node server for react server-side rendering, but didn't make yet.

This front side ajax call usually doing in Actions. Reflux provide async auto generation for action. We use this and Promise.

Server side

Django Rest framework provide browserble API. So you can see all get json by browserble API address too.

• account list: '~/api/v1/accounts/'
• post list: '~/api/v1/posts/'
• post list sorted by upvote count: '~/api/v1/posts/?sorting=upvotes'
• comment list: '~/api/v1/comments/'
• single account, post or comment like this '~/api/v1/posts/:postId/'
• user's posts or comments like this '~/api/v1/user/:userId/posts/'

More information is available at this blog post written in Korean.

Reference

Front side

• yeogurt generator
• Evan's React News & blog post
• gaeron's Flux React Router Example

Server side

• Thinkster.io Django and AngularJS Tutorial

Contributing

Contributions, questions and comments are all welcome and encouraged.

License

MIT License.

Copyright 2015 Seonggyu Lee.