How to Set Up a Full Stack React + Node Project Like DevTinder

How to Set Up a Full Stack React + Node Project Like DevTinder

Setting up a full-stack React and Node project can be confusing because you have two codebases. Here is how to do it cleanly.

Two Codebases or One

Decide on one repo with both frontend and backend, or two separate repos. For a learning project, two folders in one repo is simplest. For production, separate repos are common.

Backend Setup

Initialize a Node project with npm, install Express and Mongoose, set up a basic Express server, and connect to MongoDB. Create folders for routes, controllers, models, and middlewares.

Frontend Setup

Initialize a React app with Vite or Create React App in a separate folder, install axios for API calls, and set up your routing and state.

Environment Variables

Both folders have their own environment variables: the backend for the database URL and JWT secret, the frontend for the API URL. Use .env files and never commit secrets.

Running Both

Run the backend on one port and the frontend on another. Use a proxy in the frontend's dev config or set the API URL in env vars, so the frontend calls the right backend.

CORS

Configure CORS on the backend to allow the frontend's origin in development, or serve both from the same origin in production to avoid CORS entirely.

Project Structure

Backend: routes, controllers, models, middlewares, utils. Frontend: components, hooks, pages, api. Keep the structure consistent and organized by feature as the project grows.

The Takeaway

Set up a full-stack React and Node project by deciding on one or two repos, setting up each side, using environment variables, running both with the right API URL, configuring CORS, and organizing each codebase by feature.