SkillSwap is an interactive platform designed for individuals to offer, learn, and trade skills within their local community. Whether you want guitar lessons, language exchange, coding help, or yoga training, SkillSwap allows you to browse listings, rate experiences, and connect with local skill providers effortlessly.
🚀 Click Here to Explore SkillSwap
- Browse & Discover Skills: Explore a variety of local skills, classes, and services offered by community members.
- Skill Listings: Detailed listings with images, descriptions, ratings, and provider info.
- Connect & Trade Skills: Chat with skill providers or learners to exchange skills and arrange sessions.
- Rating & Feedback: Leave reviews and ratings to help others find quality skill providers.
- User-Friendly Interface: Simple, fast, and responsive design for an intuitive experience.
- Animations & Interactivity: Smooth animations and carousels using AOS and Swiper.
- Notifications: Get instant feedback on actions like booking or requesting skills using react-hot-toast.
- UI Components: Beautifully designed using Tailwind CSS and DaisyUI.
- Frontend: React.js
- Styling & Components: Tailwind CSS, DaisyUI
- Animations: AOS (Animate on Scroll)
- Notifications: react-hot-toast
- Carousels & Sliders: Swiper.js
- Images: Sourced from Pexels and hosted on PostImages
- State Management: React Hooks (useState, useEffect, etc.)
/project-folder
├── public/ # Public assets like index.html
├── src/
│ ├── assets/ # Images, icons, media
│ ├── components/ # Reusable React components
│ ├── hooks/ # Custom React hooks
│ ├── layouts/ # Layout components for pages
│ ├── pages/ # Individual page components
│ ├── routes/ # Routing configuration files
│ ├── App.jsx # Main App component
│ ├── index.css # Base CSS
│ ├── App.css # Global styles
│ └── main.jsx # Entry point for React
├── .gitignore # Git ignore file
├── package.json # Project metadata & dependencies
├── package-lock.json # Dependency lock
└── vite.config.js # Vite configuration
- Explore Skills: Browse through skill categories and listings.
- Connect & Learn: Click on a listing to see details and contact the skill provider.
- Exchange Skills: Arrange sessions to learn or teach skills locally.
- Leave Feedback: Rate and review your experience to help others in the community.
- Smooth Interactions: Animations and notifications guide users through actions seamlessly.
Follow these steps to set up SkillSwap locally:
- Clone this repository
git clone https://github.com/programming-hero-web-course2/b12-a9-firesheild-Mahbub-Zaman- Navigate to the project folder
cd SkillSwap- Install dependencies
npm install- Start the development server
npm run dev- Add AI chatbot
- Enable booking and scheduling features
- Implement persistent storage with Firebase or MongoDB