Awesome Front-End

Welcome to Awesome Front-End, a meticulously curated collection of resources, tools, and frameworks designed to empower and inspire front-end developers. Whether you're a seasoned expert or embarking on your journey in front-end development, this repository is dedicated to providing you with an abundance of valuable information.

Front-end development is a dynamic and continuously evolving field, with new technologies and trends surfacing regularly. Below is a list of recommended tools and tech stacks that are useful for front-end development.

HTML

• html5: https://www.w3schools.com/html/

CSS

• Css3: https://www.w3schools.com/css/

• Css Loader or Spinner: https://css-loaders.com/factory/

• Framework

  • Taliwind: https://tailwindcss.com/
    • React native: https://github.com/jaredh159/tailwind-react-native-classnames
    • Nativewind: https://github.com/marklawlor/nativewind

ReactJs

is a library to build user interfaces based on components using Virtual DOM and JSX

• Maintainer: Meta (Facebook)
  • PROS: Wide comunity and lib, Freedom on development base on own architecture design with pure javasript and JSX
  • CONS: Learning curve, design own architecture, mostly is building from sratch

Framework

• UmiJS: https://github.com/umijs/umi or https://umijs.org

  • Maintainer: Ant Team (Alibaba)
  • USE CASE: Client side or Admin dashbord or Micro-front-end
    • PROS: fast development and well document, provide plugins and preset etc.

• NextJS: https://github.com/vercel/next.js or https://nextjs.org

  • Maintainer: Vercel
  • USE CASE: SSR or any website need fast and SEO

UI

• Antd: https://github.com/ant-design/ant-design or https://d.umijs.org

  • Antd Pro Components: https://procomponents.ant.design/en-US
  • https://ui.lobehub.com/

• MUI: https://mui.com/

• NextUI: https://nextui.org/

• https://ui.shadcn.com/docs/components/button

• Chakra: https://chakra-ui.com/

• https://skeletongenerator.com/?ref=dailydev

Icon

• Lucide Icon: https://lucide.dev/icons/
• Iconify:
  • https://icones.js.org/
  • https://icon-sets.iconify.design/
• Tailwindcss Icon: https://github.com/yunsii/tailwindcss-plugin-iconify

State Management

• Context API:

  • React Context: https://react.dev/reference/react/createContext#creating-context

  • Hox: https://hox.js.org/

• Flux: unidirectional data flow pattern

  • Redux: https://redux.js.org/
  • Zustand: https://github.com/pmndrs/zustand

• Proxy

  • Valtio: https://github.com/pmndrs/valtio
  • Mobx: https://mobx.js.org/

• Atomic

  • Jotai: https://jotai.org/
  • Recoil: https://recoiljs.org/

LIB

• https://react-slick.neostack.com/

Electron

-https://github.com/next-dev-team/react-next-electron

• https://github.com/dieharders/ai-text-server

Vue

• Vue3: https://vuejs.org/

• Nuxt3: https://nuxt.com/

• Vant: https://github.com/youzan/vant

• UI

  • Admin: https://github.com/yudaocode/yudao-ui-admin-vue3
  • Form Creation: https://github.com/xaboy/form-create-designer

Mobile App (Hybrid)

• React Native: https://reactnative.dev/

  • Maintainer: Meta (Facebook)
    • PROS: Wide comunity and lib, Freedom on development base on own architecture design with pure javasript and JSX (Reqired to know ReactJs)
    • CONS: Design own architecture, mostly is building from sratch
  • UI:
  • Universal
    • Tamagui: https://tamagui.dev/
    • Nativewind: https://www.nativewind.dev/
    • https://rnr-docs.vercel.app/
    • https://gluestack.io/

• Fluter: https://flutter.dev/