This document will give you a high level overview of the modules and components of the application and how they work together.
The CC Search frontend is built using Vue.JS as its main view library. It uses Vue-Router as its routing library and Vuex(https://github.com/vuejs/vuex) as state-management library.
The app uses Foundation for Sites as a base CSS library.
Webpack and Babel are used for build and compilation.
Jest is used for unit tests.
Below is a folder structure in the order recommended to understand how the app and its components are initialized.
-- src/ | |-- main.js | Main entry point of the app. Initializes the base modules such as analytics, stores and routing system. Renders the root component. | |-- App.vue | App root component. All other components have this component as its parent | |-- router/index.js | Where the routes are defined. This is where the definitions of which page component will render for every route. | |-- store/.js | This is where the application stores are defined. Each store defines its base state, action and mutation handlers. | |-- pages/.vue | This is where the each page component is defined. Page components are the base components for each route. They define the page structure | and how its sub-components are rendered. They also contain logic for loading data required to render its child components. | |-- components/.vue | Where individual sub-components are defined. Examples of sub-components include the navigation bar, individual photo details, | photo tags, search results grid, etc.. | |-- api/.js | Modules responsible for wrapping calls to the CC Catalog API. This API | is the base backend used to get the search results and image details. | |-- featureFlags/index.js | A module used to read feature flags from environment variables, which are defined during build time, and exposing their values to the app. | These feature flags are used mainly to enable/disable any given feature when necessary. Used mostly when testing new features and their behaviour before | enabling them to all users. | |-- analytics/*.js | Module responsible for sending real time events to Google Analytics triggered by user interaction with the application. | |-- assets/ | Where the static assets are stored. Assets include mostly image and svg files. |