Waleed's Logo


30 August, 2021

Media Club Website

Collaborating with my friend Abdullah Mzaien, we made a website for the media club (النادي الإعلامي) at my university. This website serves as an online platform for the content created and published by the media club. It features low cost and great editor experience by integrating different third-party services along with the Gatsby framework for statically generating the website pages.

GatsbyGraphQLChakraUIAlgolia Search

14 March, 2021

Real Time Devs Hub Application

A real time web application that allows developers to join rooms and discuss specific topics as well as create their own rooms. It is a server-side Node.js app which utilizes Express.js as a backend framework, Socket.io for WebSocket communication, MongoDB as a database and GitHub OAuth for authentication.

Node.jsExpress.jsSocket.ioMongoDBHandlebarsBulmaCSSGitHub OAuth

22 November, 2020

GitHub Jobs Application

A web application that displays jobs using GitHub Jobs API and provides filtering and details features. I made it to practice building dynamic apps using Gatsby and TailwindCSS. It makes use of Context API and React Hooks for global state.

GatsbyTailwindCSSstyled-componentsfetch APIContext APIReact Hooks

10 July, 2020

Shortly Landing Page

A simple landing page for a fictional company called Shortly. It provides shortening URLs feature using an external service. I made it to practice building complete landing pages using vanilla CSS (with BEM convention).

ReactSassBEMfetch API

23 June, 2020

Huddle Landing Page

A simple landing page for a fictional company called Huddle. I built it using HTML and CSS (with Sass) to practice making basic full layouts using vanilla CSS skills such as positioning, pseudo classes, flex, grid and so on.


5 February, 2020

Quizzes Web App

A web application that provides basic features of an online quizzes system using React and MaterialUI. I made it to practice making functional components utilizing React Hooks and JavaScript ES6 features.

ReactMaterialUIReact Hooks

10 August, 2019

MERN Shopping Application

This was the first project I make using the MERN stack (React, Node, Express and MongoDB) to practice making full stack applications. It is a simple shopping application that has basic features such as browsing items and adding items to cart. I learned a lot from this application on things such as authentication, making API requests/endpoints, designing layouts with Bootstrap 4, managing state and more.

ReactBootstrap 4NodeExpressMongoDB
© 2022 Waleed Alfaifi