Portfolio-

# SHINRA – Gamified AI Finance Learning Platform

Overview

SHINRA is an AI-powered gamified chatbot designed to teach financial literacy interactively. It covers trading, stocks, forex, HFT, crypto, and fintech concepts using step-by-step explanations and real-world examples. The platform gamifies learning with XP, levels, badges, and nano-modules for simulations and quizzes.

Current Progress

• AI-powered chatbot answers finance-related queries
• Stepwise explanations with examples
• Planned integration of gamification: XP, levels, badges, mini-games
• Future PDF export for chat history

Next Steps

• Integrate gamified modules: Market Data Visualizer, Trading Simulator, HFT Micro-module, Quiz Module
• Implement daily challenges and rewards
• Add backend storage for user progress and AI interactions
• Deploy full-stack prototype

Tech Stack

• Frontend: React.js / TailwindCSS / HTML, CSS, JS
• Backend: Node.js / Express or Python Flask
• AI: OpenAI GPT API integration
• Database: MongoDB / PostgreSQL
• PDF Export: jsPDF / Python ReportLab
• Visualization: D3.js / Chart.js

How to Run

1. Clone repository
2. Install dependencies:
   • npm install for frontend
   • pip install -r requirements.txt for backend (Python)
3. Start backend server
4. Start frontend app
5. Interact with SHINRA chatbot and explore gamified learning modules

Demo

justify-content: center; align-items: center; padding: 1rem; min-height: 100vh; }

    .You are SHINRA – Smart Hybrid Intelligence for Next-gen Research & Automation.

Mission: Teach finance (Trading, Forex, HFT, Crypto, Investments, Banking, FinTech) in a gamified, interactive way.

Rules:

1. Answer all finance queries in simple English, step-by-step, with examples.
2. Gamify learning: XP, levels, badges, mini-games.
3. Provide adaptive guidance based on user progress.
4. Support PDF export of chat + achievements.
5. Use friendly, mentor-like tone.

6. Include market data, simulations, and nano-modules guidance. { max-width: 400px; width: 100%; height: 90vh; background-color: #161b22; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #30363d; }

    .chat-header {
        background-color: #1f2a36;
        padding: 1rem;
        color: white;
        text-align: center;
        position: relative;
        border-bottom: 1px solid #30363d;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
   
    .chat-header h1 {
        font-weight: 600;
    }
   
    .chat-messages {
        flex-grow: 1;
        padding: 1.5rem 1rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
   
    .message-bubble {
        max-width: 85%;
        padding: 0.75rem 1rem;
        border-radius: 1.25rem;
        line-height: 1.5;
        word-wrap: break-word;
    }
   
    .bot-message {
        background-color: #343a40;
        color: #e2e8f0;
        align-self: flex-start;
        border-bottom-left-radius: 0.25rem;
    }
   
    .user-message {
        background-color: #3871fe;
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 0.25rem;
    }
   
    .chat-input-container {
        padding: 1rem;
        background-color: #1f2a36;
        border-top: 1px solid #30363d;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
   
    .chat-input {
        flex-grow: 1;
        padding: 0.75rem 1rem;
        border-radius: 9999px;
        background-color: #212833;
        border: 1px solid #30363d;
        color: white;
        outline: none;
        transition: border-color 0.2s;
    }
   
    .chat-input:focus {
        border-color: #3871fe;
    }
   
    .send-button {
        padding: 0.75rem;
        border-radius: 9999px;
        background-color: #3871fe;
        color: white;
        transition: background-color 0.2s, transform 0.2s;
    }
   
    .send-button:hover {
        background-color: #2b5fe8;
        transform: scale(1.05);
    }
   
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
   
    .message-bubble-animation {
        animation: fadeIn 0.3s ease-out forwards;
    }
   

   </style>

</head>

FinBot

Your AI Financial Guide

Hello! Main FinBot hoon. Aapke sawaalon ka jawab dene ke liye taiyaar hoon. Aap kiske baare mein jaanna chahte hain?

</html>