DEV Community

Cover image for the-tech-tools-I-use-as-frontend-engineer
Rajesh Royal
Rajesh Royal

Posted on

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

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 (1)

Collapse
kr4idle profile image
Pete Steven

You can also try Desech Studio to import your adobe xd design file and then after slight adjustments you have a clean html structure positioned with css grids.