Web Projects

BooksNBucks parent portal was integrated with other existing portals and features include account registrations, receiving notifications, adding/removing students, approving/rejecting purchase requests, and viewing students’ grades and attendance.

1. Led an 8-people development team to design and develop a parent portal for BooksNBucks. Organized Sprint development cycle and monitored the entire development process.
2. Structured frontend and backend codes into a well-organized MVC framework for better collaboration and maintenance.
3. Utilized HTML/CSS/JS with Next.js to build dynamic, server-side rendered frontend pages; Used Node.js and Express to build a REST API and used Mongoose to perform CRUD operations on the database that was stored on MongoDB.

Technologies Used: HTML, CSS, JavasScript, React.js, Next.js, Node.js, Express, MongoDB.

Every Penny is a ledger web app with full CRUD functionality including account registrations, adding/editing/deleting expenses, bookmarking, and viewing spending history with dynamic charts and tables.

1. Employed bcrypt password-hashing to ensure the security of account registration/login.
2. Built the frontend with React.js and the backend built with Node.js & Express (REST API). Used TablePlus to store and manage a PostgreSQL database.

Technologies Used: HTML, CSS, JavasScript, React.js, Node.js, bcrypt, Express, PostgreSQL.

SummonerSearch is a summoner search engine that allows League of Legends players to search for summoner’s(gamers) names and get their info like ranked, wins, loss, etc. It also has a compare function for users to compare two summoners.

Core Features:

1. Search for summoner's ranking information.
2. Compare two summoners.

Technologies Used: HTML, CSS, JavasScript, PHP, Bootstrap, JSON, AJAX, and Riot API.

This is a restaurant website that displays information about Con Fusion (a class project, not a real restaurant).

Core Features:

1. Dynamically display promotion, feature dish, feature leader on home page.
2. Allows users to view comments on dishes and add comments.

Technologies Used: HTML, CSS, JavasScript, React.js, and Bootstrap.

This is a landing page for Motorcar Parts of America’s QUALITY-BUILT product launch.

Purpose:

1. Display core features of the products.
2. Explain why QUALITY-BUILT is a smarter choice.
3. Invite users to sign up for newsletters

Technologies Used: HTML, CSS, JavasScript, and HubL (templating language on HubSpot).

This is the official website of a USC filmmaking club called High Five Productions.

Purpose:

1. Showcase club’s major productions.
2. Display core team members. 

Technologies Used: HTML, CSS, and Bootstrap.

This is a small Web APP that measures how fast you can finish typing a paragraph.

Technologies Used: HTML, CSS, JavasScript, React.js, and Bootstrap.

This is a simple web-based calculator.

Technologies Used: HTML, CSS, and JavaScript.