hero

BRIAN QIAN

ABOUT

WORK

About Me

Developer. Problem Solver. Front-end specialist.

I'm a fullstack dev that works primarily with React for the frontend and Node/MySQL for the backend. I'm a bootcamp grad from UC Berkeley but I would consider myself mostly self-taught.

The bootcamp taught me everything leading up to React: HTML/CSS, vanilla Javascript, jQuery, and SQL/NoSQL databases. After the bootcamp, I picked up Redux and the Context API for state management, Jest/Enzyme for testing, and Webpack/Babel for build tools. I've also learned to use more modern tools like Typescript and NextJS for server-side rendering. As class-based architecture in React faded, I've familiarized myself with hooks and how to use them effectively.
I'm always learning and always getting better.

Work

Babl
Built with: HTML/CSS, React, Material-UI, Node, Express, MongoDB, AWS, Socket.io

Babl

Babl is a real-time messaging application, very similar to another project, Websocket.io in concept. The main difference being this project has a translation layer on top that lets users communicate to each other in their own preferred language. User logins are persisted through JWT authentication backed by a Mongo Atlas instance. This was a team project where I was responsible for messaging, database structure/controllers, websocket integration, route design, read/typing notifications, backend authentication, and front end state management. Other features include translation, Material-UI design, user avatars hosted on AWS, and email invites using the SendGrid API.

Code

Website

EventSpotter
Built with: HTML/CSS (styled-components), React, NextJS, Node/Express, SQL, Jest, Enzyme

EventSpotter

Eventspotter is a platform that syncs with a user's Spotify account to find their top artists and generate a calendar using the SeatGeek API. Evenspotter is a server-side rendered app using the NextJS framework. The app is separated into two repositories for the frontend and a backend API. Currently the project uses JWTs in cookies to authenticate the user across logins. This project also features custom middleware, error handling, and a modified data structure to cache users. The majority of the application uses functional components and React Hooks

Code

Website

Websocket.io
Built with: HTML, CSS/Sass, Javascript, Typescript, Node/Express, Webpack, Babel

Websocket.io

Websocket.io is a real-time chat application using the Websocket API. It started as a simple project to just learn Websocket technology but I decided to use this project to learn Typescript, Webpack, and Babel. Since this was intended to be small all DOM manipulation is in vanilla Javascript with plans to further refactor into React.

Code

Website

nSuns Calculator
Built with: HTML, CSS, Javascript, React, Redux, Node/Express, SQL, Jest, Enzyme

nSuns Calculator

This is a React/Redux calculator app for the nSuns workout program. Features include interchangeable training and rep maxs, rest timer, workout tracker, and a customizable accessory tracker. The app uses JWT (JSON Web Tokens) to persist user authorization and bcrypt for password hashing

Code

Website

Google Books API
Built with: HTML, CSS, Javascript, React, Node, Jest, Enzyme

Google Books API

An application that uses the Google Books API for a primary search and cross references searches with Wikipedia's API and Amazon's search. This project is built in React with a Node backend with tests written in Jest/Enzyme

Code

Website

SnackTime
Built with: HTML, CSS, Javascript, React, Node/Express, SQL, Material-UI

SnackTime

Responsible for: building our reused custom components and handling user authentication on the front end. Snacktime is a solution for busy parents and daycares by creating an easy way to share and log information. Uses session storage to persist user login. Test login: admin@example.org / password

Code

Website

DevLab
Built with: HTML, CSS, Javascript, jQuery, Node/Express, SQL

DevLab

Responsible for: strategy and front end structure, API calls, database models. DevLab is a collaborative resource dedicated to help people learn web development. Resources are pooled into a library where individual users can save content to their own library. Each time content is saved, it's ranked to provide easy access to the most popular resources. Test login: admin@example.org / password

Code

Website

Leave a message!

Email me here or drop me a line below!