I'm Waleed.

 

Front End Developer

What I Do

Shopify

React

Vue

Front End

UX

Game Dev

Work

Toy Log (WIP as of 2023)

Personal Project

View CodeSandbox prototype


A work in progress. I collection action figures (primarily Transformers, some Lego, some others). While other alternatives to maintaining a database of items exist (other websites or apps, or an Excel file even), I wanted to make something myself.

At the moment: it's just a to-do list, but theres a long list of features to be added.

Current stack: React front-end only

Future stack: React plus MongoDB/Express/Node

  1. Date added - requires date picker
  2. Change delete button to recycle bin icon
  3. Only show delete button on hovering over the item
  4. Add networking - will require a lot of work!
  5. Prettify the rest of the web app
  6. Networking: Login/logout properly (and save locally?)
  7. Networking: save collections to account
  8. Networking feature: Add little loading animations to anything that loads information
  9. Routing: user login/sign up page
  10. Routing: view user collections (.com/username?)

Collection Template 2.0

Sukoshi Mart

View Page

While the online store transitioned to the Shopify 2.0 themes, which another developer was handling, I was in charge of creating the 2.0 collection template.

The new functionality of the collection page was to have endless scrolling along with filters specifically for the brands available on each collection.

Shopify by default doesn't support endless scrolling pagination, but with some HTTP request tricks, you CAN add parts of pages or in this case, the product card elements, on to the same page.

Since the content loads fast enough, it also lets me delete and update parts of the page, which is how the brand filter works. Click on any of the "Brand" tags on the lower left hand panel, and it'll delete all products on the page and load in products that match the Brand filter.

Almost all the main collections use this template, so you can browse larger or smaller collections.

There have been significant changes to the endless scrolling/filtering system for collections since I left Sukoshi Mart: the collections no longer have endless scrolling, the brand filtering still exists, but keeps things paginated.

Help Centre Prototype

The Brick

View Codepen Prototype

Given the task of entirely recreating the Help Centre page on The Brick's website, I took inspiration from various other online stores, but one design I liked was Staples' Help Centre.

It looks fairly similar to the Staples design, but there was one thing that bothered me about it: searching for anything required loading a new page of search results. The Brick's Help Centre is fairly small, in comparison, so I thought it'd be a waste of resources to have a search system just for the help centre.

Instead, I thought about previous projects I have worked on, and remembered an instant search/filter system I tried making before, which filtered out data coming in from an HTTP request.

This Help Centre page instead has an instant search filter that hides elements that don't contain the current search term. It uses a CDN version of a NPM module, Mark.js, which highlights and removes the highlight from the search term, as the user types out a search term.

Financial Calculation Prototype

The Brick

View Codepen Prototype

A little UI element that displays what a product would cost if you purchased it with either the red The Brick card or the green The Brick card, which had different payment setups.

While the live product design is just some basic styling and no moving parts, I was very proud of how this looked and felt to use.

Elden Ring Challenge Run Generator

Personal Project

View Codepen Source

Originally built as a Skyrim rogue-like run generator, as part of a massive Skyrim mod setup I was using to create a rogue-like Skyrim (after you'd die, you'd create a new character and start from scratch).

I switched it up since Skyrim Special Edition got a major update which broke a big chunk of my mods, and I was playing Elden Ring and thought of modifying it for Elden Ring.

Vue To Do List

Personal Project

View Codepen Source

A basic to do list in Vue, but with some design/styling I think works really well.

Vue Timer

Personal Project

View Codepen Source

A timer built in Vue, with a few different time options.

Unity/C# Asteroids Game

Personal Project

View Github Source
View Playable Demo
(desktop/laptop only)


Unity game, built in C#, with assets hand drawn in Paint by myself. I like how everything works, and I'm especially proud of the jet/flame flicker animation.

Contact

Email: {{ clickMe }}