The Tim Creamer Prayer Room

About

The Prayer Room app is a Remix Docs application. The application uses an AirTable API to provide data and store prayer requests.

It's deployed automatically via Netlify.

Technologies / frameworks

• React
• Typescript
• Remix
• Chakra UI

To Do List

v1.0

• Navigation highlight
• Footer position full screen
• Refactor full screen mode changes to not impact the standard prayer card
• Scroll all requests on the full screen view
• Improve Home page layout on mobile. Hide main image and fix margins on "Join Us" card
• Restrict max width for Submit Request page on desktop
• Fix width for Logo on wide desktop view
• Ensure we are loading all requests on full screen view
• QA test site on Mobile, Tablet and Desktop
• Add correct images & copy
• Add styled error handling pages (404 / 500)

Future features

• [?] Dynamic refresh on prayer wall for viewing on Sundays
• Paging of requests, currently only most recent 100 are shown. Infinite scroll?
• Add icons for prayer / praise on when showing prayers full screen
• Hook up URL params to UI filters when viewing requests for a specific location
• Get all content from Air Table / Prismic
• Explore to show notifications (e.g cookie or local storage based?)
• Add a dark mode.
• Empty prayer wall message
• Radio styled don't match design (1px border not 2px)
• Bigger radio buttons on mobile.

Technical Debt

• Review application for optimisations
• Filter prayer requests by location, type & archived in API calls
• Standardise API calls / write an API client

Getting started

Below are the instructions for getting started with a Remix applicaiton deployed via Netifly.

Prerequisites

• Node.js version (^14.17.0, or >=16.0.0)

• npm 7 or greater

• A code editor (VSCode is a nice one)

• Remix Docs

Netlify Setup

1. Install the Netlify CLI:

npm i -g netlify-cli

If you have previously installed the Netlify CLI, you should update it to the latest version:

npm i -g netlify-cli@latest

2. Sign up and log in to Netlify:

netlify login

3. Create a new site:

netlify init

Development

The Netlify CLI starts your app in development mode, rebuilding assets on file changes.

npm run dev

Open up http://localhost:3000, and you should be ready to go!

Deployment

There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:

npm run build
# preview deployment
netlify deploy

# production deployment
netlify deploy --prod