Giter VIP home page Giter VIP logo

music-dashboard's Introduction

Frontend Conventions (MUSIC DASHBOARD)

#GENERAL ###File Structure ####Folder Naming

  • snake_case should be implemented
  • restrict deep folder structures
  • folder name should speak for itself, in any case that the function differs from the folder name, it should be changed ####File Naming
  • snake_case sould be implemented
  • file name should speak for itself. stores should be singular e.g. user_store.js, while actions be plural user_actions.js.
  • restrict using long file names e.g. some_long_component_name.jsx

###Vendor Assets

  • vendor assets should be saved e.g. bower install react --save
  • a bower update should be run every after pulling fresh code
  • don't directly modify vendor assets

###TESTING

  • testing be done after each deliverable is finished
  • run tests after a finished-component was altered
  • run tests || create tests before any major pull request

###Branching

####Naming

Type Branch Name
features feature/<feature_name>
supports support/<support_name>
tests test/<test_name>
hotfixes hotfixes/<hotfix_name>
issues issue/<issue_number>

####PULL REQUESTS

  • after every successful pull-request, the developer should notify a branch delete (if needed) No unused branch
  • send a proper pull request after every finished deliverable
  • always run a git pull origin master All branches should be updated

#SCSS

###File Structure

.
+-- main.scss
+-- _components.scss
+-- _variables.scss
+-- _responsive.scss
+-- components
|	+-- _common.scss
| 	+-- _signup.scss
+-- responsive
|	+-- _small.scss

###example /path/to/scss/main.scss;

@import 'variables';
@import 'components';
@import 'responsive';

/path/to/scss/_components.scss

@import 'components/common';
@import 'components/signup';

/path/to/scss/_responsive.scss

@import 'responsive/small';

#Scripts

  • follow JS Conventions
  • any components codebase should be under one folder, no component-relative code be outside its respective folder

###File Structure

.
+-- scripts
|	+--actions
|		+--some_actions.js
|	+--components
| 		+--layouts
|		+--pages
|		+--mixins
|		+--any other components
| 	+--stores
|		+--mocks
|			+--users.json
|		+--some_store.js
+-- app.js
+-- router.jsx

###Data Handling

  • in a case whereas the data does not exist, or is yet to be implemented from the backend, a separate json file should be stored inside the 'mocks' folder. NO STATIC DATA HANDLING INSIDE STORES

music-dashboard's People

Contributors

lyndeniece avatar airondumael avatar sibayanjasper avatar ronaldpabilonia avatar joncepeda avatar jvmsangkal avatar lightshire avatar kvnanytv avatar ninnzz avatar

Watchers

Perseus Laguador avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.