Empowering rural blue-collar workers through technology
Blue Collar Connect is a comprehensive platform designed to bridge the gap between rural blue-collar workers and meaningful employment opportunities. Our frontend application delivers an intuitive, accessible interface that connects workers with jobs, community support, and valuable resources.
Built with modern web technologies including Next.js and shadcn/ui, this platform ensures a seamless experience across all devices while maintaining the highest standards of accessibility and performance.
- Advanced Job Listings – Filter and search through curated blue-collar opportunities
- Location-Based Matching – Find jobs within your preferred radius
- Real-Time Applications – Apply instantly with one-click submissions
- Interactive Dashboard – Connect with fellow workers and employers
- Peer Support Network – Share experiences and get advice from the community
- Success Stories – Get inspired by worker achievements and career progressions
- Skill Showcases – Highlight your expertise and certifications
- Experience Timeline – Document your work history and achievements
- Verification System – Build trust with verified skills and credentials
- RAG Chatbot Integration – Get instant answers about labor laws and regulations
- Wage Information – Access real-time salary data and negotiation tips
- Government Schemes – Stay updated on available support programs and benefits
- Google Maps Integration – Visualize job locations and commute times
- Nearby Opportunities – Discover jobs in your area with distance calculations
- Route Planning – Get directions to interview locations and job sites
- Firebase Authentication – Enterprise-grade security for your account
- Profile Management – Complete control over your personal information
- Privacy Controls – Manage what information is visible to employers
- Mobile-First Design – Optimized for smartphones and tablets
- Progressive Web App – Works offline and can be installed on devices
- Multi-Language Support – Available in multiple regional languages
| Category | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 | Server-side rendering & performance |
| UI Components | shadcn/ui | Modern, accessible components |
| Styling | Tailwind CSS | Utility-first CSS framework |
| Maps | Google Maps API | Location services & visualization |
| Authentication | Firebase Auth | Secure user management |
| Backend API | Hono.js | RESTful API services |
| AI Integration | FastAPI RAG Model | Intelligent chatbot responses |
| Deployment | Vercel | Edge network deployment |
Ensure you have the following installed on your system:
- Node.js (v18.0.0 or higher) - Download here
- npm or yarn package manager
- Git for version control
# Clone the repository
git clone https://github.com/AyMk544/blue-collar-connect-frontend.git
# Navigate to project directory
cd blue-collar-connect-frontend
# Install dependencies
npm install
# or using yarn
yarn installCreate a .env.local file in your project root and add the following variables:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
# API Configuration
NEXT_PUBLIC_BACKEND_URL=your_backend_api_url
NEXT_PUBLIC_CHAT_URL=your_chatbot_api_url
# Google Maps
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key# Start the development server
npm run dev
# or using yarn
yarn dev🎉 Success! Your application will be available at http://localhost:3000
blue-collar-connect-frontend/
├── 📂 app/ # Next.js app directory
│ ├── 📂 (auth)/ # Authentication routes
│ ├── 📂 dashboard/ # Dashboard pages
│ └── 📂 jobs/ # Job-related pages
├── 📂 components/ # Reusable UI components
│ ├── 📂 ui/ # shadcn/ui components
│ └── 📂 custom/ # Custom components
├── 📂 lib/ # Utilities and configurations
├── 📂 hooks/ # Custom React hooks
├── 📂 types/ # TypeScript type definitions
├── 📂 public/ # Static assets
└── 📄 package.json # Project dependencies
We welcome contributions from developers of all skill levels! Here's how you can get involved:
- Fork the repository on GitHub
- Clone your fork locally:
git clone https://github.com/YOUR_USERNAME/blue-collar-connect-frontend.git
- Create a feature branch:
git checkout -b feature/amazing-feature
- Make your changes and commit them:
git commit -m 'Add some amazing feature' - Push to your fork:
git push origin feature/amazing-feature
- Open a Pull Request with a clear description of your changes
- Follow the existing code style and conventions
- Write clear, concise commit messages
- Add tests for new features when applicable
- Update documentation for any API changes
- Ensure your code passes all existing tests
- Core Web Vitals: Optimized for excellent user experience scores
- SEO Optimized: Server-side rendering for better search visibility
- Analytics Integration: Track user engagement and feature usage
- Error Monitoring: Comprehensive error tracking and reporting
- Data Encryption: All sensitive data is encrypted in transit and at rest
- GDPR Compliant: Full compliance with data protection regulations
- Regular Security Audits: Continuous monitoring for vulnerabilities
- User Privacy Controls: Granular privacy settings for all users
This project is licensed under the MIT License - see the LICENSE file for details.
Need help or have questions?
📧 Email: bluecollarconnectcompany@gmail.com
🐛 Bug Reports: GitHub Issues
💬 Discussions: GitHub Discussions
⭐ Star this repository if you find it helpful!
Made with ❤️ for the blue-collar community