Skip to content

UI Development Best Practices

Jump to bottom
Aravinth Bheemaraj edited this page Jul 17, 2023 · 1 revision

Development Process

  • Create a new branch based on the master branch.

  • Branch Name

  • task/ticketId (task/CL-123)

  • bugfix/ticketId (bugfix/CL-123)

  • Make and Commit Changes:

  • Make the necessary changes to the codebase.

  • Remove unnecessary code and consoles.

  • Provide appropriate comments for complex logic.

  • Check for ESLint warnings or errors.

  • Check browser console for any warning or error messages.

  • Commit your changes at EOD with clear and concise commit messages.

  • Pull the Latest Changes from master and rebase your corresponding branch every morning.

  • Before creating a pull request, ensure your branch is up to date with the latest changes from the master branch and confirm there’s no conflicts.

  • Create the Pull Request:

  • Provide a descriptive title and a detailed description of the changes included in the pull request.

  • Provide necessary test steps in the PR details for peer review.

  • Review and Address Feedback:

  • Wait for at least 24 hours for reviewers to review your pull request.

  • Actively address any feedback or suggestions provided by reviewers.

  • Make necessary changes to your branch, commit them, and push the changes.

  • Approval and Merge:

  • Once your pull request has received the necessary approvals and passes all checks, merge it into the master branch.

  • Squash or rebase commits if required, maintaining a clean and meaningful commit history.

  • After merging the pull request, delete the branch both locally and remotely to keep the repository clean.

CL Folder Structure

src/ |-- assets/ |-- common/ |-- config/ |-- containers/ |-- hooks/ |-- redux/ | | – actions/ | | – reducers/ | | – store/ | | – api.js | | – constants.js | | – string.js |-- styles/ |-- theme/ |-- utils/ |-- index.css |-- index.js |-- Layout.js |-- web.route.js

src/assets: This folder can contain any static assets like images, fonts, or global stylesheets.

src/common: This folder is for reusable UI components. Each component can have its own JavaScript file for logic.

src/containers: This folder represents the different pages or views. Each page can have its own folder containing a JavaScript file. You can further organize components specific to each page within their respective folders.

src/config: All the static configs and metadata are kept in this folders. Each module has its own config.

src/hooks: Custom hooks are kept in this folder.

src/redux/actions: This folder is for services or utility functions related to data fetching, API calls, or any other backend interaction.

src/redux/reducers: This folder contains the Redux reducers responsible for managing the app's state. You can have multiple reducer files, each handling a specific slice of the state.

src/redux/constants: All the constants used across the app are stored in this folder.

src/styles: This folder contains global stylesheets that are applied throughout the app. Each module can have its own style sheet.

src/utils: This folder contains utility functions, helpers that can be used throughout the app. Each module can have its own util file.

src/web.route.js: This file serves as the entry point for the application and contains the main component hierarchy and routing logic.

src/index.js: This file is the entry point for the app and is responsible for rendering the root component (web.route.js) into the DOM.

src/index.css: This file can contain global styles that are applied throughout the app.

Coding Practices

VS Code Extensions: Use below mentioned vs code extensions for better code and beautified readable code:

Prettier: Code Formatter.

ES7+ React/Redux Snippet: Snippet for react and redux.

Gitlens: For viewing previous commits in the file.

ESLint: To identify any lint errors.


  • Add the reusable component in the common folder.

  • Put all the constants and configs in the config folder.

  • Consistent naming conventions: Use consistent naming conventions. Always use the camel case. Pascal case, or other conventions are not allowed.

  • Always format the code before pushing.

  • Check the whole modified or added code and remove any console.log or debuggers.

  • Remove all the used/undefined variables.

  • Remove commented code if any.

  • Use absolute imports instead of relative imports.

  • While creating a css class, make sure the class name is not used before.

  • Do not use inline styling, instead create a class for it.

  • Try to optimize the code by:

  • Not using many states in the component.

  • Providing appropriate dependencies to effects.

  • Using useCallback and useMemo hooks.

  • Avoiding complex calculations.

  • Saving CPU cycles by avoiding unnecessary loops.

  • Using switch cases instead of nested if-else.

Clone this wiki locally