# Redux Tutorial: First steps

Pre-requisites:

A solid understanding of React, Redux and GraphQL is required. Here are some tutorials/articles that can help you get up to speed with Redux and GraphQL:

Application structure

The Application structure for the Redux starter kit is as follows:


.
├── .babelrc
├── .bowerrc
├── .gitignore
├── LICENSE.txt
├── bower.json
├── data
│   ├── database.js
│   └── schema.js
├── graphql.json
├── node_modules
├── package.json
├── public
├── sass
├── server.babel.js
├── src
│   ├── common
│   ├── main.js
│   ├── plugins.js
│   ├── redux
│   ├── routes
│   └── routes.js
├── test
├── tmp
├── tools
└── views

src folder contains all the client-side Rubix source code. sass folder contains all the client-side Rubix SASS files.

When you first launched the server and navigated to http://localhost:8080 you were greeted by a "received: Hello, World!" page. This page is defined in src/routes/Home.js.

The routes for all pages are defined in src/routes.js. Sidebar navigation items are defined in src/common/sidebar.js. Similarly, the header is defined in src/common/header.js and the footer in src/common/footer.js.

The main layout file that loads the scripts/styles is located in views/layout.pug. The main entry file for the client is src/main.js. The main entry file for SASS stylesheets is sass/main.scss.

All your third-party Javascript files are imported in src/plugins.js.

The server code is located in server.babel.js.

Redux actions and reducers are defined in src/redux. The backend GraphQL schema and related database functions are defined in data folder.

With this basic understanding of the Application structure in mind, let's proceed to the next section of the tutorial where we will seed the Mongo database with some sample data (a list of todo items).