The Dev Syndicate : LifeOS Dashboard: The Ultimate All-In-One Tracker (Live Crypto, Weather & Smart AI,Country Explorer,Task Tracker)

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,113 +1,93 @@
-# Development Sprint: 2-Hour Challenge
+# 🧠 LifeOS Dashboard — Your Life, One Screen
 
-Welcome to the Development Sprint. In this 2-hour team-based event, you will build a fully functional, responsive, and visually appealing frontend application from scratch. 
+The **LifeOS Dashboard** is a smart, centralized personal workspace designed to reduce app-switching by bringing all your essential data into one beautifully designed, animated, glassmorphism-themed interface. Control your weather insights, cryptocurrency portfolio, travel goals, daily tasks, and receive smart AI-like suggestions from one unified SaaS-grade product.
 
-This challenge evaluates your team's ability to rapidly prototype, effectively utilize a modern JavaScript/React ecosystem, and seamlessly integrate external APIs to build a compelling user interface.
+Built under a strict 2-hour hackathon constraint by a team of elite frontend engineers, it boasts a highly aesthetic dark-neon UI, smooth scroll-reveal and parallax animations, and robust integration with over 5 distinct live APIs.
 
-**Below are listed libraries and Public APIs you can use.**
-**You must only use the given libraries, however you can use additional APIs for more functionality.**
-
-## 🏆 Judging Criteria
-
-Submissions will be evaluated on the following metrics:
-1. **Library Integration:** The quantity and quality of external libraries successfully implemented. We are looking for meaningful usage of these tools to solve frontend challenges.
-2. **Implementation & UX/UI:** The overall aesthetic, responsiveness, and usability of the application. Clean design and smooth user experiences will be highly rewarded.
-3. **Version Control:** Proper use of Git, including clear, descriptive commit messages and logical branching.
+---
 
-## 🚀 Submission Guidelines
+## 🌟 Key Features
+- **Weather Intel:** Real-time localized weather updates and 5-day forecasts.
+- **Crypto Tracker:** Live market charts, volume tracking, and trend analysis for top coins.
+- **Country Explorer:** A "Travel Discovery Experience" with rich statistics and dynamically loaded Unsplash scenery based on geographic regions.
+- **Productivity Tasks:** Drag-and-drop integrated task management to organize your daily priorities.
+- **AI Insights:** Rule-based background analysis of your active weather, crypto drops/gains, and urgent tasks to provide smart contextual suggestions.
+- **Downloadable Reports:** Ability to export deep-dive statistical sheets for specific countries.
 
-Please follow these steps carefully to ensure your project is evaluated:
+---
+#YouTube video Link:
+    https://youtu.be/eKcUYQRgJt0?si=OU87LRP1f_CAuL1f
+
+#AI Tool Used:
+ AntiGravity with Claude Opus 4.6
+## 🚀 Tech Stack & Core Libraries
+
+The application takes advantage of modern frontend tooling to maximize performance, state efficiency, and UX:
+
+- [**React 19**](https://react.dev/) & [**Vite**](https://vitejs.dev/) - Lightning-fast build and development environment.
+- [**Tailwind CSS v4**](https://tailwindcss.com/) - Utility-first styling for the dark neon glassmorphism system.
+- [**shadcn/ui**](https://ui.shadcn.com/) - Accessible, customizable layout components (Cards, Buttons, Badges, Skeletons).
+- [**Framer Motion**](https://www.framer.com/motion/) - Orchestrating layout springs, stagger reveals, and parallax hero backgrounds.
+- [**Zustand**](https://zustand-demo.pmnd.rs/) - Lightweight, boilerplate-free global state management (Persisted).
+- [**@tanstack/react-query**](https://tanstack.com/query/latest) - Powerful async state management, caching, and background refetches for API data.
+- [**Recharts**](https://recharts.org/) - Composable, animated charting library for financial data.
+- [**Sonner**](https://sonner.emilkowal.ski/) - An opinionated lightweight toast component for React.
+- [**React Router DOM v7**](https://reactrouter.com/) - Client-side page navigation mapping the modules to clean, distinct URLs.
+- [**Lucide React**](https://lucide.dev/) - Beautiful, consistent iconography.
+- [**Axios**](https://axios-http.com/) - Promise-based HTTP client for API abstraction.
 
-1. **Fork** this repository.
-2. **Clone** your forked repository to your local machines.
-3. Create a new directory named after your team (e.g., `team-horizon` or `team-byte`).
-4. Initialize your project within this directory.
-5. **Showcase Video:** Record a 1-2 minute screen recording demonstrating your working project. Highlight the specific APIs and UI components you implemented.
-6. **Commit & Push:** Add your project files and the showcase video (`.mp4` or a hosted link in your project's README) to your directory.
-7. Open a **Pull Request (PR)** to this main repository before the 2-hour deadline.
+---
 
-### Version Control Best Practices
-* Utilize feature branches for development (e.g., `feature/authentication`, `fix/layout-shift`).
-* Use conventional commit messages to maintain a clean history (e.g., `feat: added Recharts for data visualization` or `fix: resolved API CORS issue`).
+## 🔌 API Integrations
 
----
+The dashboard acts as an aggregator, unifying data streams from multiple real-world REST APIs:
 
-## 🛠️ Approved Libraries & Tools
-
-You are encouraged to utilize tools from the following categories to accelerate your development process and enhance your application's capabilities.
-
-### UI Components & Design Systems
-* **[shadcn/ui](https://ui.shadcn.com/)** - Beautifully designed, accessible components.
-* **[Chakra UI](https://chakra-ui.com/)** - Simple, modular, and accessible component library.
-* **[NextUI](https://nextui.org/)** - Fast and modern React UI library.
-* **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components for building design systems.
-* **[Mantine](https://mantine.dev/)** - A fully featured React components library.
-
-### Icons & Typography
-* **[Lucide React](https://lucide.dev/)** - Consistent, clean icon toolkit.
-* **[React Icons](https://react-icons.github.io/react-icons/)** - Comprehensive library of popular icon sets.
-* **[Heroicons](https://heroicons.com/)** - Hand-crafted SVG icons by the Tailwind CSS team.
-
-### Animation & 3D Graphics
-* **[Framer Motion](https://www.framer.com/motion/)** - Production-ready motion library for React.
-* **[AutoAnimate](https://auto-animate.formkit.com/)** - Zero-config, drop-in animations.
-* **[GSAP](https://gsap.com/)** - Advanced, professional-grade web animation.
-* **[Three.js](https://threejs.org/) & [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)** - Tools for building 3D scenes in React.
-
-### Data Fetching & State Management
-* **[React Query (TanStack Query)](https://tanstack.com/query/latest)** - Robust asynchronous state management.
-* **[Zustand](https://zustand-demo.pmnd.rs/)** - Fast, scalable, and minimalistic state management.
-* **[Axios](https://axios-http.com/)** - Promise-based HTTP client.
-
-### Forms, Validation & Editors
-* **[React Hook Form](https://react-hook-form.com/)** - Performant and flexible form handling.
-* **[Zod](https://zod.dev/)** - TypeScript-first schema validation.
-* **[TipTap](https://tiptap.dev/)** - Headless, highly extensible rich text editor.
-
-### Maps, Charts & Data Visualization
-* **[Recharts](https://recharts.org/)** - Composable charting library built on React components.
-* **[Chart.js](https://www.chartjs.org/) & [react-chartjs-2](https://react-chartjs-2.js.org/)** - Flexible JavaScript charting.
-* **[React Leaflet](https://react-leaflet.js.org/)** - Interactive maps integration for React.
-
-### Advanced Utilities
-* **[dnd-kit](https://dndkit.com/)** - Modern drag-and-drop toolkit for React.
-* **[date-fns](https://date-fns.org/)** - Comprehensive date utility library.
-* **[Wagmi](https://wagmi.sh/) & [viem](https://viem.sh/)** - React Hooks for Ethereum/Web3 integration.
-* **[Sonner](https://sonner.emilkowal.ski/)** - Opinionated toast notification component.
+1. [**OpenWeatherMap API**](https://openweathermap.org/api) - Powers the Weather Intel module, fetching current metrics (temp, wind, humidity) and the 5-day mini forecast.
+2. [**CoinGecko API**](https://www.coingecko.com/en/api) - Powers the Crypto Tracker, surfacing realtime market prices, caps, and historical sparkline data.
+3. [**REST Countries API**](https://restcountries.com/) - Powers the Country Explorer, returning rich geographic, demographic, and monetary information.
+4. [**NASA APOD API**](https://api.nasa.gov/) - Controls the stunning parallax background on the Landing Page, surfacing the "Astronomy Picture of the Day".
+5. [**DummyJSON API**](https://dummyjson.com/) - Acts as the backend mock service for seeding the unified Task/Productivity list.
+6. [**Unsplash Images Network**](https://unsplash.com/developers) - Dynamically supplements the Country Explorer with high-fidelity, region-specific travel backgrounds.
 
 ---
 
-## 📡 Public APIs
+## ⚙️ Deployment & Setup Steps
 
-You must integrate at least one of the following APIs to populate your application with dynamic data. 
+If you would like to run or deploy the application locally, follow these steps:
 
-### Finance & Crypto
-* **[CoinGecko API](https://www.coingecko.com/en/api)**: Cryptocurrency data, live prices, and historical charts.
-* **[Alpha Vantage](https://www.alphavantage.co/)**: *(Free key required)* Real-time and historical stock market data.
+### 1. Requirements
+Ensure you have [Node.js](https://nodejs.org/) (v18+ recommended) and `npm` installed on your machine.
 
-### E-commerce & Mock Data
-* **[DummyJSON](https://dummyjson.com/)**: Mock data for products, recipes, users, and carts.
-* **[Fake Store API](https://fakestoreapi.com/)**: E-commerce prototype data including products and categories.
+### 2. Local Setup
+Clone the repository, navigate into the project root, and deploy the dev server:
 
-### Entertainment & Media
-* **[The Movie Database (TMDB) API](https://developer.themoviedb.org/docs)**: *(Free key required)* Comprehensive data on movies, TV shows, and cast members.
-* **[Spotify Web API](https://developer.spotify.com/documentation/web-api)**: *(Authentication required)* Metadata for artists, albums, and tracks.
-* **[PokeAPI](https://pokeapi.co/)**: Extensive Pokémon database.
-* **[Jikan API](https://jikan.moe/)**: Unofficial MyAnimeList API for anime and manga data.
+```bash
+# Install all required npm dependencies
+npm install
 
-### Science & Geography
-* **[NASA Open APIs](https://api.nasa.gov/)**: *(Free key required)* Astronomy Picture of the Day, Mars Rover photos, and near-Earth object data.
-* **[REST Countries](https://restcountries.com/)**: RESTful API for global country data (population, demographics, flags).
-* **[OpenWeatherMap](https://openweathermap.org/api)**: *(Free key required)* Current weather data and forecasts.
+# Spin up the Vite development server
+npm run dev
+```
+The application will instantly hot-reload and typically port to `http://localhost:5173/`. 
 
-### Sports
-* **[TheSportsDB](https://www.thesportsdb.com/api.php)**: Crowd-sourced sports data, team information, and artwork.
-* **[balldontlie](https://www.balldontlie.io/)**: NBA statistics and game data.
+*(Note: API keys for OpenWeather and NASA are currently hardcoded with Dev/Demo limits for hackathon purposes. In production environments, place these in an `.env` file.)*
 
----
+### 3. Production Build
+To create a heavily optimized, minified production build bundle:
 
-## ⚠️ Rules of Engagement
+```bash
+npm run build
+```
+This will compile the Javascript/CSS chunks into the `/dist` directory. You can preview the production bundle directly via:
+```bash
+npm run preview
+```
 
-* **No Pre-built Templates:** Utilizing standard initializers (like Vite, Create React App, or Next.js) is permitted. However, cloning a full boilerplate containing pre-built application features or routing architectures is strictly prohibited.
-* **AI Assistance:** AI tooling (e.g., GitHub Copilot, Gemini, ChatGPT) may be used for debugging, syntax, and scaffolding. The core architectural decisions and library integrations must remain your team's own work.
-* **Time Limits:** All Pull Requests must be opened before the 120-minute mark. Late submissions will be subject to point deductions.
+### 4. Deploying to Vercel/Netlify (Recommended)
+Because this is a static Single Page Application (SPA), it deploys seamlessly to serverless edge networks:
+1. Connect your GitHub repository to [Vercel](https://vercel.com/) or [Netlify](https://www.netlify.com/).
+2. Keep the Framework Preset as `Vite`.
+3. The Build Command is automatically recognized as `npm run build`.
+4. The Output Directory is automatically recognized as `dist`.
+5. Click **Deploy**. The LifeOS Dashboard will be live in less than a minute.
+

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lifeos-temp</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}