James' CS Book

Appearance

Useful Links ​

Here are some useful links for your reference!

React Libraries ​

  • Ant Design: Library of React components
  • SweetAlert2: A beautiful, responsive, customizable, accessible (wai-aria) replacement for Javascript's popup boxes
  • Material UI: Library of React components
  • React Hot Toast: Smoking hot React notifications.
  • Tremor: The React library to build dashboards fast
  • Mantine: Build your next website even faster with premade responsive components designed and built by Mantine maintainers and community.
  • HorizonUI: Trendiest Open Source Admin Template for React
  • NextUI: Beautiful, fast and modern React UI library.

Tailwind Libraries ​

  • Chakra UI: Chakra UI provides prebuild components to help you build your projects faster.
  • Tailwind UI Kit: Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0. It's all compatible with React, VueJS and Angular application.
  • HyperUI: HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.
  • Kometa UI Kit: A marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind.
  • Flowbite: Open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
  • headlessUI: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • Ripple UI: Ripple UI is a collection of components and utilities that are used to build modern interfaces.
  • DaisyUI: DaisyUI components: Use Tailwind CSS but write fewer class names
  • TailwindCSS Buttons: A unique collection of TailwindCSS buttons
  • FloatUI: Free open sourced UI components and templates
  • WindUI: Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app
  • Merakiui: Modern - Customizable Tailwind CSS UI Components.
  • Preline UI: Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Templates ​

  • refine: Build your React-based CRUD applications, without constraints.
  • Next.js Enterprise Boilerplate: An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.

UI/UX Inspiration ​

  • Primer Design System: Principles, standards, and usage guidelines for designing GitHub interfaces.
  • Shopify Design Guidelines: Learn what great Shopify apps looks like and how they’re crafted by following Shopify’s App Design Guidelines.
  • Shopify App Design Guidelines: Learn what great Shopify apps looks like and how they’re crafted by following Shopify’s App Design Guidelines.
  • lookup.design: Find Design Examples
  • Page Collective: Get inspired and keep up with the latest landing page design trends.
  • UXtweak: Learn UX research methods, usability testing & more with our complete guides.
  • UX Collective: Curated stories on UX, Visual & Product Design.

Icons ​

  • HeroIcons: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
  • MaterialUI Icons: 2,100+ ready-to-use React Material Icons from the official website.
  • IconFinder: Make beautiful designs faster. Millions of graphics for your design projects.
  • Lordicon: Lordicon is a powerful library of carefully crafted animated icons, ready to use in digital products, presentations, or videos!
  • MingCute Icon: MingCute is a set of simple and exquisite open-source icon library.
  • IconDuck: 266,751 free open source icons & illustrations
  • Flagpack: 250+ open source flag icons to use in your design tool or in your code project
  • Tech Icons: SVG and PNG tech icons
  • Iconbuddy: Over 180k+ open source icons

Images/Illustrations ​

  • Unsplash: The internet’s source for visuals.
  • unDraw: Open-source illustrations for any idea you can imagine and create

Color Palettes ​

Badges ​

  • Shields.IO: Shield Icons for use in GitHub repositories.
  • SKill Icons: Showcase your skills on your GitHub or resumé with ease!

Cards ​

  • Microlink Cards: The easiest way to create and share dynamic images at scale.

Loaders ​

Theme Toggles ​

  • toggles.dev: Theme toggles is a collection of awesome, easy to use, animated toggles; designed for switching between light and dark modes.

UI ​

Forms ​

  • Formkit: A Vue form building framework that simplifies form structure, generation, validation, theming, submission, error handling, and more.
  • Tally: The simplest way to create forms.

Tooltip/Popovers ​

  • Tippy.js: The complete tooltip, popover, dropdown, and menu solution for the web

Avatars ​

  • Bigheads: Randomly Generated Characters for Your Apps & Games.
  • Avataaars: A free online avatar generator for anyone to make their beautiful personal avatar easily!
  • Boring Avatars: Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Accessibility ​

  • WhoCanUse: A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.

Style Guides ​

Testing ​

  • Cypress: Fast, easy and reliable testing for anything that runs in a browser.
  • Jest: Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
  • Enzyme: Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.
  • StoryBook: Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation.
  • Playright: Cross-browser end-to-end testing for modern web apps.

Blogs ​

Developer Blogs ​

Learning ​

  • React Interview Guide: Ace your next Frontend Interview
  • Tech Interview Handbook: Free curated interview preparation materials for busy people
  • Frontend Interview Handbook: Front end interview preparation materials for busy engineers - trivias, coding, algorithms, front end system design and more!
  • FullStackOpen: Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go! This course will introduce you to modern JavaScript-based web development.
  • React In Patterns: A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more.
  • fe.engineer: This is a living handbook, with a focus on React & TypeScript.
  • The Valley of Code: Web development manual.
  • GreatFrontEnd: The complete preparation platform for front end interviews. 200+ practice questions (with answers) across system design, UI and more.

Tools ​

  • techstack.tools: Curated list of creative tools to supercharge your next project.
  • WebDev Town: A curated list of web development tools, articles, libraries, and resources
  • Cube Awesome Tools: Data visualization tools for application developers
  • NPM.DevToolTech: Find the best package for you, Analyze tech stack for your project.
  • Create Next Stack: Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.
  • JSONHero: JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.
  • Faker.js: Generate massive amounts of fake (but reasonable) data for testing and development.
  • Web Designer Tools: A single source of truth for all things design.
  • Lunacy: Lunacy by Icons8 is free graphic design software for Windows, macOS, Linux. Open, edit sketch files with ease. Built-in vector, photos, UI kits, and more.

Misc ​

  • React Docs: Learn how to think in React with step-by-step explanations and interactive examples.
  • An Interactive Guide to Flexbox
  • dub.sh: Dub is an open-source link management tool for modern marketing teams to create, share, and track short links.
  • DevBox: A curated list of high quality development resources to help you ship sites faster.
  • React Wrap Balancer: Simple React Component That Makes Titles More Readable
  • cmdk: Fast, unstyled command menu React component.
  • React Query: Performant and powerful data synchronization for React
  • REACT.gg: The interactive way to master modern React
  • useHooks: A collection of modern, server-safe React hooks
  • ApiVault: Your Gateway To A World Of Public APIs.

Released under the MIT License.

Copyright © 2024 CS-Book