DevTinder Frontend Repository Setup React, Redux, and TailwindCSS Configuration

DevTinder Frontend Repository Setup

The DevTinder frontend is a React application that connects to the backend API. This guide covers cloning, installing dependencies, configuring TailwindCSS and Redux, and connecting to the backend.

Step 1: Clone the Repository

git clone https://github.com/yourusername/devtinder-frontend.git
cd devtinder-frontend

Step 2: Install Dependencies

npm install

Key dependencies include:

• react and react-dom UI library
• react-router-dom Client-side routing
• @reduxjs/toolkit and react-redux State management
• axios HTTP client
• socket.io-client Real-time chat
• tailwindcss Utility-first CSS

Step 3: Configure Environment Variables

cp .env.example .env

VITE_API_URL=http://localhost:3000/api
VITE_SOCKET_URL=http://localhost:3000

These tell the frontend where the backend is running. In production, these will point to your deployed backend URL.

Step 4: Configure TailwindCSS

TailwindCSS is configured via tailwind.config.js:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#fd267d",
        secondary: "#778899",
      },
    },
  },
  plugins: [],
};

The content array tells Tailwind which files to scan for class names.

Step 5: Configure Redux Store

// src/store/store.js
import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./slices/authSlice";
import feedReducer from "./slices/feedSlice";
import chatReducer from "./slices/chatSlice";

export const store = configureStore({
  reducer: {
    auth: authReducer,
    feed: feedReducer,
    chat: chatReducer,
  },
});

Each slice manages a specific part of the app state:

• authSlice User data, login/logout state
• feedSlice Feed users, pagination
• chatSlice Messages, active chat, typing status

Step 6: Configure Axios with Auth Interceptor

// src/utils/axios.js
import axios from "axios";

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  withCredentials: true,
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

export default api;

The withCredentials: true is critical it allows the browser to send and receive cookies (the JWT auth token) with every request.

Step 7: Run the Frontend

npm run dev

The app should start on http://localhost:5173 (Vite default).

Step 8: Connect Frontend to Backend

1. Make sure the backend is running on http://localhost:3000
2. Make sure the frontend .env has VITE_API_URL=http://localhost:3000/api
3. Open http://localhost:5173 in your browser
4. Try signing up the frontend will call the backend API

The Takeaway

Setting up the DevTinder frontend involves cloning, installing dependencies, configuring environment variables (API URL and Socket URL), setting up TailwindCSS and Redux, and configuring Axios with withCredentials for cookie-based auth. Run both frontend and backend simultaneously for local development.