Connecting DALI Lab members digitally since 2021.
This project was built for the DALI Lab Social Media Challenge. It is a full-stack serverless app built on Firebase and using Svelte Routify.
By @jrmann100
dali-link.mov
- Present a dataset of user profile data using a clean UI.
The Svelte language organized the product into components and views, supercharging a custom-built interface with reactive Typescript markup. - Use Firebase to organize data.
Firebase Firestore provided the framework to organize the data into a document-based database, with custom security rules to prevent tampering. - Use ES6 modules, both custom and from NPM to extend the abilities of the code.
Inspect libraries using VSCode Intellisense. - Organize the site into key views.
Vite compiles the TypeScript and Svelte using the Routify framework. - Deploy the site on Firebase Hosting.
- Make the application progressive and offline-compatible.
- Use service workers, an app manifest, and many
<meta>
tags to convert the product into a Progressive Web App. - Pass all checks on the Lighthouse PWA Analysis Tool.
- Enable Firestore offline caching.
- Use service workers, an app manifest, and many
- Allow profiles to be created, written to, updated, and deleted.
Use Svelte Stores to make Firestore data reactive, automatically saving and syncing across the app. - Integrate Firebase Auth/Google OAuth for a personalized experience.
Add Google Sign-In and One Tap for quick authentication. Link Firestore profiles to user accounts. Protect views; sync user data across all views.
Build the project:
npm ci && npm run build
Preview the product locally:
npm run serve:vite
(Maintainers only) deploy the product:
firebase deploy
This project originally began as jrmann100/funfax, but my vision for the product and the challenge requirements diverged quickly. I plan to continue developing funfax.net on my own with the experience I've gained from this project.