Hi, my name is Ahmar Ali

I build, on the web and on the ground.

I’m a frontend developer with knowledge of Next JS, React, React Native, Javascript, CSS And HTML.
I am also a certified Project Management Professional (PMP)

Get in Touch

About Me

Not long ago, I was an architect. A building building architect, not the building apps kind. And a construction project manager. Then a pandemic happened.

I just wanted to make a simple website. So I bought an online course from a YouTube ad which promised to teach me how to make a website, among other things like millions of dollars and a fool of my clients. It also taught me not to bother with obsolete technologies such as html ,css and javascript. I did learn about making wordpress sites. Since an "inception" of divs inside divs was not to my taste, I also learned to bother.

Time-travel a few months forward, I found MDN and the world of online tutorials. Then one curiosity led to another and I learned HTML, CS, JS, React and was making some fun applications using it. I also discovered other technologies on the way. I tried designing with UI principles, frameworks like Next JS, Vue and Svelte, and CSS technologies like BEM, Sass, Less, Bootstrap, Tailwind, Bulma and styled components.

I still find it a little unbelievable that whole apps can be written on the web.I have stumbled through the looking glass. This is fun.

profile-photo

Skills

HTML

  • W3 verified responsive HTML.
  • Semantic Layout Elements.
  • Clean human readable code.
  • Multimedia elements and forms.
Responsive Semantic Forms Multimedia

CSS

  • Organized structured CSS.
  • Responsive mobile-first layouts.
  • UI Design Principles.
  • CSS Libraries and processors- Tailwind, LESS, SASS
Grid Flexbox BEM LESS Tailwind Bootstrap

Javascript- ES6+

  • Typescript.
  • Modern JS - upto ES2021.
  • HTML control with DOM API
  • Fetch API with get, post, put and delete.
  • Data manipulation with Array methods
Fetch API DOM API Async JS Array Methods Typescript

React

  • Modern React with Hooks.
  • Native Apps with React native
  • State management with redux/recoil
  • CSS-in-JS libraries -tailwind, styled components
  • Use of Controlled Forms
React Native Redux/ Recoil Hooks Contexts React Router Styled Components

Next.JS

  • Multi-page apps with page routing
  • Server Side Rendering for dynamic pages
  • Static Site Generation for static pages
  • API routes and cloud functions
  • Next-auth authentication with google/facebook/twitter
SSR SSG API Routes Page Routing

Other Tools and Technologies

  • Version Control with Git
  • SQL/ NoSQL DB with Firebase, MongoDB, Supabase.
  • CMS with Sanity IO, Strapi, Ghost and Wordpress.
  • Basic UI design with Figma.
Git Github Netlify Vercel Database CMS Figma

Portfolio

facebook app

Facebook Clone

Live Code

A limited functionality facebbok clone app made with Next JS and Tailwind CSS. The app uses next-auth with facebook login for user authentication. Firebase is used as the backend database and Users can post comments and upload photos.

Next JS Tailwind CSS React Facebook Authentication Firebase Firestore Server Side Rendering
Google Docs app

Google Docs Clone

Live Code

A Google Docs clone app made with Next JS and Tailwind CSS. The project use draft js and react-draft-wysiwyg for rich text editor. The app uses next-auth with google login for user authentication. Firebase is used as the backend database.

Next JS Tailwind CSS React Google Authentication Firebase Firestore Draft js
amazon app

Amazon Clone

Live Code

An Amazon clone app made with Next JS and Tailwind CSS. The app uses Redux toolkit for state management, next-auth with facebook login for user authentication. Firebase is used as the backend database and Stripe API for checkout.

Next JS Tailwind CSS Redux Toolkit Facebook Authentication Firebase Firestore Stripe API
twitter app

Twitter Clone

Live Code

A twitter clone app made with Next JS and Tailwind CSS. Sanity CMS for data storage and next-auth for user authentication for the backend. The app use server side rendering to fetch tweets.

Next JS Tailwind CSS React Twitter Authentication Sanity CMS Server Side Rendering
Uber app

Uber Clone

Code

A React native app made with expo and styled with tailwind CSS. The App uses redux toolkit for state management. The maps are displayed using react native maps and map data and directions are queried from Google Places API and Google Directions API.

React Native Tailwind CSS Redux Toolkit Maps Google Places API
Tinder app

Tinder Clone

Code

A React native app made with expo and styled with tailwind CSS. The app implememnts matching and chat with matched users. The App uses Google Authentication with Firebase and firebase firestore as database. Context API is used for storing auth state globally.

React Native Tailwind CSS Google Auth Firebase Context API
Tinder app

Deliveroo Clone

Code

A React native app made with expo and styled with tailwind CSS. Sanity CMS is used for backend database. Redux toolkit is used for managing state.

React Native Tailwind CSS Sanity CMS Redux Toolkit
Signal app

Signal Clone

Code

A React native app made with expo and styled with tailwind CSS. Firebase is used for user authentication and as backend database.

React Native Tailwind CSS Firebase Authentication Firebase Firestore
medium clone app

Medium Clone

Live Code

A medium clone -blogging app made with Next JS and Tailwind CSS. The app use server side rendering for the home pages and static side generation for the blog pages. The app uses Sanity CMS for backend.

Next JS Tailwind CSS React Sanity CMS Static Site Generation Server Side Rendering
airBnb Clone app

AirBnb Clone

Live Code

A limited functionality AirBnb clone app made with Next JS and Tailwind CSS. This homepage use static site generation. The app uses hardcoded data for properties but with mapbox integration to show their loaction on the map.

Next JS Tailwind CSS React Mapbox Static Siite Generation
new app

News App

Live Code

The app is made with React and Vanilla CSS. The app fetches and displays the latest news headlines from NYTimes API. There are 26 user selectable categories to choose from. Choosing a category fetches the relevant categorized news.

React Hooks Fetch API Array Methods CSS
hulu app

Hulu Clone

Live Code

A Hulu clone app made with Next JS and Tailwind CSS. The project used movies DB as a data source.The app uses Server side generated page every time a request is made.

Next JS React Tailwind CSS SSR REST API
todo app

Todo App

Live Code

A todo-app made with React, Vanilla CSS and Firebase database as backend. The app is based on the GTD philosophy. Tasks can be created, edited, deleted and completed. The tasks are organized by categories and projects.

React Hooks Controlled Forms Firebase CSS
notes app

Notes App

Live Code

A basic notes app made with React, Vanilla CSS and using firebase database as backend. Users can add , edit and delete data.

React Hooks Controlled Forms Firebase CSS

TV show search

Code

A simple TV show search app that finds TV shows by name. The app fetches data from TV maze API and displays the first 10 results in a grid.

React Fetch API CSS Grid

Classic Snake Game

Code

The classic game is written in Vanilla JS, HTML and CSS. The app was based on a previous tutorial by Ania kubow.

Vanilla JS CSS

A Dice Game

Code

A basic 2 player dice game written in Vanilla JS, HTML and CSS. This game was made as part of a tutorial on Scrimba.

Vanilla JS CSS HTML

Monochrome Theme Generator

Code

A simple app that generates a monochrome color scheme based on a random color. The color values are displayed and can be copied for color scheme. The app is made with vanilla JS, CSS and HTML.

Vanilla JS CSS HTML

A Landing Page

Code

A responsive landing page written in HTML and CSS. This page was made as part of an exercise in Scrimba.

Vanilla JS CSS HTML

A Dynamic Search Component

Code

A dynamic search component written in React. The component was made as part of a Scrimba tutorial.

React Hooks CSS

Get in Touch

You can reach me here