TechFinder - Local Technician Finder

A modern, minimalist web application that connects users with verified local technicians for various repair and maintenance services. Built with the MERN stack (MongoDB, Express.js, React, Node.js) and featuring a clean, Apple-inspired design.

✨ Features

🔧 Core Functionality

• User Registration & Authentication: Secure JWT-based authentication system
• Technician Profiles: Detailed profiles with ratings, reviews, and service areas
• Service Categories: Electrical, Plumbing, Computer Repair, Mobile Repair, AC Maintenance, Vehicle Service
• Booking System: Schedule appointments with local technicians
• Review System: Rate and review technicians after service completion
• Search & Filter: Find technicians by location, service type, and availability

🎨 Design Features

• Minimalist UI: Clean, Apple-inspired design with proper spacing
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Glassmorphic Elements: Subtle glass effects with backdrop blur
• Smooth Animations: Elegant transitions and micro-interactions
• Accessibility: WCAG compliant with proper focus states

🔒 Security Features

• Password Hashing: Bcrypt encryption for user passwords
• JWT Authentication: Secure token-based authentication
• Input Validation: Comprehensive form validation and sanitization
• CORS Protection: Cross-origin resource sharing configuration
• Environment Variables: Secure configuration management

🚀 Tech Stack

Frontend

• React 18: Modern React with hooks and functional components
• Vite: Fast build tool and development server
• Tailwind CSS: Utility-first CSS framework
• Lucide React: Beautiful, customizable icons
• React Router: Client-side routing
• React Hot Toast: Elegant toast notifications
• Axios: HTTP client for API requests

Backend

• Node.js: JavaScript runtime
• Express.js: Web application framework
• MongoDB: NoSQL database with Mongoose ODM
• JWT: JSON Web Token authentication
• Bcryptjs: Password hashing
• Express Validator: Input validation middleware
• CORS: Cross-origin resource sharing

Database

• MongoDB Atlas: Cloud-hosted MongoDB database
• Mongoose: MongoDB object modeling for Node.js
• Schema Validation: Built-in data validation

📦 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• MongoDB Atlas account

Clone the Repository

git clone https://github.com/Anuhyaaa/tech-finder.git
cd tech-finder/tech-finder-app

Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

Start the backend server:

npm run dev

Frontend Setup

cd frontend
npm install

Start the frontend development server:

npm run dev

The application will be available at http://localhost:3000

🗄️ Database Setup

Initialize Sample Data

cd backend
npm run init-db

This will create sample users, technicians, bookings, and reviews in your database.

Sample Data Includes:

• Users: Regular users and technicians
• Technicians: Various service providers with different specializations
• Bookings: Sample appointments and service requests
• Reviews: User ratings and feedback

📱 Usage

For Users

1. Register/Login: Create an account or sign in
2. Search Technicians: Browse available technicians by service type
3. Book Appointments: Schedule services with preferred technicians
4. Rate & Review: Provide feedback after service completion

For Technicians

1. Register as Technician: Sign up with technician role
2. Complete Profile: Add services, availability, and location
3. Manage Bookings: Accept/decline service requests
4. Track Earnings: Monitor completed services and payments

🔧 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/users/profile - Get user profile (protected)

Technicians

• GET /api/technicians - Get all technicians
• GET /api/technicians/:id - Get technician details
• POST /api/technicians - Create technician profile (protected)
• PUT /api/technicians/:id - Update technician profile (protected)

Bookings

• GET /api/bookings - Get user bookings (protected)
• POST /api/bookings - Create new booking (protected)
• PUT /api/bookings/:id - Update booking status (protected)

Reviews

• GET /api/reviews - Get technician reviews
• POST /api/reviews - Create review (protected)

🎨 Design System

Color Palette

• Primary Blue: #2563eb (Blue-600)
• Secondary Gray: #6b7280 (Gray-500)
• Success Green: #10b981 (Emerald-500)
• Warning Yellow: #f59e0b (Amber-500)
• Error Red: #ef4444 (Red-500)

Typography

• Font Family: Inter (Google Fonts)
• Headings: Bold weights for hierarchy
• Body Text: Regular weight for readability

Components

• Buttons: Blue primary, white secondary
• Cards: White background with subtle shadows
• Forms: Clean inputs with focus states
• Navigation: Minimal navbar with active states

🚀 Deployment

Backend Deployment (Heroku)

# Add to package.json
"scripts": {
  "start": "node server.js"
}

# Deploy to Heroku
heroku create your-app-name
git push heroku main

Frontend Deployment (Vercel)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Environment Variables for Production

PORT=5000
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_production_jwt_secret
NODE_ENV=production

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

• Anuhya - Full Stack Developer
• Project: TechFinder - Local Technician Finder

🙏 Acknowledgments

• Icons: Lucide React
• UI Framework: Tailwind CSS
• Build Tool: Vite
• Database: MongoDB Atlas

📞 Support

For support, email support@techfinder.com or create an issue in this repository.

---

TechFinder - Connecting you with trusted local technicians since 2025.