SkillSwap — Local Skill Exchange Platform

Live Demo: https://skill-swap-app-36f05.web.app/

---

🚀 Project Overview

SkillSwap is a community-first web application that helps people offer, learn, and trade skills locally. Users can browse skill listings, view provider profiles, book slots, rate experiences, and manage their own offerings. The app is built with React + Vite and emphasizes simplicity, accessibility, and a mobile-responsive UI.

---

📌 Key Features

• Authentication: Email/password signup, login, logout, password reset (Firebase Auth).
• Persistent Layout: Navbar and Footer available on every page.
• Home Page: Hero slider, popular skills grid, top-rated providers, "How it works" section, and an extra home section.
• Skill Listings: Generated from skills.json (at least 6 skills). Each card shows image, name, rating, price, and "View Details".
• Provider Profiles: Provider name, email, offered skills, ratings, and contact options.
• Booking / Slots: Slots availability per skill with basic booking UX.
• Protected Routes: Certain pages require authentication (Profile, Booking, etc.).
• Responsive Design: Mobile-first layout with accessible components (DaisyUI / Tailwind optional).

---

🧩 Example Skill Object (skills.json)

[
  {
    "skillId": 1,
    "skillName": "Beginner Guitar Lessons",
    "providerName": "Alex Martin",
    "providerEmail": "alex@skillswap.com",
    "price": 20,
    "rating": 4.8,
    "slotsAvailable": 3,
    "description": "Acoustic guitar classes for complete beginners.",
    "image": "https://i.postimg.cc/example1.png",
    "category": "Music"
  }
]

---

🗂 Recommended Project Structure

skill-swap-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   ├── Footer.jsx
│   │   ├── SkillCard.jsx
│   │   ├── ProviderCard.jsx
│   │   └── Error404.jsx
│   ├── firebase/
│   │   └── firebase.config.js
│   ├── layout/
│   │   └── MainLayout.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Signup.jsx
│   │   ├── Profile.jsx
│   │   ├── ForgetPassword.jsx
│   │   └── SkillDetails.jsx
│   ├── providers/
│   │   └── AuthProvider.jsx
│   ├── data/
│   │   └── skills.json
│   ├── routes/
│   │   ├── ProtectedRoute.jsx
│   │   └── Router.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
└── README.md

---

🛠 Tech Stack

• Framework: React (Vite)
• Styling: Tailwind CSS or DaisyUI (optionally plain CSS)
• Auth & DB: Firebase (Auth + Firestore) or JSON mock data
• Routing: react-router-dom
• State: Context API (AuthProvider) or a light state manager
• Slider: Swiper.js or DaisyUI carousel

---

⚙️ Setup Instructions (Local)

1. Clone the repo

git clone <repo-url>
cd skill-swap-app

2. Install dependencies

npm install
# or
pnpm install

3. Environment

• Create a .env file for Firebase config (if using Firebase):

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

4. Run locally

npm run dev

5. Build for production

npm run build
npm run preview

---

✅ Deployment

• Deployed example: Firebase Hosting / Vercel / Netlify work well with Vite apps.
• For Firebase Hosting, run firebase deploy --only hosting after configuring firebase.json.

---

🔭 Future Improvements

• Real booking flow with calendar integration
• In-app messaging between learners and providers
• Reviews & comments for each booking
• Filters and search by category, price, rating, and distance
• Map integration to show provider locations
• Admin dashboard to manage listings and users

---

🧾 License

This project is released under the MIT License. See LICENSE file for details.

---

✉️ Contact

Created by the project author — for questions or contributions, open an issue or PR on the repository.

---

If you want, I can also generate the starter React components (Navbar, Footer, SkillCard), a sample skills.json, or the Firebase config template. Which would you like next?