Vue 3 CRUD app powered by Firebase Realtime Database
Includes OAuth authentication, Tailwind CSS, and TypeScript

Hello there 👋

This project showcases a simple CRUD (Create, Read, Update, Delete) application built with Vue 3, TypeScript, and Firebase Realtime Database. I selected Firebase for its real-time syncing capabilities and straightforward integration, allowing me to focus on the app’s logic and design.

The app was designed to help track job applications after I realised how difficult it was to keep everything organised during my own job search. It includes authentication using Firebase (currently admin-only), real-time data updates, and charts powered by ApexCharts for visualising progress. I also implemented skeleton loaders for better UX during data fetching, and toast notifications using Vue Toastification.

Tailwind CSS was used for styling, offering a fast, responsive, and consistent UI. The app is installable as a Progressive Web App (PWA), enabling offline access and improved performance.

For a more in-depth breakdown of the project's evolution and features, and practical examples, please visit the app and click on the logo. You will find an About section.

Packadges used

• vue - JavaScript framework used to build this application, leveraging the Composition API for better structure and reusability.

• firebase - Provides real-time database and authentication services, enabling data syncing and secure access.

• pinia - A lightweight and intuitive state management library for Vue.

• vue-router - Handles client-side routing and navigation between views within the app.

• tailwindcss - A utility-first CSS framework used for styling, offering responsive design and fast prototyping.

• @headlessui/vue - Provides accessible, unstyled UI components that integrate well with Tailwind CSS. Used it for styled dropdown menu.

• apexcharts + vue3-apexcharts - – Used for rendering interactive and responsive chart to visualise job tracking data.

• vue-toastification - Adds elegant toast notifications for user feedback without interrupting flow.

• vue3-lottie - Enables the use of Lottie animations for engaging visual feedback and loaders.

• vite - A modern build tool and development server that provides fast bundling and hot module replacement.

• vite-plugin-pwa - Adds Progressive Web App support, allowing users to install the app and use it offline.

• typeScript - Used throughout the codebase to add static typing and improve maintainability and developer experience.

Run 🚀

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Start with cloning this repo on your local machine via cli or github-desktop:

$ git clone https://github.com/AndrasE/applied

$ cd applied

To install and set up the library, run:

$ npm install

Or if you prefer using Yarn:

$ yarn install

Create a firabase webapp add real-time database and authentication & edit firebase.ts or add .env:

VITE_API_KEY="your-api-key"
VITE_AUTH_DOMAIN="your-auth-domain"
VITE_PROJECT_ID="your-project-id"
VITE_STORAGE_BUCKET="your-storage-bucket"
VITE_MESSAGING_SENDER_ID="your-messaging-sender-id"
VITE_APP_ID="your-app-id"
VITE_ADMIN_UID=" your Google account's User ID (UID)"

Setup firbase rules:

  "rules": {
    "jobs": {
      ".read": true,
      ".write": "auth != null && auth.uid == 'YOUR UID'",
    }
  }

Serving the app:

$ npm run dev

Building a distribution version:

$ npm run build