This is a curated list of my resources I use for software development. This list is mainly focused on tools I use for front-end development for now but will be updated in the nearest future to include my backend tools as well. Do leave a comment down below if you find this list helpful or you think there's a really cool tool missing from this list. I'll check the tool out and I'll update the list accordingly.
The list is divided into 3 different categories:
Each of the lists under this catergory has a usage sections that make use of the legend detailed below:
- ✅ - I regularly use this resource and its awesome
- ✨ - I plan to learn to use this resource because its awesome
- ☝️ - I rarely use this resource
- ❌ - I don't use or stopped using this resource
This list comprises of all tools used for the design, development and testing of my front-end components. All resource names are linked to the source.
This is my list of the front-end frameworks I use.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| React | Framework for frontend Web Dev | Open Source |
Dart Framework | ⭐⭐⭐⭐⭐ | ✅ |
| Flutter | Framework for native mobile dev | Open Source |
Javascript Framework | ⭐⭐⭐⭐ | ✅ |
| Bootstrap | Framework for responsive design | Free |
CSS Framework | ⭐⭐⭐⭐ | ✅ |
A list of exceptional web articles or tutorials that I recommend to learn the quirks of the frameworks listed above.
| Resource | Description | Content | Content Type | Recommendation |
|---|---|---|---|---|
| Clean Code Guide | Writing Clean Front End Code | Free |
Web Article | ⭐⭐⭐⭐⭐ |
| Advanced React | React + GraphQL Course | Paid |
Video Learning Course | ⭐⭐⭐⭐⭐ |
| Learn BootStrap Pro | Learn Bootstrap Code Academy | Freemium |
Interactive Learning Course | ⭐⭐⭐⭐ |
| Flutter Development Bootcamp | Learn the Flutter basics | Paid |
Video Learning Course | ⭐⭐⭐⭐ |
| Learn BootStrap 4 | Learn Bootstrap in 30 minutes | Free |
Web Article | ⭐⭐⭐ |
A list of sites I check out for design or component templates.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Start Bootstrap | Website Templates | Free |
HTML/CSS Templates | ⭐⭐⭐⭐ | ✅ |
| HTML5 UP | Website Templates | Free |
HTML/CSS Templates | ⭐⭐⭐ | ✅ |
| Bootstrap Official Themes | Website Templates | Paid |
HTML/CSS Templates | ⭐⭐ | ❌ |
A list of sites to get design inspiration from. Some of the designs seem impossible until you find the right tools. Any design component that makes use of 3D elements within a Canvas uses a 3d animation library and designs components with 2D animations in them make use of default CSS methods or an animation tool like Flare.
Font Flipper is an interesting tool I came across. If you've ever been indecisive as to the type of font to use on your website, try it out.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Awwwards | Best website design showcase | Free |
Design Inspiration | ⭐⭐⭐⭐⭐ | ✅ |
| Behance | Discover Creative webpages | Free |
Design Inspiration | ⭐⭐⭐⭐ | ☝️ |
| Font Flipper | Tinder Style Font Inspiration | Free |
Font links | ⭐⭐⭐⭐ | ✨ |
| Start Bootstrap | Website Templates | Free |
HTML/CSS Templates | ⭐⭐⭐⭐ | ✅ |
| Bootstrap Official Themes | Website Templates | Paid |
HTML/CSS Templates | ⭐⭐ | ❌ |
Static site generators are a new concept I'm checking out. They're essentially tools that allow you to compile your static sites to be as fast as possible while also allowing you to connect tools like CMS (Content Management Systems) to update the site without messing with the source code. Think of it as a way to build a React website that you can add new content to through a dashboard-like system. Static Site Generators paired with CMS plugins or continous delivery services like Netlify allow you to build sites for clients that they can manage/update themselves.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Gatsby | Static Site Generator for React | Open Source |
Static Site Generator | ⭐⭐⭐⭐⭐ | ✨ |
| Hugo | Fastest Static Site Generator | Open Source |
Static Site Generator | ⭐⭐⭐ | ✨ |
These are the resources I use to get open-source or free assets for my web apps. These assets make whatever web app you're making look engaging and professional.
A list of resources I use to get stock images for any context.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Unsplash | Free Stock Photos | Freemium |
Stock Photos | ⭐⭐⭐⭐⭐ | ✅ |
| FreePik | Free Images, PSD and AI | Freemium |
Photos, PSD & AI Files | ⭐⭐⭐⭐ | ✅ |
| Pixabay | Free Stock Photos | Freemium |
Stock Photos | ⭐⭐⭐ | ✅ |
| Pexels | Free Stock Photos | Freemium |
Stock Photos | ⭐⭐⭐ | ☝️ |
| Icons8 | Web assets resource | Free |
Icons,Vector,Photos,Music | ⭐⭐ | ✨ |
A list of resources I use to get vector images for any context.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| FreePik | Free Images, PSD and AI | Freemium |
Photos, PSD & AI Files | ⭐⭐⭐⭐⭐ | ✅ |
| Vecteezy | Free Vector Art | Freemium |
Vector Images, Graphics Editor | ⭐⭐⭐⭐ | ✅ |
| Icons8 | Web assets resource | Free |
Icons,Vector,Photos,Music | ⭐⭐⭐⭐ | ✨ |
A list of resources I use to get royalty free fonts.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Google Fonts | Choose Fonts for webpage | Open Source |
Font links | ⭐⭐⭐⭐ | ✅ |
| Font Flipper | Tinder Style Font Inspiration | Free |
Font links | ⭐⭐⭐⭐ | ✨ |
A list of resources I use for light vector & image editing. I use the Adobe suite for more complex edits although Figma is a really good alternative to Adobe Illustrator. It runs in Web assembly hence making it highly performant and snappy while also offering enough features for most of my vector edit needs.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Figma | Web-based Graphics Editor | Freemium |
Web-based Graphics Editor | ⭐⭐⭐⭐⭐ | ☝️ |
| Vecteezy | Free Vector Art | Freemium |
Vector Images, Graphics Editor | ⭐⭐⭐⭐ | ☝️ |
A list of resources I use for animations in the browser. Flare is a really powerful and impressive tool I recently came across. It's built in web assembly and can be used to make really smooth 2D animations in the broswer and native mobile apps. It works with with React and Flutter. I implore you check it out if you're interested in animation.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Flare by 2Dimensions | High Quality Animation Tool | Open Source |
Web-based Animation Editor | ⭐⭐⭐⭐⭐ | ✨ |
| Three.js | Javascript 3D Library | Open Source |
Javascript Library | ⭐⭐⭐⭐ | ✅ |
The list of resources I use to test the speed of my front-end applications. I use browsersync for a real-time test of the responsiveness of my web apps on both a physical laptop and mobile device.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Google Lighthouse | Test front end pages quality | Free |
Chrome DevTools | ⭐⭐⭐⭐⭐ | ✨ |
| Google PageSpeed Insights | Test Pagespeed of site | Free |
Chrome DevTools | ⭐⭐⭐⭐⭐ | ✅ |
| BrowserSync | Synchronized browser testing | Open Source |
NPM Package | ⭐⭐⭐⭐ | ✅ |
A list of NPM packages and Chrome Store apps that assist in the development of my frontend apps.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| SASS-Lang | CSS-Preprocessor | Open Source |
NPM Package | ⭐⭐⭐⭐ | ✅ |
| Webpack | Bundler & Task Automator | Open Source |
NPM Package | ⭐⭐⭐⭐ | ✅ |
| CSS Peeper | Inspect CSS Styles easily | Open Source |
Chrome Store App | ⭐⭐⭐⭐ | ✅ |
| RxJS | Lodash for async events | Open Source |
NPM Package | ⭐⭐⭐⭐ | ✨ |
| Redux | State container for JS apps | Open Source |
NPM Package | ⭐⭐⭐⭐ | ✅ |
| Grunt | Task Automator | Open Source |
NPM Package | ⭐⭐⭐ | ❌ |
| Gulp | Task Automator | Open Source |
NPM Package | ⭐⭐ | ❌ |
A list of resources I use for back-end development. This list will be updated in the near future.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| Postman | REST API Design & Testing | Freemium |
Desktop App | ⭐⭐⭐⭐⭐ | ✅ |
| Insomnia | REST & GraphQL API Design & Testing | Freemium |
Desktop App | ⭐⭐⭐⭐ | ✨ |
| Netlify | Continuous delivery and hosting service | Freemium |
Web App & CLI | ⭐⭐⭐⭐⭐ | ✨ |
| Cloud Craft | Visualize your cloud architecture | Freemium |
Web App | ⭐⭐⭐⭐ | ✨ |
| Google Firebase | All-in-One Deployment Plotform | Freemium |
Web App & CLI | ⭐⭐⭐⭐ | ✅ |
| AWS Amplify | Continuous delivery and hosting service | AWS Charges |
Web App & CLI | ⭐⭐⭐⭐ | ✅ |
| Docker Tutorial | Tutorial on how to use Docker | Free |
Tutorial . | ⭐⭐⭐⭐ | ✅ |
A list of tools that comprise my development environment.
| Resource | Description | Content | Content Type | Recommendation | Usage |
|---|---|---|---|---|---|
| VS Code | All-In-One Text Editor | Open Source |
Desktop App | ⭐⭐⭐⭐⭐ | ✅ |
| Sublime Text | Lightweight Fast Text Editor | Freemium |
Desktop App | ⭐⭐⭐⭐ | ☝️ |
| Boostnote | Note taking tool for developers | Open Source |
Desktop App | ⭐⭐⭐⭐ | ✅ |
| Android Studio | Compilter for Android & Flutter apps | Open Source |
Desktop App | ⭐⭐⭐⭐ | ☝️ |
| iTerm2 | Terminal Replacement for MacOS | Open Source |
Desktop App | ⭐⭐⭐⭐⭐ | ✅ |
| iTerm2 Oh My Zsh Theme | iTerm2 Theme | Open Source |
GitHub Gist | ⭐⭐⭐⭐⭐ | ✅ |
| JSON Viewer | View JSON pretified in your browser | Open Source |
Chrome Store App | ⭐⭐⭐⭐ | ✅ |