Table of contents

This document compiles industry best practices, proven strategies, and valuable insights to empower developers in their front-end projects. Using information from chapters of this document could help you save time during the development process and during the work with estimations. This cookbook is based on the experience of the whole Uptech front-end team during our work on different projects over the last 2 years. Also, it could be helpful for newcomers who don't have relevant experience with some technologies that we use on a regular basis.

• Architecture
  • Atomic
  • Feature based
  • Feature sliced
  • Modular
  • Module federation
• Authentication
  • AWS Cognito
• Data fetching
  • Axios
  • React Query
  • SWR
• Forms
  • Formik
  • React Hook Form
  • Storing form data in localStorage
  • Validation
• Git
  • Rebase
  • Squash & Merge
  • Pull request template create
• IDEs
  • VSCode
    • Extensions
    • Styling
• Images
  • Optimizations
  • SVG
• Infinite scroll
  • Intersection Observer API
• Internationalization
  • i18next
  • lingui-js
  • react-intl
• Monitoring
  • Sentry
• Notifications
  • CircleCI to Slack
  • JIRA to GitHub
• Roles and permissions
  • Common approaches
• Routing
  • Leave modal logic
• SSR
  • Next.js
    • Basic Auth
    • Overview
    • Next.js 13
  • General
• State management
  • React Context API
    • Overview
    • React Context API + useReducer hook
    • Ref-based React Context API
  • Redux Toolkit
    • Overview
    • RTK Query
• Styling
  • MUI
  • Dark mode setup
  • General recommendations
  • Styled Components
• UI components
  • Date & time pickers
  • OTP input
  • Textarea with emoji
  • Tree view multi-select
  • Tree view select
  • WYSIWYG
    • Tiptap