Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

aaronksaunders/tutorial-photo-gallery-react-query

Repository files navigation



LINK TO VIDEO: https://www.youtube.com/watch?v=K0KNOqFxio0

Build Your First Ionic App: Photo Gallery (Ionic React and Capacitor) with ReactQuery & Firebase

Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the "Your First App: React" guide. Follow along to create a complete CRUD (create-read-update-delete) experience.

Powered by Ionic React (web app) and Capacitor (native app runtime).

New Features

Project Structure

  • Tab1 (Photos) (src/pages/Tab1.tsx): Photo Gallery UI and basic logic.
  • usePhotoQueries Hook (src/hooks/usePhotoQueries.ts): Logic encapsulating querying, chaching and updating photos.
  • firebase-service (src/firebase-service.ts): Reading adn Writing to firebase

How to Run

[NEW] You need to include a .env file in the root directory of your application that has your firebase configuration

REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_STORAGE_BUCKET=your-project-bucket

Note: It's highly recommended to follow along with the tutorial guide, which goes into more depth, but this is the fastest way to run the app.

AltStyle によって変換されたページ (->オリジナル) /