Flickr Dashboard is a responsive web application designed to give users an enhanced view and analysis of their Flickr photos. It integrates with the Flickr API and leverages modern tools to deliver a fast, efficient, and user-friendly experience.
This project is organized as a monorepo with multiple packages:
core: Shared TypeScript types and models used by both frontend and backendfrontend: React-based web UIfunctions: Firebase Functions to handle server-side logic
This setup allows shared logic and types, reducing duplication and improving type safety across the stack.
| Area | Technology |
|---|---|
| Frontend | React + TypeScript + Reactstrap |
| Naming Convention | Atomic Design pattern |
| Backend | Firebase Functions (Node.js) |
| Database | Firestore (NoSQL, nested data) |
| DevOps | Docker + Firebase CLI |
| Scheduling | Firebase Scheduled Functions (Cron) |
| Cache System | React Query (useQuery, useMutation) |
| Performance | Promise Pool + API response caching |
| Reliability | Retry logic on external API calls |
- Responsive design for desktop and mobile
- Google Authentication via Firebase
- Flickr API Integration to fetch photos and metadata
- Interest Rate algorithm to rank photos by actual attention
- Realtime caching using useQuery()
- Retry logic for API failures
- Scheduled background jobs
- Shared type system using a central core package
Photos are ranked using a custom algorithm designed to reflect real user interest:
Interest Rate = (views ^ 0.5) + (favorites * 2) + (comments * 3)
This gives a fair ranking by factoring in views, favorites, and comments with weighted values.
- Uses Promise Pool to manage concurrent API calls
- Retry mechanism automatically re-attempts failed API requests
- Caching using React Query improves performance and responsiveness
Scheduled tasks are implemented using Firebase Scheduled Functions, which:
- Periodically fetch the latest photo data
- Recalculate interest rates for all photos
- Keep the dashboard metrics fresh and up-to-date
Firestore is used for storing nested and hierarchical data:
users/{userId}/photos/{photoId}
This allows efficient queries scoped per user and photo.
- Built using Reactstrap
- Styling is clean and minimal, based on Bootstrap principles
- Component structure follows Atomic Design:
components/
├── atoms/
├── molecules/
├── organisms/
├── templates/
└── pages/
- Node.js (v16 or newer)
- Yarn
- Firebase CLI
git clone https://github.com/your-username/flickr-dashboard.git
cd flickr-dashboard
yarn install
yarn start:fe
In case you need to run the backend on your local you can use this command:
yarn start:be
To deploy the project on Firebase, follow these steps:
-
Install Firebase CLI:
npm install -g firebase-tools
-
Login to Firebase:
firebase login
-
Build and Deploy Firebase Functions:
Simply run this command, It navigates to the functions directory and builds the project before deploying it:
yarn deploy:be
-
Build and Deploy the Frontend:
Simply run this command, It navigates to the frontend directory and builds the project before deploying it:
yarn deploy:fe
The project comes with Dockerfile and docker-compose.yml:
docker-compose up --build
This will spin up both frontend and backend services in isolated containers.
This project is licensed under the MIT License.
Feel free to fork the repo, open issues, or submit pull requests!
For questions, suggestions, or collaboration, feel free to reach out.
Email: [email protected]
Website: EmArTx.net
