Directory Layout

A overview of the directories

./client
├── components # Reusable Components go here
│   ├── App
│   │   ├── App.js
│   │   ├── App.scss
│   ├── Footer
│   │   ├── Footer.js
│   │   └── Footer.scss
│   └── variables.scss # Define themes, breakpoints and other css variables here
│
├── modules # Organize business logic components here similar to the django app folders
│   ├── auth
│   │   ├── Auth.js # Signin or login form based on URL
│   │   ├── jwtUtils.js # Authentication logic lives here
│   │   ├── mutations
│   │   │   ├── Login.js
│   │   │   ├── Signup.js
│   │   └── utils.js # Higher order components used to check if user is authenticated and if a component or route requires authentication
│   │
│   ├── polls
│   │   ├── Poll.js
│   │   ├── PollChoices.js
│   │   ├── Polls.js
│   │   ├── Polls.scss
│   │   └── mutations
│   │       └── vote.js
│   └── user
│       └── Account # A component used to manage a users account eg username/email
│           ├── Account.js
│
│
├── routes # Define user routes and there components here. Could be one file as well
│   ├── auth.js
│   ├── index.js
│   ├── polls.js
│   └── users.js
├── styles
│   ├── global.scss
│   └── variables.scss
│
├── index.js # The file webpack uses as the entrypoint to our app.
│
├── root.js # Define root relay query, wrap routes in nav/footer app component and wrap with router.
│
└── utils
    ├── RelayLookupQueryRenderer.js
    ├── RouteUtil.js # Build routes similar to react router 3 with index and child components and url param support.
    └── relay.js # Set up relay network store etc here.