SparklePost is a demo application that implements interface patterns commonly found in native iOS and Android apps, using modern and performant web development techniques. It is written in SvelteKit, but the same techniques can be implemented in any JavaScript framework.
Try the demo yourself at: https://sparklepost.vercel.app/ (works best on mobile)
- Swipeable tabs navigation with maintained scroll position in each tab (SwiperJS)
- Stacked message threads with back support - click on a single tweet to initiate stack (SvelteKit Shallow Routing and partial DOM rendering)
- Scroll & tab restoration when using back navigation (SvelteKit Snapshots)
- Installation & Offline support (PWA, Service Worker & online/offline event)
- Native-like navigation transitions (View Transitions API)
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
nvm use
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.