Available for new opportunities

Hi, I'm Shunquan Wang
a passionate software developer.

Iconvert design into modern UI, tailwindcssbuild interactive UI using React 18 tsxbuild Android/iOS with JsBridge Frameworkgraphql

Stick around to see some of my work.

Learn more about me

Tech Stack:ReactNext.jsTypeScriptNode.js

SCROLL

About Me

My name is Shunquan Wang. I successfully graduated from Technical University, computer science faculty.

During my university years, I developed a deep passion for web programming, and I consistently engaged in learning new concepts and techniques in this field.

So, officially, my programming journey began in 2015 as a WordPress developer. I enjoy learning technologies that interest me, which is why I dedicated a significant amount of time to working with WordPress.

One day, I decided to try something new, and I started learning React. I was so excited to see how fast I can build a website with it. Consequently, I quickly learnt Next.js and used it to build some company projects.

Now, I thoroughly enjoy working with Next.js and Nest.js.

JOURNEY

2023
Responsible for the evolution of basic tools, promote the landing of next.js and nest.js, and engage in open source work
2022
I began to work on front-end infrastructure, responsible for the construction of the company's engineering system, and improved the landing of the node system in business
2021
Learn and master React.js deeply, and integrate into the React community
2018
Transition began to engage in front-end projects, began to contact the large front-end field
2015
Began to engage in android development, responsible for the company's main APP development and maintenance work

Open Source Contributions

track

📊 Data Collection

A typed, smart, scalable, powerful data collection engine for tracking user behavior and analytics.

TypeScriptAnalyticsData CollectionTracking

TypeScript

View on GitHub

code-inspector

🔍 Developer Tools

Easily inspect components in the browser, click to navigate source code in your local IDE.

TypeScriptDeveloper ToolsIDEDebugging

TypeScript

View on GitHub

eslint-config-hyperse

⚙️ Linting

A comprehensive ESLint and Prettier configuration for TypeScript projects, with support for monorepos and ESM. Optimized for Next.js and React applications.

TypeScriptESLintPrettierNext.js

TypeScript

View on GitHub

config-loader

📦 Config Management

A config loader that searches for and loads configuration files for your program, with support for `type:module`, `esm`, and `cjs` module formats.

TypeScriptConfigurationESMCJS

TypeScript

View on GitHub

next-config

🔐 Type-Safe Config

Type-safe environment variables and runtime configuration patterns for Next.js applications.

TypeScriptNext.jsConfigurationEnvironment

TypeScript

View on GitHub

ts-node

⚡ Performance

Faster TypeScript/JavaScript transformer without typechecking and node-gyp and postinstall script.

TypeScriptNode.jsTransformerBuild Tool

TypeScript

View on GitHub

Latest Projects

Next Portfolio

Sometimes it is quite normal to renew the design of a website. That's why I've decided to refresh my portfolio website using the new Next.js 13 . Now it looks better than old one. Framer motion animation while scrolling through the page, persisting dark mode, sanity backend for projects and filter. Finally I make my wishes come true!

NextChakra UIFramer motionEmotion CSS+3

React

Chat Room

An interview test project that aims to verify skills in understanding the task and building UI with React.

ReactTypescriptJotaiSWR+4

Proovia Delivery

One of my commercial projects built together with a full-stack developer. This represent a company project which consists of three parts: booking goods system, company website and client area. All this stuff has been built in Next, Typescript and Tailwind CSS.

NextTypescriptFramer motionTailwind CSS+5

Netty

NextJS project built-in using Hasura GraphQL, Magic link, Youtube API, Chakra UI. The functionality of this project allows visitors to watch, like, unlike and save videos to favourite.

NextHasura GraphQLMagic linkJWT+4

Javascript

Search films

Search for any stats like awards, box office, IMDB rating or votes for any movie. The app uses IMDB API, vanilla JavaScript and perform a comparison between 2 movies your are looking for.

JavascriptCSSHTML

React

RLibrary

Simple CRUD books system using Firebase/Firestore, Material UI, React, React Hook Form, React Router v6 and all these things bundled by vite

ReactContext APISuspenseFirebase+1

Portfolio Site

A Next.js portfolio project. This is my first NextJS project built after I have watched a NextJS crash course. I have chosen this technology because I fall in love with React and Next at first glance.

NextNext SEOReact modalReact image gallery+1

React

Cryptocurrency

Cryptocurrency has been built up using Ant design, RTK Query, ChartJS, Coinranking and Bing News API. I have learnt a lot of interesting technologies like RTK Query, ChartJS as well as integrating custom features into Ant components like filter/sorting data, view blocks as list/grid or implementing load more component.

ReactAntDReduxRTK Query+2

React

React Todo/Blog

This React application combines a todo and blog page with a react hook contact form. The whole used stack is pointed below.

ReactReact hook formReact transition groupReact modal+4

Javascript

Secret message

Just a simple application with the aim to encrypt the words/characters you type in a text box and share the generated url to your friends as to decrypt the message.

JavascriptHTMLCSSMaterialize CSS

Javascript

Dogs API

This is a small vanilla JS project using dogs api to fetch dogs breed. Built this app while I was learning JavaScript language. It's pretty simple one and it performs a specific function - to showcase a slideshow when visitor select a dog breed.

JavascriptHTMLCSS

Javascript

Click Colour

What a frontend developer doesn't build up a similar application? This app uses custom CSS properties for the UI and only pure JavaScript code to change color clicking get color button. Simple as that!

JavascriptHTMLCSS