Skip to content

vishalvxhztl/state-with-url

Repository files navigation

🔗 Links

Bun Installaion

Installation [or install with npm]

Install bun in macOS

curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL

# to install a specific version

curl -fsSL https://bun.sh/install | bash -s "bun-v1.0.0"

Install bun in macOS with Homebrew

brew tap oven-sh/bun # for macOS and Linux
brew install bun

Run Locally

Clone the project

  git clone https://github.com/vishalvxhztl/state-with-url.git

Go to the project directory

  cd state-with-url

Install dependencies

  npm install

or

  bun install

Start the server

  npm run dev

or

  bun dev

Youtube Videos

To learn more about state management technique

The Best React State Management Solution Has Been There All Along by Web Dev Simplified STOP using useState, instead put state in URL (in React & Next.js) by ByteGrad

Website URL-Based State Management Examples

This README provides examples of websites and web applications that use URL-based state management for various use cases. URL-based state management allows for bookmarkable links, deep linking, browser history navigation, and more.

  1. Bookmarkable Links
  • Google Maps: Google Maps allows users to create and share links to specific locations and directions with the map's state encoded in the URL.
  1. Deep Linking
  • YouTube: YouTube allows users to share videos and playlists with specific timestamps using URLs that include time parameters.
  1. Browser History
  • GitHub: GitHub's web application uses URL routing to navigate between repositories, issues, and code files, enabling users to navigate through their browser's history.
  1. State Restoration
  • Gmail: Gmail often allows users to restore their previous sessions by reopening the same URL, as it stores mailbox state in the URL.
  1. Sharing Data
  • Tableau Public: Tableau Public enables users to create and share interactive data visualizations with URLs containing parameters for filters and view settings.
  1. Multi-Step Processes
  • LinkedIn: LinkedIn uses URL parameters to track progress through profile creation and other multi-step processes.
  1. Filtering and Sorting
  • Amazon: Amazon allows users to filter and sort search results by various criteria, and the selected filters are encoded in the URL.
  1. Localization and Language Preferences
  • Wikipedia: Wikipedia allows users to switch between languages by appending a language code to the URL.
  1. Debugging and Troubleshooting
  • WordPress: WordPress developers often use URL parameters for debugging purposes, such as enabling debugging mode or specifying specific queries.
  1. A/B Testing
  • Optimizely: Optimizely is a platform for A/B testing and experimentation, and URL parameters can be used to specify different test variations.