Web Projects

Select the US states that you have visited

Amcharts
shadcn/ui
Supabase
Svelte
Tailwind
Typescript
a map of the United States | Photo by Morgan Lane aka @themorganlane on Unsplash

Introduction

50 States is an interactive web application that enables users to track and explore the U.S. states they’ve visited. Users can easily select states from an interactive map, view information about each state, and maintain a personalized list of their visited locations. The app utilizes local storage to preserve user data, ensuring that their progress is saved and readily accessible upon returning to the site.

This app serves as both a travel log and an educational resource, making it perfect for travelers, students, or anyone interested in learning more about the United States.

Features

  • Interactive map and checkboxes for state selection
  • Detailed state information cards
  • Persistent data storage using browser’s local storage

Future Features

  • Add user authentication so users can save their results.
  • Add a single state view page that provides more information about each state.

Use Cases

  • Travel Planning: Users can use the app to plan their travels by selecting states they want to visit and viewing information about each state.
  • Education: Students can use the app to learn about the United States by exploring the states they’ve visited.
  • Personal Interest: Users can use the app to track their travels and share their experiences with friends and family.

Tech Stack

  • SvelteKit: A UI framework built on Svelte. It’s a love letter to web development.
  • Typescript: A statically typed superset of JavaScript that adds type safety and enhances code quality.
  • Tailwind: A utility-first CSS framework for rapidly building custom designs directly in your markup.
  • amCharts: JavaScript charts and maps library for all of your visual needs.
  • Supabase: Supabase is an open source Firebase alternative.