SignalSync is a Next.js-based web application that democratizes institutional-grade investment intelligence for retail investors. The platform leverages multi-agent AI architecture to provide hedge fund-grade analysis, real-time market insights, and personalized investment recommendations.
- Hero Section with compelling value proposition
- Problem Statement - Highlights challenges faced by retail investors
- AI-Powered Features - Showcases 6 core capabilities:
- Multi-Agent AI Architecture
- Fundamental & Technical Analysis
- Personalized Recommendations
- Sentiment Analysis
- Natural Language Processing
- Smart Portfolio Rebalancing
- How It Works - 3-step process visualization
- Stats Section - Platform impact metrics (7+ AI Agents, 24/7 monitoring)
- Team Section - Developer profiles
- CTA Section - Clear call-to-action
- Fully responsive design with professional fintech aesthetic
- Signup Page (
/signup) - User registration with professional form design - Login Page (
/login) - User authentication - Matching design with analytics preview
- Password visibility toggle
- Form validation ready
- Single-page application with persistent sidebar navigation
- Dark Mode Toggle - Fully functional light/dark theme switching
- Multiple Sections:
- Dashboard - Asset/liability overview, Nifty market data, curated news articles
- Portfolio - Coming soon
- History - Coming soon
- Analyze Stocks - Coming soon
- Test Sentiments - Coming soon
- Chatbot - AI-powered chat interface with message history
- AI-powered chat interface integrated into dashboard
- Real-time message exchange with simulated responses
- Typing indicators for better UX
- Message timestamps
- Attachment and custom agents buttons (UI ready)
- Natural language query support
- Example: "Is Tata motors a good company to buy in the current climate?"
- Primary (Teal):
#1c9d9a - Primary Dark:
#0f5757 - Secondary:
#f7f8fa - Accent Navy:
#0a3a4a
- Professional, clean design
- Consistent spacing and typography
- Smooth transitions and hover effects
- Responsive layouts for mobile and desktop
- Dark mode support across all pages
src/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── globals.css # Global styles and Tailwind config
│ ├── page.tsx # Landing page (SignalSync home)
│ ├── signup/
│ │ └── page.tsx # Signup page
│ ├── login/
│ │ └── page.tsx # Login page
│ ├── dashboard/
│ │ └── page.tsx # Main dashboard with all sections & chatbot
│ └── chatbot/
│ └── page.tsx # Standalone chatbot page (alternative route)
├── components/ # Reusable React components (future)
└── public/
└── images/
└── landing_image.png # Dashboard preview image
- Framework: Next.js 15.5.6 (App Router)
- Language: TypeScript 5
- Styling: Tailwind CSS 3.4.1
- UI Library: React 19.0.0
- Image Optimization: Next.js Image component
- Linting: ESLint 9 with Next.js config
-
Clone the repository
-
Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
/- Landing page/signup- User registration/login- User authentication/dashboard- Main application dashboard with all features
- Persistent sidebar with 6 menu items
- Active state highlighting in teal
- Smooth content switching without page reloads
- Dark mode toggle in top navigation
- Message history with user/assistant roles
- Real-time typing indicators
- Textarea input with Enter to send
- Attachment and custom agents options
- Simulated AI responses (1.5s delay)
- Assets display with placeholder value (₹2,45,000)
- Liabilities display (₹45,000)
- Nifty data with percentage display (+12.5%) - now in theme color
- Responsive grid layout with theme-aware styling
- Article cards with headlines
- External link buttons
- Hover effects with primary color
- Placeholder circular icons
Dark mode is fully implemented across the dashboard with:
- Toggle button in top navigation (sun/moon icon)
- Smooth color transitions
- Consistent theming across all sections
- Preserved teal accent colors
- Backend Integration
- User authentication and authorization
- Database for user profiles and portfolio data
- Session management
- AI/ML Integration
- Real MCP server integration for multi-agent AI
- Live market data feeds (NSE, BSE, global markets)
- Real-time sentiment analysis from Twitter/Reddit APIs
- Technical indicator calculations
- Features
- Portfolio management with buy/sell tracking
- Historical performance visualization
- Advanced stock analysis tools with charts
- Sentiment analysis dashboard with social media insights
- Risk assessment and portfolio rebalancing recommendations
- Backtesting capabilities
- Alerts and notifications
- UI/UX
- Mobile app (React Native)
- Advanced data visualizations
- Customizable dashboards
- Interactive charts and graphs
Built by Tanish, Roshan, Viraj, and Adarsh.
© 2025 SignalSync. All rights reserved.
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Current Status: Frontend prototype with simulated AI responses
- The chatbot currently uses mock responses with 1.5s delay. Production version will integrate with MCP servers for real AI agent analysis
- Placeholder data is used throughout for demonstration purposes
- Dashboard image (
landing_image.png) showcases the analytics interface - All pages maintain consistent design language and color scheme
- Fully responsive design works on mobile, tablet, and desktop devices
- Dark mode persists within session but not across page reloads (state management to be added)
After installing dependencies and running the dev server:
- Visit the landing page at
/to see the product overview - Click "Sign Up" to view the registration page
- Navigate to
/dashboardto explore the main application interface - Toggle dark mode using the sun/moon icon in the top navigation
- Switch between different sections using the sidebar menu
- Try the chatbot to see the conversational AI interface
- Multiple lockfiles detected (workspace root inference warning)
- Dark mode state doesn't persist across page reloads
- Authentication is UI-only (no backend validation)
- Market data and news articles are placeholder content
The project uses:
- Tailwind CSS with custom color scheme in
tailwind.config.ts - Next.js App Router for file-based routing
- TypeScript for type safety
- Custom fonts and global styles in
src/app/globals.css