Hi there👋, I'm

Yao hua Shan

I like web things

Full Stack Developer, Clean Freak, Gamer, Pebble Wrestler, and Traveller.

About
portrait of Yao Hua Shan

I'm a full stack developer who loves exploring new tech and interconnecting different platforms to create seamless web experiences. I've mastered technologies like React, Angular, Nodejs, and MySQL (and a bunch of others that I'm too modest to list here).

I strive to write modular and organized code that's easy for anyone to understand, from onboarding interns to stakeholders. When I'm not coding, you can find me cleaning up, teleporting to Asia, cycling, bouldering, or playing competitive shooters – all of which help me stay sharp and creative.

Experience
  1. Full Stack Developer

    CAE Inc. @ Montreal, QC

    On my return at CAE, I played a key role in developing a robust backend infrastructure for a critical API microservice. Leveraging OpenAPI specification and Swagger, I created comprehensive documentation that streamlined integration efforts, leading to a increase in integration speed of other teams.

    My focus on infrastructure as code with Terraform and Dockerfacilitated consistent and efficient deployments throughAzure Pipelines CI/CD, reducing deployment times by 40%.

    In addition to these efforts, I built efficient ASP.NET Core APIs in C# using the CQRS (Command and Query Responsibility Segregation) pattern, resulting in a 20%improvement in query execution speed and significantly enhancing the scalability of the application. This experience deepened my understanding of best practices in API development and deployment on the cloud.

    company logo
  2. Full Stack Developer Intern

    CAE Inc. @ Montreal, QC

    During my COOP term at CAE, I sought out a bigger team and greater challenges. I was part of a frontend project that involved redesigning and refactoring a web platform, interfacing millions of flight data from around the world, to Angular 13, resulting in a 600% loading speedup.

    The most challenging part of the project was displaying dropdowns lists with 10,000+ items without degrading the user experience. To ensure quality, I properly documented and thoroughly tested all UI components and web pages using Angular UI tests and Jasmine.

    I also collaborated with my mentor to extend Material UI's Angular CDK and create a modular and customizable company-wide UI library, aimed at saving time for other departments. This experience taught me the importance of leveraging third-party tools and maintaining code quality.

    company logo
  3. Full Stack Developer Intern

    Simthetiq @ Montreal, QC

    My first COOP term was a fantastic opportunity to work alongside two knowledgeable mentors and gain hands-on experience with the MERN stack. As a full stack developer, I was responsible for designing, implementing, and testing a comprehensive CRUD module to manage customer orders.

    The highlight of my work was creating an intuitive dashboard that allowed our team to monitor ongoing orders and ensure timely delivery, boosting customer satisfaction and retention rates.

    In addition to developing the module, I integrated authentication using our existing Active Directory accounts and implemented JSON Web Tokens to secure our API routes. I meticulously tested each endpoint and function with Mocha to ensure robustness, covering every use case and input parameter to prevent any potential issues.

    Overall, my experience at Simthetiq taught me the importance of working closely with mentors, leveraging my knowledge of the MERN stack, and thoroughly testing code to ensure a successful product.

    company logo
Projects
Image of a hand holding a dumbbell

Workout App (WIP)

RepRecord is a project I am currently working on to help users track their exercises and progress. Users can create, update, and delete their workouts and exercises. This project is to challenge myself to integrate cloud services like AWS for authentication and data storage, while enhancing my skills in DevOps practices, CI/CD pipelines, and infrastructure as code.
Express
TS
AWS
Docker
Terraform
Image of a picture with a carousel.

Image Gallery

Image gallery containing a collection of my favourite photos from a recent trip. Created using Next.js and TailwindCSS, it was a fun challenge to use caching along with digital cloud storage to optimize the display of 100+ captivating images for the web. Do take a quick look!
React
TS
TailwindCSS
Next.js
Cloudinary
Image of a webpage with a profile and code icon.

This Portfolio

As a web developer, I always strive to keep my skills and portfolio up-to-date. Recently, I refreshed my portfolio to get familiar with TypeScript, while also getting dirty with Next.js and TailwindCSS. The design is inspired by Linear's amazing webpage. I'm excited to share my shot at something similar.
React
TS
TailwindCSS
Next.js
Image of a top-down view of a maze

3D Maze

I'm thrilled to present an ancient but fun 3D maze game project, which I created with a group of talented individuals. It was interesting to practice the concepts of shaders, vertices, textures, and camera movement. Through this project, I was able to hone my skills in 3D graphics, game development, and user experience design. (*Volume Warning*)
JS
WebGL
Image of Twitter logo linked to a heart icon

Tweet Sentiment Analysis

Soon to be replaced by AI myself, this report explains how we can leverage Neural Networks to categorize Twitter (or 'X') posts as positive, neutral, or negative. Curious about your own online aura? Experience it on Google Colab!
Python