DevSwap is a modern web application designed to connect developers for peer-to-peer skill sharing. Leveraging a sophisticated AI-powered matching system and a real-time chat it provides a dynamic and engaging environment for learning and teaching.
- Modular User Profiles: Showcase your skills to teach and your desired skills to learn using a clean, tag-based system.
- AI-Powered Matching: Our intelligent algorithm, powered by Google's Gemini, connects you with the perfect partner for a mutually beneficial skill exchange.
- Real-time Chat: Seamlessly communicate, plan sessions, and share 'Skill Snippets' with our integrated chat.
- Skill Snippet Sharing: Share project links or code snippets in chat, complete with rich, AI-generated previews.
- Job & Skill Recommendations: Discover job opportunities based on your skillset and get AI-driven recommendations for new skills to learn.
- Gamified Reputation: Earn Skill Points, climb the leaderboard, and unlock badges to certify your mastery (future feature).
- Dynamic UI: A visually stunning interface with a matrix-style animated background and smooth parallax scrolling effects.
- Framework: Next.js (
- Language: TypeScript
- Styling: Tailwind CSS
- Generative AI: Firebase Genkit
The project follows a feature-centric structure within the Next.js App Router paradigm. Key directories are organized to separate concerns and improve maintainability.
The project follows a feature-centric structure within the Next.js App Router paradigm. Key directories are organized to separate concerns and improve maintainability.
/
├── public/ # Static assets (images, fonts)
├── src/
│ ├── app/ # Next.js App Router (pages, layouts, API routes)
│ ├── ai/ # Genkit flows and AI-related logic
│ │ └── flows/ # Specific AI agent flows (e.g., matching, verification)
│ ├── components/ # Reusable React components
│ │ ├── layout/ # Layout components (Header, Footer)
│ │ ├── sections/ # Large, page-specific sections
│ │ └── ui/ # ShadCN UI components
│ ├── firebase/ # Firebase configuration, hooks, and providers
│ │ └── auth/ # Authentication related hooks (e.g., useUser)
│ ├── hooks/ # Custom React hooks (e.g., useToast)
│ ├── lib/ # Utility functions, auth logic, constants
│ └── ...
├── docs/ # Project documentation (e.g., backend schema)
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
Follow these instructions to set up and run the project on your local machine.
- Node.js (v18 or later)
- npm or yarn
- A Firebase project with Authentication (Google Sign-In) and Firestore enabled.
git clone https://github.com/your-username/devswap.git
cd devswapnpm installCreate a .env.local file in the root of the project by copying the example file:
cp .env.example .env.localNow, open .env.local and add your Firebase project credentials. You can find these in your Firebase project settings.
# Firebase Project Credentials
NEXT_PUBLIC_FIREBASE_API_KEY="your-api-key"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your-auth-domain"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="your-project-id"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your-storage-bucket"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your-messaging-sender-id"
NEXT_PUBLIC_FIREBASE_APP_ID="your-app-id"
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="your-measurement-id"
# Genkit/Gemini API Key
GEMINI_API_KEY="your-google-ai-studio-api-key"npm run devThe application should now be running at http://localhost:9002.
This application is configured for easy deployment with Firebase App Hosting. Simply connect your GitHub repository in the Firebase console to set up automatic builds and deployments.