Template to showcase different use-cases about Ionic, Firebase, Capacitor

Overview

Ionic, Angular, Capacitor, and Firebase Template

This is a starter templates for projects using Ionic, Angular, Capacitor, and Firebase.

It covers the building block of most applications.

Description

This will be a template that will showcase multiple use-cases that help you build your next mobile app, either if you want to check out the code for help or inspiration, or download it and modify it to suit your needs.

It will cover a fully working authentication system, interaction with the database, upload/download files from storage, accessing native device functionality, and more.

TODO: Add pictures of the pages once things are a bit more complete.

Getting Started

TODO: Add getting started once the authentication module is completed.

Dependencies

The idea is to showcase Ionic, Angular, AngularFire, Capacitor, and rxjs. I'll add here the list and versions once the first module is completed.

TODO: List the main dependencies here and the version I'll use in the project.

Installing

TODO: Expand on this:

  • Clone, Fork, Download this repo.
  • Run npm install.
  • Inside environment.ts and environment.prod.ts replace the Firebase credentials.
  • Inside .firebaserc replace the items for your firebase application:
{
  "targets": {
    "js-mobile-dev-templates": {
      "hosting": {
        "app": ["javebratt-ionic-firebase-template"]
      }
    }
  },
  "projects": {
    "default": "js-mobile-dev-templates"
  }
}

Executing program

Once you've changed your firebase information you'll be able to run the template with either ionic's or angular's CLI serve command.

ionic serve

Roadmap

The goal for this template is to have most of the things an application will have, this is the current roadmap and the showcase of the progress.

If there are items you'd like added or prioritized let me know, you can open an issue adding the enhancement label.

  • Firebase Initialization and Configuration.
  • Authentication.
    • Auth page with login/signup form.
    • Add buttons for social login.
    • Separate the auth functions to a service.
    • Add send email verification to the signup form.
    • Check the Firebase Authentication Functions to add security checks (For example, only verified emails can log in).
    • Add unit tests
  • CRUD (using Firestore).
    • Master/Detail: A list page with a detail page.
    • Check if I should add an update page or use the detail page as an update?
    • Add the ability to delete an item from the list (Using sliding list items)
    • Add the ability to delete an item from the item's detail page.
    • Explore the posibility of adding filters to demo querying capabilities..
    • Add unit tests
  • Storage (managing files in the cloud).
    • Create a page to upload file.
    • Add another place to upload a picture with the capacitor camera.
    • Add a place to list the files the user has uploaded.
    • Add functionality to delete a file from storage.
    • Add unit tests
  • Cloud Functions.
    • Add a cloud functions that deletes the firestore record for a file when you delete the file from storage.
    • Add a Cloud Function that deletes a file from storage when you delete that file's firestore record.
    • Add a cloud function that deletes all the information about a user when the user is deleted.
    • Create a function to send push notifications to a user.
    • Create a function to send push notifications to a bunch of users. (This can be the same as before taking on parameters).
    • Add unit tests
  • Firebase Hosting.
    • Prepare all the hosting configuration.
    • Prepare the docs to let the user know what they need to modify.
  • Push Notifications.
    • Set up the device to receive push notifications with capacitor.

Authors

Hi, I'm Jorge Vergara, If there's anything I can do to help you with let me know, you can reach me via Twitter at @javebratt.

Contributing

First of all, thank you for wanting to help :)

Right now the best way you can help contribute to this repo is by opening issues to help me decide where to go and what to prioritize.

If you do want to open a PR for something, please reach out first, and we can talk about it to see if it fits 1) the roadmap, and 2) the vision I have for this template.

Changelog

In the future I'll list the latest change here, and with each release I'll add a more detailed version of the changelog at CHANGELOG.md

License

Distributed under the MIT License. See LICENSE.txt for more information.

You might also like...

Example of a ceramic app to showcase dynamic NFT capability

This is an example application that uses Ceramic, based on Next.js. Fork it freely. Getting Started Install dependencies. Create local ENV file with y

Sep 6, 2022

Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Jan 22, 2022

Showcase your skills on your Github readme or resumé with ease ✨

Showcase your skills on your Github readme or resumé with ease ✨

Showcase your skills on your GitHub or resumé with ease! Powered by Cloudflare Workers ⚡ Docs Example Specifying Icons Themed Icons Icons Per Line Cen

Dec 31, 2022

A example vault to collect and showcase various dataview queries. Created on behalf of AB1908

A example vault to collect and showcase various dataview queries. Created on behalf of AB1908

Obsidian Example Vault for Dataview Queries Good day! This example vault showcases different usages of the Dataview plugin for Obsidian.md. You'll fin

Jan 5, 2023

Showcase All Your Projects 🛍️🎇

Showcase All Your Projects 🛍️🎇

Projects Showcase All Your Projects 🛍️ 🎇 projects screenshot Introducing Projects Present all your projects in style with a super customizable web a

Dec 23, 2022

A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

1. What does this library do? grex is a library that is meant to simplify the often complicated and tedious task of creating regular expressions. It d

Dec 30, 2022

deno-ja (Deno Japanese community) showcase

Showcase Deno本家よりも気軽に作ったものを公開できるようなShowcaseです。 スクリーンショットの撮影方法 短めのidを決めていただいて、下記のようにスクリプトを実行してください。 deno task screenshot [url] [id] ※エラーが出る場合は、下記を実行してみ

Oct 28, 2022

This fictive project was created to showcase my current skills using Three.js and GSAP.

This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Dec 29, 2022

This repository contains different infrastructure components that are used in different projects here at NaN Labs.

Infrastructure Reference Changelog | Contributing This repository contains different infrastructure components that are used in different projects her

Dec 15, 2022
Owner
Jorge Vergara
Full-Stack JavaScript developer. Building mobile apps with web technologies such as Ionic Framework, Angular, Firebase, and nodejs.
Jorge Vergara
A guide to showcase use cases for web3.js and ethers.js libraries

Use case using web3.js and ethers.js The purpose of these scripts is to show how to build common cases of interaction with the blockchain using web3.j

ProtoFire 6 Aug 31, 2022
A mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases.

This is a mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases. It also has a details page to check for the statistics for each region/state if available.

Solomon Hagan 7 Jul 30, 2022
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore

Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev ?? Motivation This ap

Ilda Neta 10 Aug 22, 2022
An example of Lit web component built with vite for use in capacitor.

Vite + Lit + Capacitor An example of Lit web component built with vite for use in capacitor. Demo Features ✅ Typescript ?? Lit ?? Vite ?? Desktop ?? i

Rody Davis 8 Aug 17, 2022
A template project for NRWL's NX, Ionic Framework, Stylelint, Eslint, and more from the OpenForge mobile app team.

OpenForge Ionic Monorepo Example This is a template project for all Ionic + Angular Monorepos. It was generated using a combination of Nx, Ionic Thank

OpenForge 14 Oct 26, 2022
A template application for setting up a mobile app video game with IONIC, PHASER, ANGULAR and a Monorepo strategy

OpenForge Ionic Monorepo Example This is a template project for all you aspiring video game developers out there! Want to use your web application ski

OpenForge 67 Dec 22, 2022
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

?? Advanced Remix Workshop Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this

Frontend Masters 167 Dec 9, 2022
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
Airtable for TypeScript and JavaScript (ES7, ES6, ES5). Supports Airtable database. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

TypeAirtable is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be

Think A.M. 11 Sep 11, 2022
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Solved by Flexbox A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. View Site Viewing the

Philip Walton 13k Jan 2, 2023