File Structure

The current file structure for this project is as follows:

📁 .github

• here we keep the issue and pull request templates.

📁 app

• 📁 assets - here are all the cool pictures we use in the application.
• 📁 stylesheets
  • 📁 base - a folder for the initial CSS set up, such as the reset file, and colors
  • 📁 component - a folder for everything else CSS
  • 📃 main.css - what we import in the main index.html

📁 docs

• where any useful information lives, also our landing page

🗄 src - where our main application lives.

• 📁 common - this is where the common components, actions, etc, lives, so we don't have to rewrite code.
• 📁 core - the main import files, like app.jsx, its subcomponents, root_reducer.js, etc.
• 📁 helpers - some functions to be used across the applications to help and assist.
• 📁 modules - all the big features, divided into their own folders.
  • 📁 player - let's walk through video player page as an example.
    • 📁 subcomponents
      • all the pieces that player uses to render properly.
    • 📃 action.js - all the action constants, creators, and thunk actions used in redux
    • 📃 `component.js' - the main React component for this module.
    • 📃 index.js - the container file for this module. This file is imported into routes.
    • 📃 reducer.js - the reducer for the player component.
  • 📁 Other modules

some git related files, such as .gitignore, CONTRIBUTING.md

📃 index.html - what Electron initially loads before React takes over.

📃 main.js - Electron uses this to detect how to make windows.

📃 package.json - So everyone knows what package we used.

📃 template.html - In case we accidentally remove index.html, and webpack uses this to create new index.html and inject the necessary JavaScript files.

📃 webpack.config.js - Set up webpack configuration. Webpack is magic, just not that magic.

📃 yarn.lock - So everyone has their dependencies straight.