Giter Club home page Giter Club logo

phonelist's Introduction

Phonebook

This app is a phone book that connects to Airtable for data and deploys on Netlify. No code needed to make this work. Just configure the site and the manage your phone list via Airtable.

Follow the steps below to get set up:

Airtable

1. Create database

Create a base with the following fields:

  • First Name
  • Last Name
  • Mobile Phone
  • Home Phone
  • Email
  • Verified (checkbox)
  • Over 18 (Yes/No)

The phonelist will only include entries that are marked as Verified and are Over 18 years of age.

2. Create a form

If you want people to be able to submit their own info, you can create a form from your base. But you are encouraged to keep Verified off the form for admins to control.

Netlify

1. Deploy

Deploy to Netlify

2. Environment variables

Set up the following environment variables in Netlify:

  • AIRTABLE_API_KEY -- API key for accessing your Airtable, looks like keyAb4CdefGhijklm. You can find that here: https://airtable.com/api
    AIRTABLE_API_KEY=keyMMMMMMMMM
  • AIRTABLE_BASE_ID -- ID for your base, e.g., app9abcO3deFghiJK.
    AIRTABLE_BASE_ID=appNNNNNNNNN
  • AIRTABLE_TABLE_NAME -- Name of your table within your base, e.g., "Table 1"
    AIRTABLE_TABLE_NAME="Table 1"
  • PINS -- secret PINs used to access your phonelist. Must be 4 digits long. You can specify as many PINs as you want.
    PINS=1234,4321
  • REACT_APP_AIRTABLE_ADD_USER_URL -- link to the form for adding a contact to your phonelist (optional)
    REACT_APP_AIRTABLE_ADD_USER_URL=https://airtable.com/add_contact_form_url
  • REACT_APP_BUILD_HOOK -- URL to kick off the build process, so admins can re-deploy without writing code. (see Update the site)
    REACT_APP_BUILD_HOOK=https://api.netlify.com/build_hooks/343j34jk34j3k4j3k4343

3. Re-deploy

Once your environment variables are finished, re-deploy the site and all those marked as Verified and Over 18 will show up on your site.

Update the site

Whenever you make changes to the Airtable and want them to show up on your site, simply visit /deploy on your site, e.g., https://phone.netlify.app/deploy, and press the Deploy button.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.