Updated READMEs

Author: clintonwoo

README.md

@@ -51,14 +51,26 @@ This project is a clone of hacker news rewritten with universal Javascript, usin
 - Snapshot Testing - (jest)
 - Faster Package Install - (yarn)
 
+### Directory Structure
+
+Each directory contains a README.
+
+*root* - Only contains config files such as  Babel, ESLint, Docker, Flow, NPM, Yarn, Git.
+
 ## How To Start
 
-### One Click Download
+### One Click Download & Run
 
 You can download and run the repo with one command to rule them all:
 
 `git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm run dev`
 
+### Execution Path
+
+Server.js is the entry point. It uses Express and passes requests to Next. Next SSR renders the pages using getInitialProps hook from Apollo helper. Therefore the app makes GraphQL requests on the client or server.
+
+When the client receives the page it preloads next page JS designated with <Link prefetch *href=""*>. When the client navigates to the linked page it only needs to make a GraphQL query to render. *Great!*
+
 ### Setup
 
 Running the app in dev mode is fully featured including *hot module reloading*:

build/README.md

@@ -1,3 +1,9 @@
 Project build scripts populate this directory for deployment.
 
-WARNING: Do not write code in this directory because it will be deleted during builds.
+WARNING: Do not write code in this directory because it will be deleted during builds.
+
+### Directory Structure
+
+*build*:
+- *app*: App is compiled here using ```npm build```.
+- static: Static version of the site is compiled here using ```npm run build-static-website```.

docs/README.md

@@ -0,0 +1,3 @@
+### Directory Structure
+
+*docs* - Contains extra documentation.

src/README.md

@@ -0,0 +1,13 @@
+### Directory Structure
+
+*src* - Source code
+- *\_\_tests__*: Used by Jest in each folder to colocate tests.
+- *.next*: Next compiles things here.
+- *components*: React reusable components with GraphQL fragments colocated in the file.
+- *data*: GraphQL Schema, HN Web APIs, cache, sample data.
+- - *models*: Data fetchers. Used to fetch data eg. in GraphQL schema resolvers.
+- *helpers*: Helpers for Apollo SSR and calculating 'time ago'.
+- *layouts*: Every page uses a layout. It's a React component that can have children put in it.
+- *pages*: Every .js file in here contains a React component that is served by Next with the name of the file as a route in the app.
+- *static*: Static resources eg. favicon, css, gif.
+- *root* contains config files for app and Next. App entry point *server.js*.