A dynamic React-based skill swap platform that enables global skill discovery and matching through an advanced, performance-optimized interface with enhanced user interaction capabilities.
├── client/ # Frontend React application
│ ├── src/ # Source files
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utilities and configurations
├── server/ # Backend Express.js API
│ ├── routes.ts # API route definitions
│ ├── db.ts # Database configuration
│ ├── storage.ts # Data access layer
│ └── cloudinary.ts # Image upload service
├── shared/ # Shared TypeScript schemas
│ └── schema.ts # Database models and types
├── docs/ # Documentation and assets
│ ├── DATABASE_CONFIG.md # Database setup guide
│ ├── replit.md # Project documentation
│ └── assets/ # Design files and diagrams
├── .env.example # Environment variables template
├── package.json # Dependencies and scripts
└── README.md # Main setup instructions
- User Discovery: Browse users by skills with advanced filtering
- Real-time Search: Filter by skill categories and availability
- Skill Matching: Send swap requests to users with complementary skills
- Profile Management: Comprehensive user profiles with skill listings
- Mobile-First Design: Responsive interface optimized for all devices
- Rating System: Rate and review completed skill swaps
- Admin Dashboard: Complete administrative tools for platform management
- Photo Upload: Profile photo management via Cloudinary
- Smart Notifications: Real-time notification system
- Frontend: React 18 + TypeScript
- Styling: Tailwind CSS + shadcn/ui components
- Backend: Express.js + TypeScript
- Database: PostgreSQL with Drizzle ORM
- Image Storage: Cloudinary
- Build Tool: Vite
- State Management: TanStack Query
- Node.js (18+)
- PostgreSQL database - See Database Config Guide
- Cloudinary account (for image uploads)
-
Clone the repository
git clone <repository-url> cd skill-swap-platform
-
Install dependencies
npm install
-
Environment setup
cp .env.example .env
Configure your
.env
file with:DATABASE_URL=postgresql://username:password@host:port/database CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name SESSION_SECRET=your_secure_session_secret
-
Database setup
npm run db:push
-
Start development server
npm run dev
-
Access the application Open
http://localhost:5000
in your browser
Variable | Description | Required |
---|---|---|
DATABASE_URL |
PostgreSQL connection string | ✅ |
CLOUDINARY_API_KEY |
Cloudinary API key | ✅ |
CLOUDINARY_API_SECRET |
Cloudinary API secret | ✅ |
CLOUDINARY_CLOUD_NAME |
Cloudinary cloud name | ✅ |
SESSION_SECRET |
Session encryption key | ✅ |
NODE_ENV |
Environment (development/production) | ❌ |
PORT |
Server port (default: 5000) | ❌ |
This application requires a PostgreSQL database. For detailed setup instructions, see Database Configuration Guide.
Quick Options:
- Cloud databases: Neon, Supabase, Railway (recommended)
- Cloud Providers: Neon, Supabase, Heroku Postgres, etc.
- Docker: Run PostgreSQL in a container
- Neon - Serverless PostgreSQL
- Supabase - Open source Firebase alternative
- Railway - Simple cloud deployment
- Heroku Postgres - Managed PostgreSQL
- The application uses hot module replacement for fast development
- Frontend and backend are served on the same port (5000)
- Database migrations are handled by Drizzle Kit (
npm run db:push
) - No separate database setup needed - schema is automatically synced
npm run dev # Start development server
npm run build # Build for production
npm run db:push # Sync database schema
npm start # Start production server
- Database connection issues? → See Database Config
- Build errors? → Check Node.js version (18+ required)
- Environment variables? → Verify all required variables in .env.example
Check out the live application: https://skillswap-vzjn.onrender.com/
- All sensitive credentials are stored in environment variables
- Session management with PostgreSQL-backed storage
- Input validation and sanitization
- Secure file upload handling
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Make your changes
- Test thoroughly
- Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
Main Documentation Hub: docs/README.md
- Database Setup - PostgreSQL configuration and troubleshooting
- Quick Backup - Ready-to-use backup solution
- Deployment Guide - Production deployment instructions
- Project Documentation - Complete project history and architecture
- Environment Variables - Required configuration template
- Setup Issues? → Database Config
- Deployment? → Deployment Guide
- Architecture? → Project Docs
This project is for educational and demonstration purposes.
Built with ❤️ using modern web technologies