Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

License

Notifications You must be signed in to change notification settings

coder-writes/devTinder-frontend-main

Repository files navigation

πŸ”₯ DevTinder - Developer Connection Platform

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

🎯 Core Features

1 Swipe-based developer discovery 2 Smart algorithmic matching 3 Real-time connections & notifications 4 Profile management with bio, skills & projects

πŸ” Authentication

1 Secure login/signup (JWT-based) 2 Session persistence 3 Protected routes with role-based access

πŸ’» UI/UX

1 Responsive mobile-first design (Tailwind CSS) 2 Smooth animations (Framer Motion) 3 Dark theme & 3D elements (React Three Fiber)

πŸ› οΈ Tech Stack

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)

πŸš€ Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn package manager

Installation

  1. 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
  2. Install dependencies
    npm install
    # or
    yarn install
  3. Environment Setup Create a .env file in the root directory:
    VITE_BASE_URL=http://localhost:7777
  4. Start the development server
    npm run dev
    # or
    yarn dev
  5. Open your browser Navigate to http://localhost:5173 to see the application.

πŸ“ Project Structure

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

🀝 Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

Thanks to the React, Vite, Tailwind, Framer Motion, and open-source communities for their tools and inspiration.

Made with ❀️ by the DevTinder Team

About

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.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 10

Languages

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /