Nathan Hu - Personal Website

NOTE: This website isn't currently deployed while I wait for somewhere to host my backend, so you'll have to run it locally

A full-stack personal portfolio website built with Maven, featuring a React TypeScript frontend with Material-UI and a Spring Boot backend API. This website showcases my experience as a Computer Science & AI student at McGill University, alongside my internship experience at PointClickCare, Intact, and 360insights.

Project Structure

personal-website/
├── api/                 # Spring Boot backend API
│   ├── src/
│   │   ├── main/java/
│   │   ├── main/resources/
│   │   └── test/java/
│   └── pom.xml
├── ui/                  # React TypeScript frontend
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── tsconfig.json
│   └── pom.xml
├── pom.xml             # Root Maven configuration
└── README.md

Technology Stack

Frontend (UI)

• React 18 - JavaScript library for building user interfaces
• TypeScript - Type-safe JavaScript
• Material-UI (MUI) - React component library with custom dark theme implementation
• React Router - Client-side routing for single-page application
• Custom API Hooks - useProfileData hooks for API consumption with loading/error states
• ESLint - Code quality and formatting enforcement with React and TypeScript rules
• Emotion - CSS-in-JS library for styling
• Dark Theme - Professional dark color scheme with accessibility considerations
• Jest & React Testing Library - Comprehensive unit testing

Backend (API)

• Spring Boot 2.7 - Java framework for building REST APIs
• Jackson ObjectMapper - JSON data processing and profile data management
• Profile API Architecture - REST endpoints for experiences, education, projects, personal info, and skills
• Maven - Build automation and dependency management
• JUnit & Mockito - Unit testing framework
• JaCoCo - Code coverage analysis tool (96% instruction coverage)
• Checkstyle - Code quality and style enforcement
• Maven Surefire - Enhanced test reporting

Prerequisites

• Java 11+ - Required for Spring Boot backend
• Node.js 18.14.0+ - Required for React frontend (specified in ui/pom.xml)
• npm 9.0.0+ - Package manager for frontend dependencies
• Maven 3.6+ - Build tool (or use Maven wrapper)

Quick Start

Option 1: Run Both Services Together

# Build and run the entire project
mvn clean install
mvn spring-boot:run -pl api

# In a separate terminal, start the frontend
cd ui
npm install
npm start

Environment Configuration (separate frontend/backend deployments)

• Frontend API base URL is controlled by REACT_APP_API_URL
• Backend allowed frontend origins are controlled by APP_CORS_ALLOWED_ORIGINS
• Backend port is controlled by SERVER_PORT

Create local env files from examples:

cp ui/.env.example ui/.env.local
cp api/.env.example api/.env

Production example:

• Frontend: REACT_APP_API_URL=https://api.yourdomain.com
• Backend: APP_CORS_ALLOWED_ORIGINS=https://www.yourdomain.com,https://yourdomain.com

Option 2: Run Services Separately

See individual README files in each module:

• API Documentation
• UI Documentation

Development

Building the Project

# Build all modules
mvn clean install

# Build specific module
mvn clean install -pl api
mvn clean install -pl ui

Running Tests

# Run all tests
mvn test

# Run API tests only
mvn test -pl api

# Run frontend tests
cd ui && npm test

# Generate code coverage report
mvn test jacoco:report -pl api

# Run code quality checks
mvn checkstyle:check -pl api

# Run ESLint on frontend
cd ui && npm run lint

Deployment

The project is configured for easy deployment:

• API: Builds as a standalone JAR with embedded Tomcat server
• UI: Builds static assets that can be served by any web server

Features

• Dashboard Homepage - Widget-based dashboard showcasing all sections with AI development emphasis
• JSON-based Backend Architecture - Profile data stored in JSON files with REST API endpoints
• Dark Theme Design - Professional dark color scheme with Material-UI integration
• About Me - Information about 's background, skills, and interests (API-driven)
• Projects - Showcase of personal and academic projects with GitHub links (API-driven)
• Smart Interactive Timeline - Horizontal timeline with horizontal scrolling, intelligent organization grouping, consecutive experience handling, and drilldown panels (API-driven)
• Education - Academic background at McGill University and certifications (API-driven)
• AI Development - Comprehensive showcase of AI contributions to this project
• Contact - Professional contact information and social media links (API-driven)
• Responsive Design - Mobile-friendly interface with Material-UI components
• Interactive Navigation - Smooth routing between pages with widget-based previews
• API Error Handling - Loading states, deployment-agnostic error handling, and empty data scenarios
• Code Quality Assurance - ESLint integration with comprehensive React and TypeScript rules
• AI Contribution Tracking - Detailed methodology for tracking AI vs human contributions

AI-Driven Development

This project serves as a showcase of AI-powered software development, with 100% of the codebase (7,755+ lines) generated by Claude Code (Anthropic's AI assistant). The development demonstrates:

• Complete Full-Stack Implementation - From React frontend to Spring Boot backend with JSON data architecture
• Professional UI/UX Design - Material-UI dark theme with accessibility considerations
• Comprehensive Testing - 184+ unit tests with 94.29% frontend and 96% backend coverage
• Interactive Timeline Components - Advanced visualization with horizontal scrolling for comprehensive work experience showcase
• Backend JSON Data Management - Profile data architecture with REST API endpoints and React hooks
• Code Quality Assurance - Automated quality checks with JaCoCo, Checkstyle, and ESLint
• Real Data Integration - LinkedIn profile parsing and authentic professional information
• Modern Development Practices - TypeScript, responsive design, ESLint enforcement, and CI/CD ready configuration

For detailed AI contribution analysis, see AI_CONTRIBUTIONS.md.

Contact

• Email: nhucanada0628@gmail.com
• McGill Email: nathan.hu@mail.mcgill.ca
• LinkedIn: linkedin.com/in/nhucanada
• GitHub: github.com/Nhucanada

License

This project is licensed under the MIT License.