A modern, fully responsive web application that connects skill providers and learners in their local community. Users can browse, book, and exchange skills seamlessly with Firebase authentication and real-time updates.
Live: https://skilswapp.netlify.app/
- Features
- Tech Stack
- Dependencies
- Installation
- Environment Setup
- Project Structure
- Usage
- Authentication
-
Public Home Page
- Hero carousel slider with Swiper (minimum 3 slides)
- Featured/Top-rated skills section
- Skills by category section
- How it works section
- Testimonials section
- Blog/Articles section
- Newsletter subscription
- Professional footer with social links
-
All Skills Page
- Browse all available skills
- Advanced filtering and sorting (Ascending/Descending)
- Responsive grid layout (4 columns on desktop)
- Public access (no login required)
-
Skill Details Page
- Complete skill information
- Professional clean design
- Book session button
- Protected route (login required)
-
Authentication System
- Email/Password registration with validation
- Google OAuth login
- Password strength requirements:
- At least one uppercase letter
- At least one lowercase letter
- Minimum 6 characters length
- Forgot password functionality (Firebase integrated)
- Email verification support
-
User Profile Management
- View profile information
- Update name and profile image
- View booking history
- Manage listed skills
-
Session Booking
- Interactive booking form
- Success notifications with React Hot Toast
- Booking confirmation
-
User Experience
- Smooth animations (AOS - Animate On Scroll)
- Toast notifications for actions
- Sticky navigation bar
- Mobile hamburger menu
- Dark mode support
- Fully responsive design
- Professional 404 error page
- About Us page
- Contact Us page
- Support page
- Dark/Light theme toggle
- Accessibility optimized
- SEO friendly structure
- React 18 - UI library
- Vite - Fast build tool and dev server
- React Router v6 - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Swiper - Touch slider carousel
- AOS (Animate On Scroll) - Scroll animations
- Lucide React - Icon library
- Firebase
- Authentication (Email/Password + Google)
- Firestore Database
- Cloud Storage (for profile images)
- React Hot Toast - Toast notifications
- Tailwind CSS - Responsive styling
| Package | Version | Purpose |
|---|---|---|
| react | ^18.2.0 | UI library |
| react-dom | ^18.2.0 | React DOM rendering |
| react-router-dom | ^6.20.0 | Client-side routing |
| firebase | ^10.7.0 | Backend services (Auth, Firestore, Storage) |
| swiper | ^11.0.3 | Touch carousel slider |
| react-hot-toast | ^2.4.1 | Toast notifications |
| aos | ^2.3.4 | Animate on scroll animations |
| lucide-react | ^0.292.0 | Icon library |
| tailwindcss | ^3.3.6 | CSS utility framework |
| Package | Version | Purpose |
|---|---|---|
| @vitejs/plugin-react | ^4.2.1 | Vite React plugin |
| vite | ^5.0.8 | Build tool & dev server |
| @types/react | ^18.2.37 | React TypeScript types |
| @types/react-dom | ^18.2.15 | React DOM TypeScript types |
| eslint | ^8.54.0 | Code linting |
| eslint-plugin-react | ^7.33.2 | ESLint React plugin |
| eslint-plugin-react-hooks | ^4.6.0 | ESLint React hooks plugin |
| eslint-plugin-react-refresh | ^0.4.5 | ESLint React refresh plugin |
| postcss | ^8.4.31 | CSS processing |
| autoprefixer | ^10.4.16 | CSS vendor prefixing |
- Node.js (v16 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/skillswap.git
# Navigate to project directory
cd skillswap
# Install dependencies
npm installnpm install react-router-dom lucide-react swiper react-hot-toast aos firebaseCreate a new file .env.local in the root directory:
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id- Go to Firebase Console
- Create a new project
- Enable Authentication (Email/Password + Google)
- Enable Firestore Database
- Copy your project credentials to
.env.local
npm run devOpens at http://localhost:5173
npm run buildnpm run previewnpm run lint- User fills registration form with email and password
- Password validation:
- Minimum 6 characters
- At least one uppercase letter
- At least one lowercase letter
- Firebase creates user account
- User automatically logged in
- Redirects to profile setup page
- Email/Password login or Google OAuth
- Firebase authenticates user
- Session persisted in browser
- Redirects to dashboard
- User clicks "Forgot Password" on login page
- Enters email address
- Firebase sends reset link via email
- User resets password
- Automatically redirects to Gmail (if configured)
- Skill details page (requires login)
- Profile page (requires login)
- Booking confirmation (requires login)
- Mobile hamburger navigation menu
- Touch-friendly buttons and inputs
- Optimized images for all devices
- Flexible grid layouts
- Readable font sizes on all screens
- Proper spacing and padding
| Page | Route | Protected | Description |
|---|---|---|---|
| Home | / | ❌ | Landing page with featured skills |
| All Items | /all-items | ❌ | Browse all skills with filters |
| Item Details | /item/:id | ✅ | Full skill information & booking |
| About | /about | ❌ | About SkillSwap platform |
| Contact | /contact | ❌ | Contact form & info |
| Support | /support | ❌ | FAQ & support resources |
| Login | /login | ❌ | User login page |
| Register | /register | ❌ | User registration page |
| Profile | /profile | ✅ | User profile management |
| 404 | * | ❌ | Page not found |
User → Navbar (Router) → Page/Component
↓
Firebase Authentication
↓
Protected/Public Route
↓
Firestore Database
↓
Display Content/Form
↓
User Action → Toast Notification
- Firebase for authentication and database services
- Swiper for carousel functionality
- AOS for scroll animations
- Tailwind CSS for styling
- React community for tools and libraries