SkillSwap – A Local Skill Exchange Platform.
An interactive platform for individuals to offer, learn, and trade skills within their local area. Whether it’s guitar lessons, language exchange, Web Development, yoga training, cooking, photography and others — users can browse listings, rate experiences, and connect with local skill providers.
User Authentication
Firebase Email/Password login & registration
Google OAuth login integration
Routing & SPA
Route-based single-page application (SPA)
Protected Skill Details page for logged-in users
Skill Listings
Skills loaded from local JSON file
Popular Skills section
Top Rated Providers section (dynamic sorting by rating)
Hero Section
Swiper slider with call-to-action buttons
Professional overlay text and images
Booking & Forms
Book session form with validations
Success toast notifications using react-hot-toast
Update profile form with pre-filled data and toast
User Profile
Profile image upload / default placeholder
Update profile info functionality
Responsive Design
Mobile, tablet, and desktop friendly
Hamburger menu for mobile navigation
Fixed Navbar with logo, Home, My Profile, and login/logout buttons
Animations & Effects
Section scroll animations using AOS
Hero slider animation using Swiper
Hover / scale animations for cards using Tailwind transitions
Toast Notifications
react-hot-toast for success/error/info messages
Profile update, booking, and login/signup feedback
Professional UI Enhancements
Hover effects on skill cards and buttons
Shadow, rounded corners, smooth transitions
Call-to-action buttons in Hero and sections
react → React core library
react-dom → React DOM rendering
react-router-dom → Page routing (Home, Profile, Login, etc.)
tailwindcss → Utility-first CSS framework
postcss → Required for Tailwind setup
autoprefixer → Required for Tailwind setup
swiper → Hero slider / carousel
react-hot-toast → Toast notifications (success, error, info)
react-icons → Hamburger menu and other UI icons
aos → Animate on scroll (fade, slide, zoom)