the-tech-tools-I-use-as-frontend-engineer
Tags: javascript, react, gatsby, vscode
Published: 2020-10-05 01:40:17

A list of tools I use Daily:
whether I'm working on 

- Personal side projects
- My full-time job
- Or working on Upwork with clients

## Design tools

- [Adobe Illustrator](https://www.amazon.com/gp/product/B01N5FIIDB) for logo, icon and illustration design
- Adobe XD for designing user interfaces & wireframes
- [Photoshop](https://www.photoshop.com/en) for editing pictures
- Adobe After Effect for editing videos
- Dribbble/Behance for inspiration and work showcase.
- Dev.to for blogging [rajeshroyal](https://dev.to/rajeshroyal)
- Grammarly as writing assistance.

## Code

The code editor I'm currently using is VSCode with [Cobalt theme](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) and Dank mono font.

You can find my [VSCode settings here](https://gist.github.com/Rajesh-Royal/588d4896ec9841b2cce2773de6b26026)

I share my code & look for inspiration on:

- [GitHub](https://github.com/Rajesh-Royal)
- Codepen
- CodeSandbox

If I’m simply coding an interface that I might integrate into a web app I use plain HTML/CSS & vanilla JavaScript.

> I made my personal [Html5 boilerplate](https://github.com/Rajesh-Royal/extended-html5-boilerplate-vscode/) to speed up that process. It has 6K+ downloads on [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=rajeshroyal896.extended-html5-boilerplate)

But if I'm working on a landing page, documentation website, blog or even a large web app I use:

### Primary stack

- The JAM stack:
  - Gatsby
  - Serverless functions are written in JavaScript (when required)
  - Headless CMS (when required) otherwise WordPress
  - Markdown, Yaml, Json etc... (when required)

For CSS, I’m cool to use whatever tech available out there that makes my task done quickly & well, I have personally used Bootstrap 4, Bulma, tailwind, Foundation. I prefer coding with vanilla CSS or CSS in JS using styled-components or CSS modules, because I enjoy styling my elements from scratch since the components are fully reusable with React.
I have used Theme UI and styled-system as well, I do think they are good and useful and I do recommend them.

### Secondary stack

- MERN stack:

  - MongoDB
  - Express
  - React (CRA)
  - Node Js

or
NestJS instead of express

The MERN stack is my secondary stack for building web apps

I use Git bash as my terminal when I’m on windows, Terminal when I’m on Linux.

For the backend, I was using PHP/MySQL which I didn’t personally like, so I switched to Node js meaning that I currently use Express Js/Mongoose and MongoDB as a NoSQL database to make Restful APIs which I deploy on Heroku if it was an MVP.

### Optional stack

This can be part of the JAM stack

> the "A" part on JAM which stands for APIs

- Firestore
- FaunaDB
- Auth0
- ...

### Mobile stack

- React Native
  > I have used Cordova before didn't like it

For native apps, I use React Native to build mobile apps (ios & Android).

### Deployment

- Vercel/Netlify using their GitHub integration or the Vercel/Netlify CLI
- Amazon AWS
- App Store / Play Store using Fastlane

## Growth

For growth, I focus more on building useful products that users really need in their lives then I simply share it on this blog, dev.to, Reddit and on social media.

## Setup

### Laptop

> Personal

- [Acer Nitro 5"](https://www.amazon.in/Acer-AN515-54-15-6-inch-i5-9300H-processor/dp/B0894NY25W)
  - Display: 15.6" IPS (In-Plane Switching) technology, Full HD 1920 x 1080
  - Processor: Intel Core i5-9300H processor, turbo up to 4.10 GHz
  - Graphics: NVIDIA GeForce GTX 1650 with 4 GB of Dedicated GDDR5 VRAM Graphics
  - Ram: 24 GB 2667 MHz DDR4(16 GB) / 2467 MHz DDR4 (8 GB) <sub>I know different freq. 😅</sub>
  - SSD: 256 GB
  - HDD: 1 TB

### Equipment

- Monitor: LG 24 Inch
- Keyboard: Zebronics, Acer RGB keyboard
- Main Headset: Boat Rockerz
- Secondary headset: PTron Boom 3D
- Earphones: PTron Boom 3D
- Microphone: PTron Boom 3D
- Desk: Simple wooden desk
- Mouse: Eastern Media model T9 multicolour
- Mousepad: My desk 😅

### Phones

- For Android, I'm using the Asus Zenfone Max Pro
  - Android 11
- For iOS, I'm using the iPhone 7
  - pending......

Previously, I was carrying only an Intext Aqua Power HD which I had to stop using due to some reasons

### Cameras

At the moment, I'm only carrying with me a Mobile Camera 😞

### Ai assistant

Currently, I'm using "OK Google"

### VR

Acer Mixed Reality

#### Your tools in the comments are more than welcome