SkyLeague

• 

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Sky League

The inspiration is based on the fact that weather predictions is still not accurate so trying a new approach of getting users to participate in real world scientific utility and study while getting users social engagement approach . The biggest problem was figuring out which is the best real world scientific approach to improve data on weather conditions along with social engagement .The best part about this project is that a working prototype is build based on this unique approach to bridge the gap between the concepts . Application Overview 1.1 Application Name SkyLeague

1.2 Application Description SkyLeague is a mobile-first responsive web application that combines weather reporting with social features and gamification. Users can capture and share local weather conditions, predict future temperatures, compete on leaderboards, and earn points based on prediction accuracy.

1. Users and Usage Scenarios 2.1 Target Users Weather enthusiasts who enjoy tracking and predicting weather patterns Competitive users interested in leaderboard rankings and gamification Social media users who want to share local weather conditions with a community 2.2 Core Usage Scenarios Users capture photos of thermometers showing current temperature and share them with location and caption Users submit daily temperature predictions for their location and earn points based on accuracy Users browse a social feed of weather posts from other users with AI-generated comments Users track their prediction accuracy, points, and ranking on weekly, monthly, and all-time leaderboards Users view their profile statistics including streak, total predictions, and recent prediction results
2. Page Structure and Functionality 3.1 Overall Structure SkyLeague App ├── OnboardingScreen (first visit only) ├── Main App Shell (with bottom navigation) │ ├── FeedScreen (Tab 1: Home) │ ├── CameraScreen (Tab 2: Camera) │ │ └── PostPreviewScreen │ ├── PredictScreen (Tab 3: Predict) │ ├── LeaderboardScreen (Tab 4: Leaderboard) │ ├── ProfileScreen (Tab 5: Profile) │ │ └── SettingsDialog │ └── NotificationsScreen (accessible from header) 3.2 OnboardingScreen Purpose: Introduce new users to the app's core features and request necessary permissions.

Layout:

3-step swipeable carousel with navigation dots Each slide contains an icon and descriptive text Get Started button appears on the final slide Functionality:

Slide 1: Display CloudSun icon with text Capture your local weather Slide 2: Display TrendingUp icon with text Predict tomorrow & climb the ranks Slide 3: Display Trophy icon with text Earn badges & bragging rights User can swipe left/right to navigate between slides Get Started button on final slide: Requests browser geolocation permission Sets visited flag in localStorage Navigates to main app (FeedScreen) 3.3 Main App Shell Layout:

Bottom navigation bar fixed at bottom of viewport 5 navigation tabs with icons: Feed (Home), Camera, Predict, Leaderboard, Profile Active tab highlighted with primary color Content area above navigation bar displays current screen Functionality:

Clicking any tab navigates to corresponding screen Navigation state persists across page interactions Mobile-first responsive design with max-width container 3.4 FeedScreen Layout:

Vertical scrollable list of PostCard components Refresh button in header Empty state message when no posts available PostCard Component:

Full-width rounded image Temperature overlay (large white text) at top-left of image Location and timestamp below image Caption text Bot comment in blue-bordered callout box Functionality:

Load posts from GET /api/posts on mount Display loading spinner while fetching Infinite scroll: load more posts when user scrolls near bottom Pull-to-refresh or refresh button reloads posts Empty state displays: Be the first to report today's weather! Each post displays user avatar, username, and post details 3.5 CameraScreen Layout:

Full-screen live camera preview Overlay text at top: Place thermometer in frame Round capture button at bottom center Functionality:

Request camera permission on mount using navigator.mediaDevices.getUserMedia Display live video stream from rear camera Capture button: Takes snapshot of current video frame Converts to data URI using canvas Navigates to PostPreviewScreen with captured image 3.6 PostPreviewScreen Layout:

Captured image displayed at top Auto-stamped location and timestamp below image Input field for caption Post button at bottom Functionality:

Display captured image from CameraScreen Auto-populate location using browser geolocation API Auto-populate timestamp with current date/time User enters caption in input field Post button: Sends POST /api/posts with imageUri, location, temperature, caption Shows loading state during upload Displays success toast on completion Navigates back to FeedScreen 3.7 PredictScreen Layout:

Header text: What will be the high temp tomorrow at your location? Large circular temperature selector in center Current selected temperature displayed in large text inside circle Countdown timer below selector showing time remaining until 6 PM local Submit Prediction button at bottom Functionality:

Temperature selector (Shadcn Slider styled as dial): Range: -20°C to 50°C User drags to select predicted temperature Selected value updates in real-time Countdown timer: Calculates time remaining until 6 PM local time Updates every second Displays in HH:MM:SS format Submit Prediction button: Sends POST /api/predictions with predictedTemp and location Shows loading state during submission Displays success toast on completion Disables button after submission until next day 3.8 LeaderboardScreen Layout:

Segmented tabs: Week, Month, All Time Sorted list of LeaderboardRow components Each row shows: rank number, avatar, username, accuracy percentage, points Functionality:

Load leaderboard data from GET /api/leaderboard?period=weekly on mount Switch between Week/Month/All Time tabs: Fetches corresponding leaderboard data Updates list with new rankings Top 3 rows display gold/silver/bronze badge icons Rows sorted by points (descending) Display loading state while fetching data 3.9 ProfileScreen Layout:

Avatar and username at top Bio text Editable social handle input field Statistics section: accuracy percentage, total predictions, weekly streak Recent Predictions section with list of PredictionCard components Settings gear icon in header PredictionCard Component:

Date of prediction Predicted temperature Actual temperature Score earned Status icon: ✔️ for correct, ❌ for incorrect Functionality:

Load user profile from GET /api/user/profile on mount Display user avatar, username, bio, and statistics Social handle input: User can edit and save changes Updates via API call Recent Predictions list: Displays last 10 predictions Shows prediction accuracy with visual indicators Settings gear icon opens SettingsDialog 3.10 SettingsDialog Layout:

Modal dialog overlay Log out button Notification preferences toggle switch Functionality:

Log out button: Clears user session Redirects to OnboardingScreen Notification toggle: Enables/disables push notifications Saves preference to localStorage Close button dismisses dialog 3.11 NotificationsScreen Layout:

Header with back button Chronological list of notification items Each item shows message text and timestamp Functionality:

Load notifications from GET /api/notifications on mount Display notifications in reverse chronological order (newest first) Each notification shows: Message text (e.g., Your prediction was 2°C off – 90 pts) Timestamp (relative time format) Accessible via bell icon in FeedScreen header

1. Business Rules and Logic 4.1 Onboarding Flow OnboardingScreen displays only on first visit Visited flag stored in localStorage prevents repeated display Geolocation permission must be granted to proceed to main app 4.2 Post Creation Posts require: captured image, location, temperature, and optional caption Location auto-populated from browser geolocation Timestamp auto-populated with current date/time Bot comment generated server-side and included in post response 4.3 Prediction Submission Users can submit one prediction per day Predictions must be submitted before 6 PM local time Temperature range limited to -20°C to 50°C Prediction locked after submission until next day 4.4 Scoring System Points awarded based on prediction accuracy Closer predictions earn higher scores Scores contribute to leaderboard rankings Weekly streak increments for consecutive daily predictions 4.5 Leaderboard Rankings Three leaderboard periods: weekly, monthly, all-time Rankings sorted by total points (descending) Top 3 users receive badge indicators Accuracy percentage calculated from all predictions 4.6 Navigation Bottom navigation always visible on main app screens Active tab highlighted with primary color Back navigation handled by browser history
2. Exception and Boundary Cases Scenario Handling Camera permission denied Display error message with instructions to enable camera access in browser settings Geolocation permission denied Display error message and limit functionality requiring location Network request fails Show error toast with retry option No posts available in feed Display empty state message: Be the first to report today's weather! Prediction submitted after 6 PM Disable submit button and show message: Prediction window closed for today User already submitted prediction today Disable submit button and show message: You've already predicted today Invalid temperature input Constrain slider to valid range (-20°C to 50°C) Image capture fails Show error message and return to camera view API returns empty leaderboard Display message: No rankings available yet User profile load fails Show error message with retry button Notification list empty Display message: No notifications yet
3. Acceptance Criteria OnboardingScreen displays on first visit and requests geolocation permission before proceeding Bottom navigation bar visible on all main screens with 5 functional tabs FeedScreen loads and displays posts with images, temperature overlays, locations, timestamps, captions, and bot comments CameraScreen opens live camera preview and captures images successfully PostPreviewScreen auto-populates location and timestamp, accepts caption input, and posts to API PredictScreen displays temperature selector (-20°C to 50°C), countdown timer to 6 PM, and submits predictions LeaderboardScreen displays three tabs (Week/Month/All Time) with sorted rankings and top 3 badges ProfileScreen shows user statistics, recent predictions with status icons, and opens settings dialog NotificationsScreen displays chronological list of notifications with timestamps All API calls include loading states and error handling with user feedback Application is fully responsive and mobile-first optimized localStorage used for onboarding flag and user preferences Browser geolocation API used for location data Browser camera API used for image capture Countdown timer updates every second and calculates time to 6 PM local
4. Out of Scope for This Release User authentication and registration system Real-time chat or messaging between users Push notifications (only in-app notification list) Image editing or filters before posting Multi-language support Dark mode theme Export or download of prediction history Social sharing to external platforms Advanced weather data integration (forecasts, radar, etc.) User blocking or reporting features Post commenting or liking functionality Profile customization beyond social handle Email notifications Password reset functionality Multi-device synchronization

Built With

• medo
• react
• tailwindcss
• typescript