📱 infiScroll – Infinite Feed Recommendation Web App

infiScroll is a sleek, scroll-based content recommendation app designed to deliver an endless stream of personalized posts — including Photos. With smart onboarding, dynamic themes, and an intuitive UI, it's built for users who crave simplicity without sacrificing discovery.

🔗 Live Demo: Try it on Vercel

---

📖 Table of Contents

• 🎯 Objective
• ✨ Key Features
• 🧠 Tech Stack
• 🛠️ How to Run Locally
• 📂 Folder Structure
• 🧪 Challenges Faced
• 📊 Analytics & Engagement Tracking
• 👥 Team
• 🚀 Project Submission

---

# 🎯 Objective

To solve content fatigue by offering a recommendation-driven, clean, and infinite scroll experience tailored to individual interests — all in one beautiful UI.

---

# ✨ Key Features

• ♾️ Infinite Feed – Seamlessly loads more posts as you scroll.
• 🔍 Smart Recommendations – Posts based on selected interests (coming in final version).
• 🧠 Category Tabs – Filter content across: Photos.
• ❤️ User Interaction – Like, Save, Skip, and View Later functionality.
• 📱 Onboarding & Preferences – Personalized category selection during login.
• 🌗 Theme Toggle – Switch between Light and Dark mode.
• 📶 Responsive Design – Optimized for both desktop and mobile.

---

## 🧠 Tech Stack

Layer	Technologies
Frontend	React.js, Tailwind CSS
Backend	Node.js, Express.js
Database	Firebase Firestore
Auth	Firebase Google Sign-In
Deployment	Vercel (Frontend),

---

## 🛠️ How to Run Locally

1. Install Dependencies

npm install

## 🛠️ How to Run Locally

### 1. Install Dependencies
```bash
npm install

2. Configure Firebase

Add your Firebase config to a .env file:

VITE_API_KEY=your_api_key
VITE_AUTH_DOMAIN=your_auth_domain
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_storage_bucket
VITE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_APP_ID=your_app_id

3. Start the App

npm start

---

# 📂 Folder Structure

infiScroll/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── assets/
│   ├── hooks/
│   ├── App.jsx
│   └── main.jsx
├── .env
├── package.json
└── README.md

---

🧪 Challenges Faced

• Integrating Firebase Auth with persistent state
• Conditional theme rendering across components
• Designing mobile-first responsive cards
• Managing scroll-based content rendering
• Syncing "Liked" & "Saved" states with Firebase

---

👥 Team

Name	Role
Aayush Bhaiya	Mentor
Suhani	Team Leader
Krisha	Developer
Rida	Developer
Shambhavi	Developer

---

## 📊 Analytics & Engagement Tracking

We use Firebase Analytics and custom event logging to better understand user behavior and continuously improve the platform.

🎯 Tracked Events

Event Name	Trigger Location	Description
onboard_complete	Onboarding Page	User completed initial setup
content_view	Explore Feed	User viewed a content card
like_post	Post Card	User liked a specific post
save_post	Post Card	User saved a post to favorites
upload_content	Upload Page	User uploaded their own media
scroll_depth	Explore Page	Measures how deep the user scrolls
toggle_theme	Settings Page	User toggled between Light/Dark mode

📈 Insights

• We use this data to:
  • Prioritize popular categories (e.g., SPORTS, TECH)
  • Monitor active user sessions per day
  • Track how much content users actually scroll through
  • Optimize which uploads get promoted first

🔐 All analytics are anonymized and comply with Firebase's data privacy standards.

# 🚀 Project Submission

Built with ❤️ by Team SD_009 for IITI Summer of Code 2025