A professional, production-grade developer dashboard built with Next.js, React, and Tailwind CSS. DevScope provides a unified platform for managing developer tools, weather tracking, and GitHub profile analytics.
🔧 Developer Tools Explorer
- Browse and discover the best development tools and resources
- Categorized tool listings with descriptions
- Links to official tool websites
- Beautiful card-based interface
🌤️ Weather Tracker
- Real-time weather data for any city worldwide
- Current temperature, humidity, wind speed, and conditions
- Beautiful weather visualizations
- Responsive search interface
📊 GitHub Stats Viewer
- View detailed GitHub user profiles
- Track followers, following, and repositories
- See profile creation dates and bio information
- Direct links to GitHub profiles
🔐 User Authentication
- Secure authentication system
- Email verification support
- Role-based user management
- Token-based sessions
- Framework: Next.js 16.2.6 with App Router
- UI: React 19.2.4
- Styling: Tailwind CSS v4 with PostCSS
- Icons: Lucide React 1.17.0
- Language: TypeScript 5+
- API Integration: Weather API & GitHub API
- Node.js 18+
- npm or yarn
- Clone the repository
git clone <repository-url>
cd auth-nextjs- Install dependencies
npm install- Create environment variables
cp .env.example .env.localAdd your API keys:
NEXT_PUBLIC_WEATHER_KEY=your_weather_api_key
- Run the development server
npm run devOpen http://localhost:3000 with your browser to see the landing page.
app/
├── page.tsx # Landing page
├── layout.tsx # Root layout
├── globals.css # Global styles
├── login/
│ └── page.tsx # Login page
├── register/
│ └── page.tsx # Registration page
└── dashboard/
├── page.tsx # Dashboard welcome
├── layout.tsx # Dashboard layout
├── components/
│ ├── header.tsx # Navigation header
│ └── footer.tsx # Footer
├── tools/
│ ├── page.tsx # Developer tools explorer
│ └── devtools.json # Tools database
├── weather/
│ └── page.tsx # Weather tracker
└── github/
└── page.tsx # GitHub stats viewer
- Background:
#0a0a0a(Deep black) - Cards:
#111(Dark gray) - Accent:
#f59e0b(Amber-500) - Borders:
#222(Medium gray)
- Headings:
font-black(Extra bold) - Body:
font-light(Thin) - Metadata:
font-lighttext-gray-500
- Rounded borders with subtle hover effects
- Amber glow on interactive elements
- Smooth transitions (300-500ms)
- Responsive grid layouts
- Professional gradients
The application proxies external APIs through /api/v1/:
/api/v1/users/current-user- Get current user info- External Weather API (OpenWeatherMap)
- External GitHub API (GitHub REST API)
- ✅ Removed webpack polling for faster dev server startup
- ✅ Efficient code splitting with Next.js App Router
- ✅ Optimized images with next/image
- ✅ Minimal bundle size with tree-shaking
- ✅ Client-side hydration optimization
# Development
npm run dev
# Production build
npm run build
# Start production server
npm start
# Linting
npm run lint- Hero section with call-to-action buttons
- Feature showcase with mock UI boards
- Responsive design
- Smooth scroll animations
- Professional navigation
- User profile card with verification status
- Quick access to all features
- Professional layout with gradients
- Role-based information display
- Random tool showcase
- Detailed tool information
- Browse all tools grid
- External links to tool websites
- City search functionality
- Real-time weather data
- Multiple weather metrics
- Visual representations
- Username search
- Detailed user profiles
- Statistics cards
- Profile links
Pull requests are welcome. For major changes, please open an issue first to discuss proposed changes.
This project is licensed under the MIT License - see LICENSE file for details.
For issues and questions, please visit the GitHub repository issues section.
Built with ❤️ for developers by developers
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.