Merge pull request #1 from vkondi/feat/feature_enhancement

feat: UI Enhancements

Author: vkondi

.gitignore

@@ -1,8 +1,8 @@
 # Dependencies
 node_modules/
 api/venv/
-api/__pycache__/
-api/*.pyc
+**/__pycache__/
+**/*.pyc
 
 # Environment variables
 .env

README.md

@@ -1,229 +1,103 @@
 # GitHub Toolkit
 
-A comprehensive GitHub toolkit built with Next.js frontend and Flask api. Analyze GitHub profiles, view detailed metrics, visualize data with charts, and compare profiles side-by-side.
-
-## Features
-
-### 🎯 **Dashboard Interface**
-- **Tool Dashboard**: Clean landing page with feature cards for all available tools
-- **Easy Navigation**: Intuitive interface to access different GitHub analysis tools
-- **Scalable Design**: Ready for future tool additions with consistent card layout
-
-### 🔍 **Available Tools**
-- **Profile Analyzer**: Get detailed insights into any GitHub user's profile, repositories, and activity metrics
-- **Compare Profiles**: Compare two GitHub profiles side-by-side for hiring decisions and team analysis
-- **Repository Insights**: Deep dive into repository statistics, contributors, and project health metrics (Coming Soon)
-- **Team Analytics**: Analyze team performance, collaboration patterns, and productivity metrics (Coming Soon)
-
-### 🚀 **Core Capabilities**
-- **Repository Statistics**: View stars, forks, languages, and repository metrics
-- **Data Visualization**: Interactive charts showing language distribution and other metrics
-- **Modern UI**: Beautiful, responsive interface built with Tailwind CSS
-- **Real-time Data**: Live data from GitHub API
-- **Lean Architecture**: Clean, efficient codebase with minimal dependencies
-
-## Tech Stack
-
-### Frontend
-- **Next.js 14** - React framework with App Router
-- **TypeScript** - Type-safe development
-- **Tailwind CSS** - Utility-first CSS framework
-- **Chart.js** - Data visualization
-- **Lucide React** - Beautiful icons
-
-### Backend
-- **Flask** - Lightweight Python web framework
-- **requests** - HTTP client for GitHub API
-- **Flask-CORS** - Cross-origin resource sharing
-- **python-dotenv** - Environment variable management
-- **GitHub API** - Official GitHub REST API
-
-## Setup Instructions
+A comprehensive GitHub toolkit built with Next.js frontend and Flask API. Analyze GitHub profiles, view detailed metrics, visualize data with charts, and compare profiles side-by-side.
 
-### Prerequisites
+## 📚 Table of Contents
+
+- **[Getting Started](./docs/GETTING_STARTED.md)** - Installation, setup, and troubleshooting guide
+- **[Features](./docs/FEATURES.md)** - Detailed feature descriptions and capabilities
+- **[Technical Details](./docs/TECHNICAL_DETAILS.md)** - Tech stack, architecture, and deployment
+- **[GitHub API Integration](./docs/GITHUB_API_INTEGRATION.md)** - API endpoints and integration details
+
+## 🚀 Quick Start
 
+### Prerequisites
 - Node.js 18+ and yarn
 - Python 3.8+
 - Git
 - GitHub Personal Access Token (recommended)
 
-### 1. Clone the Repository
+### Setup
 
+**1. Clone the repository:**
 ```bash
 git clone <repository-url>
 cd github-toolkit
 ```
 
-### 2. Backend Setup
-
+**2. Backend setup:**
 ```bash
-# Install Python dependencies
 pip install -r requirements.txt
-
-# Set up environment variables
-# Create .env file in root directory
-echo "GITHUB_TOKEN=your_github_token_here" > .env
-
-# Run the Flask API server
+cp .env.example .env
+# Edit .env and add your GitHub token
+# GITHUB_TOKEN=your_token_here
 python -m flask --app api/index run -p 5328
 ```
 
-### 3. Frontend Setup
-
+**3. Frontend setup (new terminal):**
 ```bash
-# Install dependencies
 yarn
-
-# Run the development server
 yarn next-dev
 ```
 
-### 4. Access the Application
-
+**4. Access the application:**
 - Frontend: http://localhost:3000
 - Backend API: http://localhost:5328
 
-## GitHub API Token Setup
-
-To use the GitHub API effectively, you'll need a personal access token:
-
-1. Go to GitHub Settings → Developer settings → Personal access tokens
-2. Generate a new token with the following scopes:
-   - `public_repo` (for public repository access)
-   - `user` (for user profile information)
-3. Add the token to your api `.env` file:
-   ```
-   GITHUB_TOKEN=your_token_here
-   ```
-
-**Note**: Without a token, you'll be limited to 60 requests per hour. With a token, you get 5,000 requests per hour.
-
-## API Endpoints
-
-### Base URL
-All API endpoints are prefixed with `/api`
-
-### Profile Analysis
-- `GET /api/profile/{username}` - Get complete profile analysis
-- `GET /api/repositories/{username}` - Get user repositories
-
-### Profile Comparison
-- `GET /api/compare/{username1}/{username2}` - Compare two profiles
-
-### Root Endpoint
-- `GET /api/` - API health check
+## 🎯 Available Tools
 
-## Usage
+- **Profile Analyzer** (`/profile-analyzer`) - Analyze individual GitHub profiles with detailed metrics
+- **Compare Profiles** (`/compare-profiles`) - Compare two GitHub users side-by-side
 
-### 🏠 **Dashboard Navigation**
-1. **Landing Page**: Access the main dashboard with all available tools
-2. **Tool Selection**: Click on any feature card to access specific tools
-3. **Navigation**: Use back buttons to return to the dashboard
+## 💻 Development
 
-### 🔍 **Profile Analysis**
-1. Click on "Profile Analyzer" from the dashboard
-2. Enter a GitHub username in the search field
-3. Click "Analyze Profile" to get detailed insights
-4. View profile information, statistics, language distribution, and repositories
-
-### 👥 **Profile Comparison**
-1. Click on "Compare Profiles" from the dashboard
-2. Enter two GitHub usernames in the respective fields
-3. Click "Compare Profiles" to see side-by-side comparison
-4. View metrics comparison with winner indicators
-
-## Features in Detail
-
-### 🎯 **Dashboard Interface**
-- **Tool Cards**: Beautiful feature cards with icons, descriptions, and feature lists
-- **Navigation**: Easy access to all tools with back button navigation
-- **Scalability**: Ready for future tool additions with consistent design
-- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
-
-### 🔍 **Profile Analysis**
-- **Profile Information**: Avatar, bio, location, company, social links
-- **Statistics**: Followers, following, stars, forks, repository count
-- **Language Distribution**: Pie chart showing programming languages used
-- **Repository List**: Recent repositories with details
-- **Metrics**: Average stars/forks per repo, top language, etc.
-
-### 👥 **Profile Comparison**
-- **Side-by-side Metrics**: Compare followers, repositories, stars, forks
-- **Winner Indicators**: Visual indicators showing which user leads in each metric
-- **Comprehensive Analysis**: All key metrics compared in one view
-
-### 🚀 **Future Tools** (Planned)
-- **Repository Insights**: Deep dive into individual repository statistics
-- **Team Analytics**: Team performance and collaboration analysis
-- **Advanced Metrics**: More sophisticated GitHub data analysis tools
-
-## Development
-
-### Running in Development Mode
-
-**Option 1: Concurrent Development (Recommended)**
+**Run both frontend and backend concurrently:**
 ```bash
-# Run both frontend and backend simultaneously
 yarn dev
 ```
 
-**Option 2: Manual Commands**
+Or run them separately:
 ```bash
-# Terminal 1 - Backend
+# Terminal 1
 python -m flask --app api/index run -p 5328
 
-# Terminal 2 - Frontend
+# Terminal 2
 yarn next-dev
 ```
 
-**Option 3: Individual Services**
+**Build for production:**
 ```bash
-# Backend only
-yarn flask-dev
-
-# Frontend only
-yarn next-dev
-```
-
-### Building for Production
-
-```bash
-# Build frontend
 yarn build
-
-# Start production server
 yarn start
 ```
 
-## Customization
+## 📖 Learn More
 
-### Adding New Metrics
-1. Update the API routes in `api/routes/common_routes.py`
-2. Add new fields to the TypeScript types in `types/index.ts`
-3. Update the frontend components to display the new metrics
+- For detailed setup and troubleshooting, see [Getting Started](./docs/GETTING_STARTED.md)
+- For feature descriptions, see [Features](./docs/FEATURES.md)
+- For technical architecture, see [Technical Details](./docs/TECHNICAL_DETAILS.md)
+- For API integration details, see [GitHub API Integration](./docs/GITHUB_API_INTEGRATION.md)
 
-### Styling
-- Modify `tailwind.config.js` for theme customization
-- Update `app/globals.css` for global styles
-- Component-specific styles can be added using Tailwind classes
+## 🤝 Contributing
 
-## Troubleshooting
+We welcome contributions! Please follow these steps:
 
-### Common Issues
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes and commit (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
-1. **CORS Errors**: Make sure the api is running on port 5328 and frontend on port 3000
-2. **API Rate Limits**: Add a GitHub token to increase rate limits
-3. **User Not Found**: Verify the GitHub username exists and is public
-4. **Build Errors**: Ensure all dependencies are installed correctly
+### Code Standards
+- Use TypeScript for frontend code
+- Maintain clean, readable code with proper comments
+- Test your changes thoroughly before submitting
+- Follow the existing code style and conventions
 
-## Contributing
+## 📄 License
 
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Test thoroughly
-5. Submit a pull request
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## License
+---
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+**Made with ❤️ by Vishwajeet Kondi**

api/config.py

@@ -1,5 +1,9 @@
 import logging
 import os
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)