CC · Awesome

A list of awesome software tools that help us (Code Cabana) deliver projects 🌴
Everything listed here is 100% free unless otherwise noted

🔨 Tools

Design / planning

• Photopea - Web-based Photoshop (pay to remove ads)
• MarkUp - Get feedback from clients on your deployed website
• Excalidraw - Whiteboard/diagram creator with a hand drawn feel
• Coolors - Colour palette generator
• Boxy SVG - Web-based SVG editor
• Adobe Color a11y - Accessible colour scheme creator
• Figma - Full featured design & mockup tool
• Zeplin - Full featured designer <-> developer collaboration tool

Dev

• Glitch - Build NodeJS apps or APIs from your browser
• Stackblitz - Same as Glitch, but with a serious appearance
• Ngrok - Expose your local environment at a public URL. Useful for mobile device testing without needing to deploy
• TinaCMS - Add a content-editor overlay to your React/NextJS website and connect it to a CMS backend of your choice

NPM

• Bundlephobia - Check the weight of an npm module before adding it to your project
• Skypack - Load npm modules from NPM without a bundler

Toolchain

• npm-run-all - Run npm scripts in sequence or simultaneously
• shx - Run unix commands in npm scripts
• shelljs - Run unix commands in Node.js
• esr - Run ESM files without transpiling first
• dotenv-flow - Load environment variables from multiple .env* files
• env-cmd - Make env file variables available to npm scripts
• cross-env - Define environment variables inline in npm scripts in a cross-platform way
• envinfo - Print troubleshooting information about the current environment

Assets

• Example domain - Placeholder domain to link to
• Placeholder.com - Placeholder image src URL
• Unsplash - Freely available photography assets
• SVG repo - Freely available SVG icons
• Emoji picker - Handy twitter emoji picker with hosted urls
• useHooks - Code snippets for commonly needed react hooks

💎 Frameworks

Web

• React - JavaScript library for building user interfaces. Ushered in a new era of web dev
• Preact - Tiny version of React
• NextJS - "The React framework for production"; takes care of many no-brainer features you will want anyway e.g. SSR, API routes etc.
• Svelte - Reactivity of React but without the virtual DOM, which results in many performance benefits
• Svelte Kit - Application boilerplate for Svelte projects
• Atomico - Create webcomponents using React patterns

Native

• Expo - Create native mobile apps using web technologies
• Tauri - Build native desktop applications with a web frontend. Smaller output compared to alternatives like Electron

📦 Bundlers

• esbuild - "An extremely fast JavaScript bundler". Many modern app bundlers use this under the hood
• tsup - Typescript or Javascript bundler powered by esbuild
• Vite - Application bundler from the creator of Vue.js
• Snowpack - Application bundler with a cool name
• Microbundle - Zero config app/library bundler powered by Rollup
• Rollup - Old faithful app/library bundler by the creator of Svelte
• Bundle Buddy - Visualizes what code is in your web bundle, and how it got there