web dev image

About Me

Hello! My name is Mohammad Ahnaf, and I am a passionate Full Stack Developer with a keen eye for detail and a love for creating dynamic, user-friendly websites. With a strong foundation in Python, JavaScript, React, Node.js, Express.js, Passport.js, PostgreSQL, Prisma ORM, HTML, CSS and TailwindCSS, I have the skills and expertise to bring your digital vision to life.

My Work

Messaging App

blog api project

Built a full stack messaging app similar to Discord/Telegram! Created a Restful API with various semantic routes using Node.js and Express.js. Carried out 50+ integration tests on the API using supertest and jest to ensure app reliability. Handled user authentication/authorization using jsonwebtoken and Passport's LocalStrategy. Validated form fields on the client and server using Constraint API & express-validator. App includes functionality to CRUD messages & user's profiles! Added feature to upload images and files using Multer. Built frontend using React, handled client side routing using the React Router. Used the Context API / Outlets & various React hooks. Also created reusable React components

github icon open in new icon

Blog API

blog api project

Created a REST API backend to interact with the front end. Conducted many integration tests on the API using supertest and jest to ensure app reliability. Users are able to register an account as an author or a user and login. Authors are able to CRUD posts and comment on other posts. Users are able to CRUD comments and view posts. Enabled user authentication using jsonwebtoken storing the token on the client in LocalStorage. Handled all database queries using prisma. Styled app using TailwindCSS. Created frontend usind React and handled client side routing using React Router

github icon

File Uploader

file Uploader project

A stripped down version of Google Drive! Users can sign up with an account and log in. Implemented the passport.js LocalStrategy for authenticating users upon Log In. Stored user credentials in a postgreSQL database modelled using prisma! Hashed user passwords for extra security using bcryptjs. Conducted server-side form validations for the sign up and log in forms and displayed proper error messages to enhance user experience and provide proper guidance on the expected input fields! Users are able to CRUD(Create, Read, Update, Delete) folders and upload files inside them.

github icon

Shopping Cart

shopping cart project

Created a template online shopping site using data from fakeStore API! Implemented a live search filter as well as a sort by price feature. Used React concepts including the React Router to form a multipage shopping site. Also implemented unit tests using the RTL (React testing library) library. Made custom error pages to handle bad URL endpoints! Cached the data fetched from API so it only fetches on app mount to minimise load times

github icon open in new icon

CV App

cv project

Generate your CV on the fly using my cv generator, featuring download and print functionality. Made use of React state hooks. Used the react to print library to implement a pdf download and print function

github icon open in new icon

To Do List

to do list project

Created a To Do List application using JS HTML CSS and Webpack to bundle all files together. Used javascript OOP principles to create project folders using javascript classes as well as a task object using classes to hold tasks inside of project folders. Also used the date-fns library for date manipulation and to display tasks due within a month!

github icon open in new icon

Memory card game

memory card game project

Created a simple memory cards game using the React library, making use of React hooks. Used the PokeAPI to fetch pokemon images on app mount. Test your memory, try and get all 16 points

github icon open in new icon

Weather App

weather app project

Track the weather with this App! Made using Visual Crossing API! Used javascript HTML CSS to design a weather app using the Grid layout in CSS. Implemented a converter between Celsius and Fahrenheit. Used JS DOM manipulation concepts to display data from the API

github icon open in new icon

Battleship

battleship project

Recreated the online battleship game using JS HTML CSS and webpack for file managing and bundling! Implemented JS OOP concepts with the use of javascript classes to create Gameboard, Player and Ship classes! Applied a random ship placement function for the user. Enhanced Computer AI by implementing a Level Order Traversal algorithm with the use of the queue data structure to enable computer to attack adjacent ships! Try and sink all the computer's ships!

github icon open in new icon

Python Countdown Timer

timer project

Created a Python Timer app using tkinter! Used Python OOP principles with the use of classes to create each part of the apps layout! Added functionality to support date inputs in 3 formats! Also added a beep sound once timer ends as well as a snooze button to pause the beep. Used various python libraries for formatting date and time to show a countdown!

github icon open in new icon

Restaurant Page

restaurant page project

Made a template restaurant page including menu, contact and about tabs! Made using Javascript HTML and CSS! Bundled files using Webpack! Implemented various DOM manipulation techniques

github icon open in new icon

calculator

calculator project

Calculator made using JavaScript/HTML/CSS with keyboard support! Used JS DOM manipulation techniques as well as event handlers for the keyboard support

github icon open in new icon

Admin Dashboard

dashboard project

Created a template admin dashboard using HTML and CSS! Made using CSS Grid layouts and as well as Flexbox

github icon open in new icon