DevTinder 🚀

🔗 Related Repositories

• Backend: https://github.com/MohdAinul/devtinder-backend

DevTinder Frontend

A full-stack developer matchmaking platform inspired by Tinder, built using the MERN stack. Users can create profiles, connect with other developers, and manage connection requests in a clean and interactive UI.

---

📌 Features

🔐 Authentication

• User Signup
• User Login
• Logout functionality
• Protected routes (redirect if not authenticated)

---

🧑‍💻 User Profile

• Create and edit profile
• Update personal details
• Toast notifications on profile update

---

🧭 Navigation

• Dynamic Navbar (updates after login)
• Footer component
• Clean UI with Tailwind + DaisyUI

---

🤝 Connections

• View all connections
• View connection requests
• Accept / Reject requests
• Send / Ignore users from feed

---

📰 Feed

• Fetch user feed from backend
• Store feed data in Redux
• Display users using card UI

---

Real Time Chat using Websocket(socket.io)

• Build the UI for a chat window on /chat/:targetUserId
• setup socket.io in backend
• npm install socket.io

🛠 Tech Stack

Frontend

• React (Vite)
• Tailwind CSS
• DaisyUI
• React Router DOM
• Axios
• Redux Toolkit

Backend

• Node.js
• Express.js
• MongoDB
• CORS

---

⚙️ Project Setup

1️⃣ Create React App

• Setup Vite + React
• Remove unnecessary boilerplate
• Create basic Hello World

---

2️⃣ Install Dependencies

npm install tailwindcss daisyui react-router-dom axios react-redux @reduxjs/toolkit