Netwise

Netwise is a premium, AI-powered quiz platform designed to transform learning into an engaging, high-energy experience. By leveraging advanced generative AI, the platform allows users to convert any text, article, or set of study notes into structured, interactive quizzes in seconds.

Project Vision

The application aims to provide a "Gen-Z" ed-tech experience—moving away from traditional, static learning platforms toward a dynamic, multi-layered environment. The design prioritizes visual excellence, depth, and smooth interactivity to keep learners engaged and motivated.

Core Features

AI Generation Engine

The heart of Netwise is its integration with Google's Gemini models. It processes raw text and automatically generates high-quality multiple-choice questions, ensuring that the content is accurate and educational.

Premium Visual Design

The user interface features a sophisticated design language:

• Floating Geometric Background: A dynamic background utilizing SVG-based 3D figures (cubes, pyramids, spheres, and more) that float and rotate at varying depths.
• Glassmorphism: UI components use semi-transparent backgrounds with heavy backdrop-blur effects to maintain a sense of space and layering.
• Rose-Red Theme: A consistent, vibrant rose-to-red gradient theme that provides a cohesive and energetic visual identity.
• Organic Texture: A subtle noise overlay gives the digital surfaces a tactile, premium feel.
• Bespoke SVG Iconography: All system interactions—including feedback, navigation, and statistics—use custom-designed SVG icons instead of default emojis or standard fonts.

Gameplay and Social

• Interactive Playback: Real-time feedback for quiz answers with animated results and progress tracking.
• Global Leaderboards: Competitive scoring that tracks performance across the community, highlighting top performers for each quiz.
• Identity Badges: User profiles feature customizable identity badges (Scholar, Mastermind, Explorer, etc.) with unique color signatures.

Library and Management

• Discovery Hub: A central feed to explore and play public quizzes from the community.
• Personal Library: Full CRUD (Create, Read, Update, Delete) capability for user-generated quizzes, including visibility controls (Public vs. Private).
• Deep Analytics: Detailed statistics for each quiz, including play counts and performance heatmaps.

Technology Stack

Frontend

• React 19: Modern component-based architecture.
• TypeScript: Type-safe development for robust application logic.
• Tailwind CSS: Utility-first styling for complex, responsive layouts.
• React Router 7: Sophisticated client-side routing.

Backend and Infrastructure

• Firebase Authentication: Secure user management with support for Email/Password and Google OAuth.
• Firestore: Real-time NoSQL database for flexible data modeling and high-speed retrieval.
• Firebase Cloud Functions: Serverless backend for secure AI processing and business logic.
• Gemini API: Advanced generative AI for automated content creation.

Getting Started

Prerequisites

• Node.js (v20 or higher)
• Firebase CLI
• Google AI Studio API Key

Installation

1. Clone the repository:

   git clone [repository-url]
   cd Netwise-app

2. Install frontend dependencies:

   cd frontend
   npm install

3. Install Cloud Functions dependencies:

   cd ../functions
   npm install

Configuration

Firebase Secrets

Set the Gemini API key as a secret for the backend functions:

firebase functions:secrets:set GEMINI_API_KEY

Frontend Environment

Update the configuration in frontend/src/services/firebase.ts with your specific Firebase web configuration.

Deployment

To deploy the entire stack to Firebase:

firebase deploy

---

Developed by Nurdan and the Netwise Team.