The tech tools I use

A list of tools I use whether for:

• Personal side projects
• My full time job
• Or working with clients

Design tools

• Midjourney for logo, icon and illustration design
• Figma for designing user interfaces & wireframes
• Final cut pro for editing videos
• Dribbble/Behance for inspiration and work showcase

Code

The code editor I'm currently using is VSCode

I share my code & look for inspiration on:

• Twitter
• GitHub
• Codepen
• CodeSandbox

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

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

Primary stack

• Language: TypScript
• Web framework: Next.js
• Styling: Tailwindcss
• Forms: Formik, Yup
• Payments: Stripe
• Web3: Rainbowkit, WAGMI, SIWE
• Server state: React-query
• Client state: Context, useReducer, useState, useContextSelector or libraries like Jotai/Zustand etc...
• Next API routes or Serverless functions written in TypeScript
• Headless CMS: Contentful
• next-seo for SEO
• Databases: Postgres or Mongodb (depending on the use case)
• Server caching: Redis
• ORM: TypeORM/Mongoose
• API framework: Express or Fastify

I Have used CRA (create-react-app), Gatsby, Jekyll and Pelican previously, but prefer Next.js as it's clearly the winner here.

Side note for CSS, I’m cool to use what ever tech available out there that makes my task done quickly & well, I have personally used Bootstrap 3 & 4, Bulma, Lostgrid, Materliaze, Skeleton, Tailwindcss, Styled-components, emotion, CSS modules, Tachyons & made my own micro CSS framework called Unnamed that has over 200 stars on GitHub. Still I prefer using Tailwindcss.

To speed up development, I usually use the following boilerplates, some are open sourced some are not but will be available for sale soon.

• CRA boilerplate
• REST API boilerplate
• Next.js with Apollo
• GraphQL API with typeORM

More to be added

Mobile stack

React Native

I have used Ionic before, I didn't like it as much as RN.

• RN Boilerplate

Deployment

• Vercel using their GitHub intergration
• Digital Ocean in a manual way
• App Store / Play Store using Fastlane

Issue, expenses/income tracking and project management

• Notion - for tracking everything
• Linear - for tracking issues on some serious personal projects

Bank

• Attijariwafa Bank
• Mercury
• N26

Setup

Laptop

Don't longer ask for work laptop, it's frustrating to have to give it back.

• MacBook Pro (14-inch, 2021)

  • Display: 14-inch (3024 × 1964) Built-in Liquid Retina XDR Display
  • Apple chip: Apple M1 Max
  • Ram: 32 GB
  • SSD: 2 Tb

Equipment

• Monitor: LG UltraWide 34WP85C
• Keyboard: Keychron K2 (Hot-swappable) Wireless Mechanical Keyboard (Version 2)
• Main Headset: Sony WH-1000XM4
• Earphones: Apple Airpods
• Microphone: NAN
• Desk: TROTTEN Ikea desk
• Mouse: Logitech MX Master 3
• Trackpad: Apple Magic trackpad 2 gray
• Mousepad: Sidorenko XXL Gaming Mousepad
• Chair: Steelcase Gesture office chair with cover in onyx black with headrest
• Webcam: Razer Kiyo

Phones

• For iOS, I'm using the iPhone 13 Pro with a Dbrand Grip case and dragon skin which is my main phone
  • iOS 16
• For Android, I'm using the Google Pixel 2 with a Dbrand dragon skin
  • Android 11

Cameras

At the moment, I'm only carrying with me a GoPro hero 7 black edition limited edition

VR

Oculus Quest 2

Drone

DJI mini 2

Gaming

• Nintendo Switch Oled with a Pro controller and a wirelss horipad
• PS5 CD edition with 2 controllers
• A PC Gamer (will share specs soon)