npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

salesassist

v0.0.1

Published

This project serves as a starter kit to build expo applications with a firebase backend. <br/> Designed to work with Android, Ios &amp; Web.<br/> The app is written in [Typescript](https://www.typescriptlang.org/) primarily for code documentaion and ease

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

tafarrytafarry

Keywords

Readme

Expo Firebase Starter Kit (1.0.0)

This project serves as a starter kit to build expo applications with a firebase backend. Designed to work with Android, Ios & Web. The app is written in Typescript primarily for code documentaion and ease of use. The rules are relaxed to allow vanilla JS and can be adjusted in tsconfig.json. It comes prepacked with:

  • firebase setup
  • firebase emulators
  • basic navigation
  • basic admin web setup
  • React Native Paper UI kit
  • Bootstrap css for web admin

Table of contents

  1. Getting Started

  2. Installation

  3. Configurations

  4. Commands

  5. Structure

    5.1.Breakdown

  6. Resources

  7. TODOS

Getting Started

Requirements

Prerequisites

Before begining, ensure that you have already been added to the firebase project in the firebase console and have the project name ready at installation.

Installation

Run npx ... in your terminal in your directory of choice and enter the required data when prompted. The script will:

  • create an app directory
  • download the starter kit files
  • setup firebase
  • install all npm packages

From your firebase console, select the project and create:

A web application. Copy the generated firebaseConfig data into the ./config/firebaseconfig.js file.

An android application. Copy the generated google-service.json file into the ./assets/googleService/ directory.

An IOS application. Copy the generated GoogleService-info.plist file into the ./assets/googleService/ directory.

Configurations

Commands

The following commmands are found in the package.json file in the script section and can be used to assist development.

Development Mode

  • yarn start - starts up the expo application for development
  • yarn startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
  • yarn android - starts up expo for android development only
  • yarn ios - starts up expo for ios development only
  • yarn web - starts up expo for web development only

cloud functions:

  • yarn start-firebase-emulators - starts up the firebase emulators
  • yarn functions-dev - starts up the firebase cloud function for development
  • yarn functions-deploy - builds and deploys firebase cloud functions

building:

  • yarn build-android - creates an android development build of the application
  • yarn build-ios - creates an ios development build of the application
  • yarn build-web - creates a web development build of the application
  • yarn publish - publish updates to expo server (doc)
  • yarn publish-web - both builds and uploads web to firebase hosting (may need configuring)
  • yarn deploy - only uploads web to firebase hosting (may need configuring)

msc.:

  • yarn release - bumps app version

Staging Mode

  • yarn stag-start - starts up the expo application for development
  • yarn stag-startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
  • yarn stag-android - starts up expo for android development only
  • yarn stag-ios - starts up expo for ios development only
  • yarn stag-web - starts up expo for web development only

building:

  • yarn stag-build-android - creates an android development build of the application
  • yarn stag-build-ios - creates an ios development build of the application
  • yarn stag-build-web - creates a web development build of the application
  • yarn stag-publish - publish updates to expo server (doc)
  • yarn stag-publish-web - both builds and uploads web to firebase hosting (may need configuring)
  • yarn stag-deploy - only uploads web to firebase hosting (may need configuring)

msc.:

  • yarn stag-bump-Version - bumps app version

Production Mode

  • yarn prod-start - starts up the expo application for development
  • yarn prod-startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
  • yarn prod-android - starts up expo for android development only
  • yarn prod-ios - starts up expo for ios development only
  • yarn prod-web - starts up expo for web development only

building:

  • yarn prod-build-android - creates an android development build of the application
  • yarn prod-build-ios - creates an ios development build of the application
  • yarn prod-build-web - creates a web development build of the application
  • yarn prod-publish - publish updates to expo server (doc)
  • yarn prod-publish-web - both builds and uploads web to firebase hosting (may need configuring)
  • yarn prod-deploy - only uploads web to firebase hosting (may need configuring)

msc.:

  • yarn prod-bump-Version - bumps app version

Structure

/
|__assets
|__config (stores app config for dev,staging,prod + firestore rules and indexes)
|__functions (cloud functions dev area) 
|__src
|__
|  |__componentLibrary
|  |__components (holds all reuseable components)
|  |__constants 
|  |__context (global state (react context))
|  |__hooks (react external hooks)
|  |  |__useCachedResources.ts (preload stuff during splash screen)
|  |__layouts (global page layouts)
|  |__navigation (react navigation v6)
|  |__routes 
|  |__screens (main app pages)
|  |__utils (handly reuseable functions)
|__web (expo's index.html + other web files)
|__web-build
|__.firebaserc
|__.versionrc.js
|__app.config.js
|__App.tsx (entry point)
|__eas.json (configure expo builds)
|__firebase.json (configure firebase)
|__package.json
|__tsconfig.json (configure typescript)

Breakdown

  1. /assets --- Used for core app assets such as icons, splash screens, etc

    1.1 /assets/googleService --- Used to store google-services.json & GoogleService-Info.plist from firebase

  2. /config --- Used to store the config files for:

    • expo's app.json
    • firebaseconfig.js (where you add the config generated by the firebase console)
    • all firebase rules and indexes

  3. /functions --- Used as the dev directory for cloud functions 3.1. /functions/lib --- Typescript generated file

    3.2. /functions/src --- Used as main dev directory

        3.2.1. /functions/src/ ---

  4. /src --- Used as the main app/web dev directory

    4.1. /src/componentLibrary ---

    4.2. /src/components --- Used for all reuse able individual components

    4.3. /src/constants --- Used for global configurations

    • Firebase.ts --- Used to initialize firebase
    • GlobalTypes.ts --- used for global typescript types
    • Schemas.ts --- Used for formik forms schemas
    • Strings.ts --- Used to avoid "hard coding" text
    • Theme.ts --- Used for React Native Paper theming config

    4.4. /src/context --- Used for the app's global state using React Context. Controls stuff like login status, used data, etc.

    4.5. /src/hooks --- Used as the app's data layer. Move all "business logic" from inside components/screens(view layer) to external, reuseable files, following react hooks conventions.

    • useCachedResources.ts --- Used as an app preloader to load data during the splashscreen

    4.6. /src/layouts --- Used for global screen layouts and component designs

    4.7. /src/navigation --- Used for navigation design using React Navigation

    4.8. /src/routes --- Used for navigation route design where links to new screens are added.

    4.9. /src/screens --- Used for app screes/pages

    4.10. /src/utils --- Used for resuable helper functions

  5. /web --- Used as expo's web directory and stores index.html + other web files

  6. /web-build --- Used as the web build directory

  7. .firebaserc

  8. .versionrc.js --- Used as the Standard Version config

  9. app.config.js --- expo's app config

  10. App.tsx --- App entry point

  11. eas.json --- Expo's eas config

  12. firebase.json --- Firebase's config file

  13. package.json

  14. tsconfig.json --- Typescript's configuration

Resources

TODO:

  • move hooks to seperate library
  • add scripts for firebase rules
  • redesign the handling of expo's app.json files
  • design a test layer
  • reconfigure web admin dashboard's theming and style