A modern platform for skill exchange and learning. Connect with others, share your expertise, and discover new skills in a collaborative community.
- 🔐 User Authentication - Secure login and registration with email validation
- 🔍 Skill Discovery - Browse and search for skills across multiple categories
- 🏷️ Skill Filtering - Filter skills by categories (Design, Development, Marketing, Business)
- 👤 User Profiles - Create and manage your profile with your skills
- 💼 Skill Exchange - Connect with other users to exchange knowledge and expertise
- 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- Frontend Framework: Next.js 15 with TypeScript
- Styling: Tailwind CSS
- Form Validation: Zod
- UI Components: Custom reusable components (Button, Input, NavBar)
- Font: Geist Font Family
- Linting: ESLint with Next.js configuration
src/
├── app/ # Next.js app router pages
│ ├── (auth)/ # Authentication routes (login, register)
│ ├── (public)/ # Public routes (browse, learn)
│ └── layout.tsx # Root layout
├── components/
│ └── ui/ # Reusable UI components (Button, Input, NavBar)
├── features/
│ ├── auth/ # Authentication feature
│ │ ├── components/ # LoginForm, RegisterForm, HeaderBlock
│ │ └── schemas/ # Zod validation schemas
│ └── browse/ # Browse skills feature
│ └── components/ # Search, SkillFilter, Card, Header
└── shared/
└── lib/ # Shared utilities and helpers
- Node.js 18.17 or later
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone <repository-url>
cd skill-swap- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun installRun the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to see the application.
Create a production build:
npm run build
npm run startCheck code quality:
npm run lint/- Home page/login- User login page/register- User registration page/browse- Browse and discover skills/learn- Learning resources page
- Button - Reusable button component with hover effects
- Input - Form input with error handling and validation display
- NavBar - Navigation bar with logo and action buttons
- LoginForm - User login with email and password validation
- RegisterForm - User registration with form fields
- Search - Skill search component with search icon
- SkillFilter - Category filter buttons for skills
- Card - Skill card displaying skill information
- Header - Section headers and titles
The project uses a custom color palette defined in tailwind.config.js. The primary color is blue (#137fec). You can modify the theme by editing the Tailwind configuration.
The project uses Geist and Geist Mono fonts from Google Fonts. To change fonts, modify the font imports in src/app/layout.tsx.
The project uses Zod for schema validation. Validation schemas are located in src/features/auth/schemas/. Currently implemented:
- Login schema - Email and password validation
- Backend API integration
- User profile pages
- Messaging/chat system
- Skill ratings and reviews
- Payment integration for premium features
- Dark mode support enhancement
- Advanced search and filtering
The easiest way to deploy is using Vercel:
- Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
- Import the project to Vercel
- Vercel will automatically detect Next.js and configure the build settings
- Your app will be deployed and accessible via a Vercel URL
See Next.js deployment documentation for more details.
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
For support, please open an issue in the repository or contact the development team.