DevTinder is a modern, interactive web application that connects developers based on their skills, interests, and project goals. Think "Tinder for Developers" - swipe through developer profiles, connect with like-minded programmers, and build amazing projects together.
β¨ Features
1 Swipe-based developer discovery 2 Smart algorithmic matching 3 Real-time connections & notifications 4 Profile management with bio, skills & projects
1 Secure login/signup (JWT-based) 2 Session persistence 3 Protected routes with role-based access
1 Responsive mobile-first design (Tailwind CSS) 2 Smooth animations (Framer Motion) 3 Dark theme & 3D elements (React Three Fiber)
1 Frontend: React 19, Vite, React Router 2 State Management: Redux Toolkit 3 Styling: Tailwind CSS, Framer Motion, Lucide Icons 4 3D Graphics: React Three Fiber, Drei, Three.js 5 HTTP & API: Axios, centralized API config 6 Forms & Notifications: React Hook Form, React Toastify, Hot Toast 7 Tools: ESLint, TypeScript (supported)
- Node.js (v18 or higher)
- npm or yarn package manager
- Clone the repository
git clone https://github.com/your-username/devtinder-frontend.git cd devtinder-frontend Also Start you Backend Server also you Can find it here https://github.com/coder-writes/dev-tinder
- Install dependencies
npm install # or yarn install
- Environment Setup
Create a
.env
file in the root directory:VITE_BASE_URL=http://localhost:7777
- Start the development server
npm run dev # or yarn dev
- Open your browser
Navigate to
http://localhost:5173
to see the application.
src/ βββ components/ # Reusable components β βββ 3d/ # 3D elements βββ pages/ # Page-level components βββ utils/ # API config, Redux slices, helpers βββ theme/ # Color and theme setup βββ App.jsx # Main app entry point
π― Key Features
1 π Swipe-Based Matching β Discover developers with an intuitive card interface
2 π€ Smart Matching System β Connect with developers having complementary skills
3 π Real-Time Notifications β Instant updates for matches and requests
4 π§βπ» Profile Customization β Showcase bio, skills, tech stack, and projects
5 π Secure Auth System β JWT-based login with protected routes
6 π Modern UI β Responsive dark-themed design with 3D and animated elements
7 βοΈ Performance Optimized β Lazy loading, code splitting, and fast refresh
## π§ Available Scripts
```bash
# Development
npm run dev # Start development server with HMR
# Production
npm run build # Build for production
npm run preview # Preview production build locally
# Code Quality
npm run lint # Run ESLint for code quality check
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Thanks to the React, Vite, Tailwind, Framer Motion, and open-source communities for their tools and inspiration.
Made with β€οΈ by the DevTinder Team