Current Full-Stack Developer Technical Stack 2021
Front-End: HTML, CSS, JavaScript, Typescript, React, React Native, Redux, Flutter/Dart
Back-End: Python, NodeJS, SQL, NoSQL, Kotlin
Transfer Files
Either use a cloud backup solution to restore your data or use an external storage device to transfer your files to your new computer.
Install Web Browsers
Google Chrome
Google Chrome Canary
Firefox
Firefox Developer Edition
Firefox Nightly
Safari Technology Preview
Tor Browser
Install Web Browser Extensions (chrome)
Adblock Plus
Apollo Client Developer Tools
ColorZilla
Honey
JSON Viewer
LastPass
Lighthouse
Momentum
React Developer Tools
Redux DevTools
Video DownlodHelper
Wappalyzer
Web Developer
daily.dev
Install Software
I would install all of the apps that I use this includes personal and developer related. So tools like Adobe CC, Microsoft Office, Discord, Slack etc.... I will just include the developer apps as they are more relevant in this guide.
Developer Apps
Android Studio
Docker
Hyper
Insomnia
IntelliJ IDEA CE
iTerm 2
MongoDB Compass
Postman
Valentina Studio
Visual Studio Code
Xcode
Install Package Managers
- Hombrew
- npm
- Pip
Hombrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Install Packages
- Hombrew automatically installs Pip pointing to the Homebrew’d Python 3 for you
You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed. If you use nvm or similar you should exclude installing Node.js so that nvm’s version of Node.js is used.
Use brew to install the below packages
brew install tree (It allows you to view all files in a tree view)
brew install ruby
brew install git
brew install node
brew install python
brew install kotlin
brew install postgresql
brew install yarn or brew install yarn --without-node
brew tap heroku/brew && brew install heroku
brew install graphql-playground
brew install deno
Install oh-my-zsh
ZSH is already preinstalled in the latest versions of macOS. Catalina onwards I believe. I also install https://ohmyz.sh/ as it allows for more configuration and is required in some cases.
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Use the command line to show all hidden files as the files you are searching for are going to be hidden by default.
defaults write com.apple.Finder AppleShowAllFiles true
killall Finder
Install the Oh My Zsh plugins below
brew install zsh-autosuggestions
brew install zsh-syntax-highlighting
To activate the plugins, add the following at the end of your .zshrc:
source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
You will also need to force reload of your .zshrc:
source ~/.zshrc
If you receive "highlighters directory not found" error message, you may need to add the following to your .zshenv:
export ZSH_HIGHLIGHT_HIGHLIGHTERS_DIR=/usr/local/share/zsh-syntax-highlighting/highlighters
MongoDB Install and Setup
https://stackoverflow.com/questions/57856809/installing-mongodb-with-homebrew
Install the Xcode command-line tools and the Homebrew from brew.sh/#install
xcode-select --install
Tap the MongoDB Homebrew Tap:
brew tap mongodb/brew
Verify installation prerequisites in the macOS Terminal:
brew tap | grep mongodb
Install MongoDB
brew install mongodb-community@4.4
Finally to run MongoDB (i.e. the mongod process) as a macOS service, issue the following
brew services start mongodb-community@4.4
Download and install MongoDB Compass https://www.mongodb.com/try/download/compass
Use the command brew list to see all installed packages
npm
Install Packages Globally
npm i -g babel-cli
npm i -g eslint
npm i -g expo-cli
npm i -g firebase-tools
npm i -g gatsby-cli
npm i -g jest
npm i -g lighthouse
npm i -g netlify-cli
npm i -g newman
npm i -g node-sass
npm i -g parcel-bundler
npm i -g pm2
npm i -g prettier
npm i -g serve
npm i -g spaceship-prompt
npm i -g surge
npm i -g typescript
npm i -g update
npm i -g vercel
Use the command npm list -g --depth 0 to see all installed packages
Pip
Install Packages
Use the command pip or pip3 to install depending on your system.
pip3 install astroid
pip3 install autopep8
pip3 install certifi
pip3 install chardet2
pip3 install click
pip3 install Flask
pip3 install Flask-Cors
pip3 install harperdb
pip3 install idna
pip3 install isort
pip3 install itsdangerous
pip3 install Jinja
pip3 install lazy-object-proxy
pip3 install MarkupSafe
pip3 install mccabe
pip3 install psycopg2
pip3 install psycopg2-binary
pip3 install pycodestyle
pip3 install pylint
pip3 install python-dotenv
pip3 install requests
pip3 install setuptools
pip3 install six
pip3 install toml
pip3 install urllib3
pip3 install Werkzeug
pip3 install wrapt
Use the command pip3 list or pip list to see all installed packages
Flutter Setup
https://flutter.dev/docs/get-started/install/macos
Also install the Flutter/Dart and Kotlin plugins and extensions for Visual Studio Code, IntelliJ IDEA CE, and Android Studio.
React Native Setup
Setup Terminal App and Code Editors
I am currently using the dracula theme in Visual Studio Code, IntelliJ IDEA CE, Android Studio and the Hyper Terminal.
Typeface
For typefaces I am using Jebrains Mono and FiraCode is currently my second choice.
https://www.jetbrains.com/lp/mono/
https://github.com/tonsky/FiraCode
Hyper Terminal
Install Plugins and customize
hyper i hypercwd
hyper i hyper-snazzy
hyper i hyper-dracula
// default font size in pixels for all tabs
fontSize: 16,
// font family with optional fallbacks
fontFamily: 'JetBrains Mono, Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
Visual Studio Code
If it is your first time using Visual Studio Code then do a clean install and configure it whicever way you want. Otherwise install the Settings Sync extension by Shan Khan and then do a download to sync your settings.
# Upload
SHIFT + OPTION + U
# Download
SHIFT + OPTION + D
As of January 2021 Visual Studio Code has a Settings Sync Feature which probably works the same but is in Early Release.
Set Visual Studio Code as the default editor for programming files by right clicking on that file, and going to "Open with" then change all.
Configure Visual Studio Code so that you can Launch from the command line
Extensions I have installed with Visual Studio Code
better-comments
bracket-pair-colorizer
code-beautifier
code-settings-sync
dart-code
debugger-for-chrome
dotenv
es7-react-js-snippets
flutter
gc-excelviewer
gitlens
graphql-for-vscode
HTMLHint
javascript-ejs-support
jupyter
Kotlin
LiveServer
material-icon-theme
mdx
mongodb-vscode
mssql
night-owl
npm-intellisense
open-in-browser
prettier-vscode
project-manager
python
quokka-vscode
rainbow-csv
remote-containers
shades-of-purple
theme-dracula
vsc-community-material-theme
vsc-material-theme
vsc-material-theme-icons
vscode-color
vscode-colorize
vscode-docker
vscode-eslint
vscode-graphql
vscode-import-cost
vscode-jest
vscode-markdownlint
vscode-npm-script
vscode-peacock
vscode-pull-request-github
vscode-styled-components
vscode-typescript-tslint-plugin