loading...
Cover image for the-tech-tools-I-use-as-frontend-engineer

the-tech-tools-I-use-as-frontend-engineer

rajeshroyal profile image Rajesh Royal ・3 min read

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 for logo, icon and illustration design
  • Adobe XD for designing user interfaces & wireframes
  • Photoshop for editing pictures
  • Adobe After Effect for editing videos
  • Dribbble/Behance for inspiration and work showcase.
  • Dev.to for blogging rajeshroyal
  • Grammarly as writing assistance.

Code

The code editor I'm currently using is VSCode with Cobalt theme and Dank mono font.

You can find my VSCode settings here

I share my code & look for inspiration on:

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 to speed up that process. It has 6K+ downloads on VSCode marketplace

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"
    • 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) I know different freq. 😅
    • 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

Discussion

pic
Editor guide