alphonsekazadi/devconnect-africa

DevConnect Africa — a minimal, mobile-first collaboration board for African developers to post skill requests, find mentors and collaborators, filter by tech stack/level, and connect directly. Lightweight MVP (local-first, no real-time chat). # DevConnect Africa > A minimal collaboration board for African developers to connect, learn, and grow together. --- ## What is DevConnect Africa? DevConnect Africa is a simple platform where African developers can: - Post skill requests (learning, mentoring, or collaboration) - Browse all posted requests - Filter by tech stack, type, and level - Express interest and connect directly This is NOT a social network or real-time chat app. It's a minimal, focused collaboration board. --- ## Features - Create skill requests with tech stack, level, and contact info - Browse all requests in a clean card layout - Filter by tech stack (keyword search), type, and level - Express interest to reveal contact information - Fully responsive design (mobile-first) - Dark theme with blue/orange branding - Data persistence with localStorage - Clean, scalable architecture --- ## Tech Stack - **React 18** (with Vite) - **React Router** (minimal routing) - **Tailwind CSS** (styling) - **Context API** (state management) - **localStorage** (data persistence) --- ## Getting Started ### Prerequisites - Node.js 18+ installed - npm or yarn ### Installation 1. **Install dependencies:** ```bash npm install ``` 2. **Start development server:** ```bash npm run dev ``` 3. **Open your browser:** ``` localhost ``` You can view the Quick Start guide ### Build for Production ```bash npm run build ``` Preview production build: ```bash npm run preview ``` --- ## Architecture Decisions ### Why Context API? - Avoids prop drilling - Easy to replace with API calls later - Sufficient for MVP scope ### Why localStorage? - No backend needed for MVP - Instant persistence - Easy to swap with real API ### Why Tailwind CSS? - Fast development - Consistent design system - Small bundle size with purging ### Component Structure - **ui/**: Generic reusable components - **requests/**: Domain-specific components - **layout/**: App-wide layout components This separation makes the c …