Link to app:

Link to GitHub:

I’m still pretty proud of this one even after all these years. I feel like it proved to me that I could learn things quickly on my own just by doing them. I also think the design is pretty nice, even though it’s super simple.

Original about page below!

National Parks - Capital One

Live Website

Andrew Gao

May-Jun 2019


This website was written to complete Capital One’s National Park Service (NPS) challenge. It allows users to search for parks or states and shows a wide variety of information relating to a chosen park. Information is retrieved using the NPS API.

Key Features

Development Features


  1. Sketching - on some scrap paper… somewhere
  2. Rapid prototyping - I had a basic idea where I knew I wanted there to be a search bar, filtering, and park detail page
  3. Refining framework - separating out components to reuse code (search bar, buttons, header) as well as variables/data/types
  4. Styling - editing the CSS code to make things look nice and fit correctly; this was a lot of work
  5. API panic! - somewhere along the line, I was getting lots of CORS errors (turned out to be a privacy blocker issue)
  6. Testing deployment - GitHub pages + single-page apps = bad time
  7. Media queries - after seeing the website on my phone, I realized I needed to do this
  8. Deployment - this time with Firebase hosting, which worked much better
  9. Writing this - what good is code if you can’t explain it?


Potential Features

There are a few things I would try to add if I had more time:

Personal Commentary & Reflection

Overall, I had a lot of fun working on this project. It was a really great learning opportunity as I got to get a lot more exposure to Typescript, NPM, Sass, and Vue.js. And, it gave me something to do for the first few weeks of my summer; coding, getting to watch it update live, and listening to music really is fun/relaxing.

If I were to rewrite this in the future (or create another website), I think it would be better to do more detailed prototype designs (maybe using Figma), so I have a stronger sense of direction throughout the project. I would also try to use more structured frameworks such as Nuxt.js to learn more about server-side rendering (SSR). And, I would try to use a UI framework like Vuetify so that I wouldn’t have to spend as much time on CSS (although, I didn’t use one on purpose so I would be forced to learn more CSS). That said, I think this was a good start for me, but I definitely hope to get better in the future.

Thanks for the opportunity Capital One!


This project was built using Vue.js and was written with HTML, Sass, and TypeScript.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.