Merge pull request #14 from Hoang-Nguyen-Huy/feat/fetch-api

refactor: 💡 up default image to firebase storgae

.env.example

@@ -2,4 +2,8 @@ VITE_FIREBASE_API_KEY=your_api_key
 VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
 VITE_FIREBASE_PROJECT_ID=your_project_id
 VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
-VITE_API_BASE_URL=https://your-mockapi-url.com
+VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
+VITE_FIREBASE_APP_ID=your_app_id
+VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
+VITE_API_BASE_URL=https://your-mockapi-url.com
+DEFAULT_IMAGE=your_default_image

.github/workflows/deploy.yml

@@ -33,6 +33,7 @@ jobs:
           VITE_FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
           VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
           VITE_API_BASE_URL: ${{ secrets.API_BASE_URL }}
+          DEFAULT_IMAGE: ${{ secrets.DEFAULT_IMAGE }}
 
       - name: Upload production-ready build files
         uses: actions/upload-artifact@v4

src/components/Dashboard.jsx

@@ -44,12 +44,10 @@ import {
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
-import { storage } from "../firebase";
+import { DEFAULT_IMAGE, storage } from "../firebase";
 import { categories } from "../OrchidCategory";
 import { countries } from "../OrchidOrigin";
 
-export const DEFAULT_IMAGE = "src/assets/images/image.jpg";
-
 const validationSchema = Yup.object({
   name: Yup.string().required("Name is required"),
   rating: Yup.number().min(0).max(5).required("Rating is required"),

src/components/MainContent/OrchidCard.jsx

@@ -15,7 +15,7 @@ import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import { useContext } from "react";
 import { ThemeContext } from "../../themes/ThemeContext";
-import { DEFAULT_IMAGE } from "../Dashboard";
+import { DEFAULT_IMAGE } from "../../firebase";
 
 const MotionCard = motion(Card);
 

src/components/OrchidDetail.jsx

@@ -25,7 +25,7 @@ import { AspectRatio } from "@mui/joy";
 import { motion } from "framer-motion";
 import { RelatedOrchidsSlider } from "./RelatedOrchidSlider";
 import { getOrchidById } from "../apis/OrchidsApi";
-import { DEFAULT_IMAGE } from "./Dashboard";
+import { DEFAULT_IMAGE } from "../firebase";
 
 const MotionBox = motion(Box);
 

src/firebase.js

@@ -23,3 +23,5 @@ const app = initializeApp(firebaseConfig);
 export const analytics = getAnalytics(app);
 export const auth = getAuth();
 export const storage = getStorage(app);
+
+export const DEFAULT_IMAGE = import.meta.env.DEFAULT_IMAGE;