Grocery-organizer - Create grocery lists, Recipes, keep track of what ingredients you have/need

Overview

Vue-Fire-Tail 😎

Demo Here: Vue-Fire-Tail

Try Logging with the following

Email Address: [email protected]
Password: [email protected]

Steps

Why Vue Fire Tail

At times it get very irritating when you want to start your new project which is a firebase project in which you have to set Authentication Flow EVERYTIME. You have to add Routes, Protect your routes, create a Login & Register component, Style those component and have a nice Loading animation, Validate your login/register form. and much much more.

Here is Vue-Fire-Tail Boiler plate for you 😊 . Vue-Fire-Tail is powered by next-gen technologies like Vue 3 and Firebase 9 along with the power of Vite and Tailwind CSS v3.

Latest and greatest Technologies

  1. Vue 3
  2. Firebase v9
  3. Tailwind CSS v3
  4. Font Awesome
  5. Headless UI
  6. Vite

Features

  1. Email Password Authetication & Google Authetication
  2. Forgot Password Feature
  3. Login & SignUp forms validations
  4. Fallback Page (404 Page), Loaders and page transitions for smooth user experience
  5. Font Awesome Icons pre configured.

Quick Start

git clone https://github.com/sushil-kamble/vue-tail-fire.git my-project
yarn

Make sure you replace my-project with your own project name

If you don't have yarn installed

npm i

Remove yarn.lock as you will already have package.lock

  1. Go to Firebase console. Add Project. In project overview, click on the web icon and register the app. You will see firebaseConfig object, We will require its details further. Click on Authetication, then on set up sign-in method. Enable Email/password authentication & google authentication.
  2. Create a .env.local file in your project's root. Example of .env.local file is given below. Make sure you replace YOUR_FIREBASE_CONSOLE_DETAILS with your firebaseConfig object details.
VITE_APP_API_KEY=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_AUTH_DOMAIN=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_DATABASE_URL=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_PROJECT_ID=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_STORAGE_BUCKET=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_MESSAGING_SENDER_ID=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_APP_ID=YOUR_FIREBASE_CONSOLE_DETAILS
  1. That's It ! Finally run the application
yarn dev # OR npm run dev

Documentation

Pages

  • Home Page
  • Login Page
  • Sign Up Page
  • Forgot Password Page
  • 404 Page
  • Profile Page - Auth Required
  • Database Page - Auth Required

Helpers

  • Class suffixed with t- will be found /src/assets/index.css, they are basically global styles

    Some basic html elements and classes are already configured check out, /src/assets/index.css

  • useAuthState in /src/firebase.js returns { user, error, isAuthenticated }
  • useSignOut in /src/firebase.js - Signs Out User
  • getUserState in /src/firebase.js - Returns promise
  • isValidEmail /src/helpers/isValidEmail.js function returns true if email is valid
  • Loading in /src/components/Loading.vue - Loading spinner
  • Dialog in /src/components/Dialog.vue - Headless UI dialog

Theme

  • Font - Ubuntu (font-text) & Goldman (font-heading)
  • Primary Color - Tailwind - colors.sky["500"]
  • Secondary Color - Tailwind - colors.slate["700"]
  • Background Color - index.css - #22272e
  • Error Color - Tailwind - colors.red["500"]

Font Awesome

  • Go here
  • Select any icon, suppose you want to use <i class="fas fa-address-book"></i> then import faAddressBook in /src/main.js
  • Add it to library. (See in main.js)
  • Use it like <font-awesome-icon :icon="['fas', 'address-book']" />
  • For more info visit here

Recommended IDE Setup

You might also like...
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license. The Montyhall game, where you have to guess the door where the prize is, made in Vuejs.
The Montyhall game, where you have to guess the door where the prize is, made in Vuejs.

The Montyhall game, where you have to guess the door where the prize is, made in Vuejs.

Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket 🏬
Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket 🏬

Sheiley Shop Content Description Features Get started ⭐ Frontend 😍 API entry point Frontend production Backend 😎 Database Backend production Extra D

Track your customers feedback to build better products with LogChimp
Track your customers feedback to build better products with LogChimp

LogChimp Track user feedback to build better products Docs · Contribute · Twitter · Discord 🧐 About LogChimp is self-hosted platform for products mak

🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

A web app to track shared expenses in a group of people.
A web app to track shared expenses in a group of people.

Payshare A web app to track shared expenses in a group of people. Payshare is the equivalent of a whiteboard in the kitchen of your shared flat where

Learn how to use Contentful by keeping track of your favorite albums per month. Built using Nuxt.js and Contentful.
Learn how to use Contentful by keeping track of your favorite albums per month. Built using Nuxt.js and Contentful.

Learn how to use Contentful by keeping track of your favorite albums per month. Built using Nuxt.js and Contentful.

App that performs CRUD operations in which users can track projects, tasks under projects, total duration of each project and task. Project is being build with Nuxt js 3, Axios, Pinia, Bootstrap 5 and Vue composition API

Nuxt 3 Minimal Starter Look at the nuxt 3 documentation to learn more. Setup Make sure to install the dependencies: # yarn yarn install # npm npm ins

OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.
OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

Our Shopping List OSL is a simple shared list application. Typical uses include shopping lists of course, and any other small todo-list that needs to

Owner
Tom Corey
Typee typee clicky clack beep boop
Tom Corey
It's the same as Google Keep but you can have unlimited subtasks for each and every one of your main tasks!

SAD-KEEP It's the same as Google Keeps but you can have unlimited subtasks for each and every one of your main tasks! You can see it live: Sad-keep de

Sadaf 2 Aug 6, 2022
A DDL Countdown tools for a SUFE SIMEr to track down CS conference in tenure track list

A DDL ⏳ Countdown tools ?? for a SUFE SIMEr to track down CS conference in tenure track lists, which can retrieve conference through CCF and TierLevel rank ?? .

null 0 Apr 1, 2022
A Laravel Nova tool to manage and keep track of each one of your logs files.

A Laravel Nova tool to manage and keep track of each one of your logs files.

Artem Stepanenko 15 Dec 4, 2022
We are XORNET this is a fun little project started by @Geoxor for people who have servers and don’t have shit to do with them
, our goal is to let people use our servers for themselves for cheap!

Information We are XORNET this is a fun little project started by @Geoxor for people who have servers and don’t have shit to do with them
, our goal i

George Tsotsos 12 Nov 29, 2021
A Completed todolist app built in Vue, have advanced filter feature , like filter by status, date, and have search , sort features

todo-app Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

null 0 Jan 20, 2022
Lend & Borrow - People have a habit of borrowing money from each other frequently, and have trouble remembering who owes whom, and how much.

Lend & Borrow - People have a habit of borrowing money from each other frequently, and have trouble remembering who owes whom, and how much.

techarshgupta 1 Jun 5, 2022
Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

null 7 Dec 8, 2022
An app to track you current manga/manhua/manhwa reading list.

manx-read-track A simple manga/manhua/manhwa, or even book track reader for you keep track where you are in your list. Project setup npm install Comp

Juan Pablo 3 Nov 21, 2021
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.

A scalable, full-stack live quiz framework built with VueJS and NodeJS This repository contains a scalable framework for building a real-time quiz app

Ably Labs 47 Dec 14, 2022
The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.

@storyblok/vue The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience. Note: This plugin is for Vue 3.

Storyblok 61 Dec 29, 2022