Project Type: Full-Stack Development

A comprehensive habit tracking platform built with FastAPI (backend) and React (frontend). It features a GitHub-style activity calendar, multi-user dashboards, rich goal management, and in-depth analytics to help users build consistent routines.

Tech Stack

Backend

• FastAPI • SQLModel • PostgreSQL • Alembic
• JWT Authentication
• Dockerized services

SQLModel maps Python types to SQL tables; PostgreSQL stores relational data reliably; Alembic manages schema migrations safely; and JWT handles stateless authentication

Frontend

• React 18 • TypeScript
• Chakra UI
• TanStack Router + TanStack Query
• Framer Motion (ready for animations)

React powers the component-based UI, TypeScript adds type safety to prevent regressions, Chakra UI provides accessible, responsive components, TanStack Router manages type‑safe navigation, TanStack Query handles caching and server‑state sync for snappy UX, and Framer Motion enables smooth animations.

The tracker allows for weekly and yearly views, where the color intensity denotes target compliance for each week in the current year.

It also allows a multi-user experience, where all users can view their partners’ goals and statistics for a community experience.

github link: https://github.com/tiancho99/habit-tracker

Click here to see the website

A responsive WordPress website for an attorney with content managed via core widgets and the block editor, using custom PHP widgets, query loops, and theme.json for styling and configuration.

Before starting the project, I found the following problems with the firm’s previous site:

• Outdated design with inconsistent branding and a poor mobile experience
• Difficult content updates for non-technical staff
• Disorganized content structure; attorney bios and practice areas were hard to find

After identifying these issues, I defined the requirements for the new website:

• Replatform to a modern WordPress build focused on maintainability and speed
• Structure content via WordPress widgets and the block editor so non-technical staff can update pages
• Build custom PHP widgets and custom query loops for dynamic listings (attorney profiles, practice areas, case results, testimonials)
• Implement theme.json for global styles, design tokens, spacing, and block settings
• Use Bootstrap 5, HTML, CSS, and SASS for a responsive, consistent UI
• Integrate essential plugins for SEO, forms, caching, and security
• Deploy to a production hosting environment with version control and a staging workflow

First, with the company design team, we developed wireframes in Figma to visualize the final product and ensure all client requirements and features were met.

Next, we translated the mockups into a working WordPress site, implementing the design and functionality: custom widgets, query loops, theme.json-based styling, and responsive components built with Bootstrap and SASS.

Finally, the project was deployed to the company servers. The result was a modern, fully responsive WordPress website that significantly improved the firm’s online presence and operational efficiency. Key outcomes included empowering staff with easy content management, enhancing the user experience across devices, and boosting client engagement through dynamic content and clear calls-to-action.