“ This is Amber Pan~ Welcome to my site~~ ”

  • An individual project:

    e-Commerce platform with full-stack engineering, "Heehee," from engineering & designing to implementation using the MERN model.

    It is meant to be a modern, user-friendly shopping experience with advanced features including backend-to-frontend user authentication, authenticated user paths with tokens, protected payment integration (PayPal and credit/debit card methods), and user/admin management functionalities with complete interfaces to all clients.

  • JavaScript (ES6+), React, Node.js, Express, Redux, MongoDB (Mongoose),JWT, HTTP-only cookies, React Router, PayPal API, Git, GitHub, React-Bootstrap, Postman

  • Developed a full-stack eCommerce platform for Heehee," from engineering & designing, to implementation using the MERN stack. It is a modern, user-friendly shopping experience with advanced features including backend-to-frontend user authentication, authenticated user paths with tokens, protected payment integration (PayPal and credit/debit card methods), and user/admin management functionalities with complete interfaces to all clients.

    • Built with React.js, Node.js, Express, and used Redux for state management, centering server-side functionality and secure data flow along with pleasing UI.

    • Used MongoDB database with Mongoose for data storage and manipulation, including custom database seeder scripts for streamlined data operations (e.g., delete all datas & import all datas in a run), clearing and populating users, products, and orders.

    • Developed fully responsive user interfaces(mobile, tablet or desktop) React, React-Bootstrap, and Toastify. Built reusable components such as CheckoutSteps, Headers, Loaders, PrivateRoute, Ratings, and Reviews, and integrated them into screens like HomeScreen, CartScreen, OrderScreen, and RegisterScreen.

    • Implemented React Router for navigation, including distinct paths for regular users, authenticated users, and admins. Organized all routes in a centralized index.js file for easy scalability and maintenance.

    • Managed global state with Redux, creating slices to cover different API endpoints. Utilized common hooks, reducers and builder functions like query and mutation for state updates and validation.

    • Secured user authentication with JWT and HTTP-only cookies, ensuring end-to-end protection of sensitive information from backend to frontend.

    • Ensures the price and sensitive user information remain secured and static, excluded possible hacking or tampering from client side with functional objects such as userInfo and orderId, using data directly parsed from and only from the database.

    • Used Postman to test all associated routes and ensure proper functionality and response handling.

    • Built shopping cart functionality with product editing, quantity adjustments, and comprehensive error handling.

    • Built user profile interfaces for order tracking and personal account management.

    • Built admin tools for managing users, products, and orders, including an order delivery tracking system.

    • Integrated PayPal API for payment processing.

    • Added advanced features like product search, carousel, pagination, and user reviews and rating systems.

    • Configured and deployed the application to a production environment with environment variable management.

    • Used GitHub for version control.

The server is currently crushed…trying to save it as soon as I can. Please go to the Github Repository for code details…

  • Litigiven is an AI-powered platform built to streamline legal workflows for professionals by simplifying legal research, automating report generation, and supporting intelligent assistant tools.

    1. Built the design system for scalable and consistent UI

    2. Designed the payment flow for subscription and onboarding

    3. Created visualizations for legal document and bill tracking

    4. Designed marketing website pages and product landing experiences

    5. Led UI design for core product services including dashboards, hubs, tables, and feeds

    6. Mapped complex workflows like lawyer-client contract exchange and AI-to-UI data flows

    7. Designed the AI voice assistant flow for legal call recording and summarization

  • Cut costs and save time with our mobile platform, streamlining medical reservations for international students in the US.

    — [MediCom] medical App

  • UX Researching/Designing

    Interface Designing

    Graphic Designing

    Interactive Designing

    —Say goodbye to tedious calls and endless browsing!

  • Relax your brain on your smartphone in just 3 minutes with our quick game.

    — [Whack a Space Mole] mobile game

  • Art/Technical Art Designing,

    Level Designing

    Video Making

    —Get your daily dose of Wack a Mole in our “Space”!

  • Simplify HR tasks, offering B2B seamless online management for recruiting business companies.

    AI writer flow facilitates smoother auto-generations.

    —[Hirebeat] online AI solution

  • Interactive Designing

    Interface Designing

  • A branding website for the client, enabling efficient sharing of educational resources across all 4 organizational branches.

    — [Center for an Informed Public(CIP)] branding website

  • Website Designing

    Website Developing

  • Reveal the pH levels of the ocean through this visualization program, addressing environmental hazards.

    — [Ocean Data Visualization] data visualization program

  • UI Designing

    Data Researching

    Graphic Designing

    Interactive Design

    —Let's champion the health of our planet.

Others