https://github.com/soleo/front-end-building-checklist

A checklist for building any new component for front end
https://github.com/soleo/front-end-building-checklist

checklist documentation fron-end

Last synced: 27 days ago
JSON representation

A checklist for building any new component for front end

• Host: GitHub
• URL: https://github.com/soleo/front-end-building-checklist
• Owner: soleo
• License: mit
• Created: 2017-09-28T01:43:01.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-05-16T09:25:45.000Z (about 2 years ago)
• Last Synced: 2025-11-20T20:02:59.526Z (7 months ago)
• Topics: checklist, documentation, fron-end
• Size: 7.81 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Checklist-Checklist - Feature Building

README

          
# Front End Feature Building Checklist

## Before Building

- [ ] Have clear idea of the business requirements

- [ ] Get UX/UI designer's mock ups and understand what the designer's visions are, and how they fit in our current design system

- [ ] Understand the current design system, and what are the possible impacts for current layouts

## During Development Process

- [ ] Have conistent naming convention, preferablly enforced by a linter (e.g. eslint)

- [ ] Used preferred way for layouts (grid > flexbox > absolute/relative position)

- [ ] Consolidate similar elements or make them re-usable

- [ ] The boy scout rule: everywhere you touched is cleaner than before

- [ ] [SOLID](https://en.wikipedia.org/wiki/SOLID) and [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)?

## Before Testing/QA

- [ ] Created pull request for code review

- [ ] Check in different browsers (Check on Chrome, FireFox, Safari, Edge)

- [ ] Check in native apps (iOS/Android)

- [ ] Works well in different break points (Mobile, Tablet, Desktop) and different length of text sizes

- [ ] Check voice over in Safari for your feature

- [ ] Profile in ChromeDevTool to see any performance issues

- [ ] Check color contrast

- [ ] Add unit tests to your feature

- [ ] Add documentation for future/peer developers

## Before Deployment

- [ ] Feature branch is synchronized with master

- [ ] Add configuration changes

## After Deployment

- [ ] 🎉 Celebrate and watch what kind of impact/usage the feature going to bring.