Honestgig — Frontend

This repository contains the Honestgig frontend (React + Vite) and a backend folder with the API (Node/Express + MongoDB).

Quick overview

• Frontend: React 18 + Vite
• Backend: Node.js + Express (in backend/)
• Database: MongoDB (local or remote)

Prerequisites

• Node.js v18+ (or as specified by project)
• npm or yarn
• MongoDB running locally (default: mongodb://127.0.0.1:27017/honestgig) or set MONGODB_URI

Setup (frontend)

1. Install dependencies:

cd s:\honestgig-frontend
npm install

2. Start dev server:

npm run dev
# Frontend will be served on http://127.0.0.1:5174 by default

Setup (backend)

1. Install and start backend dependencies:

cd s:\honestgig-frontend\backend
npm install
npm start
# Backend listens on port 5000 by default

2. Environment variables (create .env in backend/):

PORT=5000
MONGODB_URI=mongodb://127.0.0.1:27017/honestgig
JWT_SECRET=your_jwt_secret_here
FRONTEND_URL=http://localhost:5174

Common development issues & fixes

• CORS errors (Access-Control-Allow-Origin):

  • If frontend uses 127.0.0.1 but backend CORS allows localhost (or vice-versa), you'll see preflight errors. Make sure backend CORS origin includes both http://localhost:5174 and http://127.0.0.1:5174, or set FRONTEND_URL to match the address you use.

• HMR / WebSocket connection failures in Vite:

  • If you see errors about failing to connect to websocket, configure vite.config.js server.hmr host/port. Using 127.0.0.1 instead of localhost often resolves Windows issues. Example:

server: {
  host: '127.0.0.1',
  port: 5174,
  hmr: { host: '127.0.0.1', port: 5174 },
  watch: { usePolling: true }
}

• Port already in use: use netstat -ano | findstr :5000 then taskkill /PID <pid> /F to free the port.

Testing registration flow

1. Start backend and frontend.
2. Open http://127.0.0.1:5174/freelancer-registration.
3. Fill registration steps. If you see Validation failed or Registration failed, open browser DevTools → Network → POST /api/auth/register → Response JSON to inspect the errors array (the backend returns validation errors with field & message).

Notes for contributors

• Keep API URL consistent: frontend calls http://localhost:5000 by default, backend binds to port 5000.
• Add environment variables to .env and do NOT commit them (we added .gitignore to ignore .env).

---

If you'd like, I can also:

• Commit the .gitignore and README.md with a message.
• Add usage examples for the authentication API endpoints. <<<<<<< HEAD

Honestgig Frontend

Overview

Honestgig is a web application frontend built with React, Vite, and Tailwind CSS. It provides an interface for freelancers to manage their profiles and dashboards, as well as explore key features of the platform.

Features

• Responsive design using Tailwind CSS
• Client-side routing with React Router
• Modular component structure
• MetaMask wallet connection for blockchain functionality

Tech Stack

• React 18
• Vite
• Tailwind CSS
• React Router
• MetaMask API

Prerequisites

• Node.js (>=14.x)
• npm (>=6.x) or yarn (>=1.x)

Installation

1. Clone the repository:

   git clone https://github.com/amisha-cloud/Honestgig.git

2. Navigate to the frontend directory:

   cd honestgig-frontend

3. Install dependencies:

   npm install

   or

   yarn install

Development

To start the development server with hot module replacement:

npm run dev

or

yarn dev

Open your browser and go to http://localhost:5173 to view the application.

HonestGig

This repository contains the HonestGig project (frontend + backend). The frontend is a React + Vite app and the backend is a Node/Express API that uses MongoDB.

This README provides a concise, accurate setup and troubleshooting guide for local development on Windows (PowerShell).

Repository layout

• frontend/ → React + Vite frontend (development starts here)
• backend/ → Node.js + Express API
• public/ → static assets used by the frontend
• README.md → this file

Prerequisites

• Node.js v18+ and npm (Windows PowerShell)
• MongoDB (local or remote). Default local URI: mongodb://127.0.0.1:27017/honestgig

Environment files

Create a .env file inside backend/ with at least:

PORT=5000
MONGODB_URI=mongodb://127.0.0.1:27017/honestgig
JWT_SECRET=your_jwt_secret_here
FRONTEND_URL=http://127.0.0.1:5174

Do NOT commit .env — it is ignored by .gitignore.

Install and run (PowerShell)

1. Backend

# from project root
cd S:\honestgig-frontend\backend
npm install
# start in dev mode (if package.json has a dev script) or use start
npm run dev; # or 'npm start' depending on scripts

2. Frontend

cd S:\honestgig-frontend\frontend
npm install
npm run dev
# Vite will report the local URL, usually http://127.0.0.1:5174

Open the frontend URL shown by Vite (prefer 127.0.0.1 to avoid localhost/WSC mismatch on Windows).

Common issues & troubleshooting

• CORS mismatch between localhost and 127.0.0.1

  • If the browser reports Access-Control-Allow-Origin mismatch, ensure the backend CORS origin list includes both http://localhost:5174 and http://127.0.0.1:5174, or set FRONTEND_URL to exactly what you use in the browser.

• Vite HMR / WebSocket failures on Windows

  • Use 127.0.0.1 in vite.config.js server.hmr host and in the server.host setting. Example:

server: {
  host: '127.0.0.1',
  port: 5174,
  hmr: { host: '127.0.0.1', port: 5174 },
  watch: { usePolling: true }
}

• Port in use (e.g. backend 5000)

  • Find processes: netstat -ano | findstr :5000
  • Kill by PID: taskkill /PID <pid> /F

• Deleting root node_modules when files are locked

  • Stop any running dev server(s) first (close terminals or kill node processes):

# Find node processes
Get-Process node -ErrorAction SilentlyContinue
# Kill all node processes (be careful, this kills all Node instances):
taskkill /IM node.exe /F

• Then remove the folder safely:

# from project root
Remove-Item -Recurse -Force .\node_modules

Developer notes

• Frontend expects the API at http://localhost:5000 (you can change this in the front-end api client). If you run backend on a different host/port, update the frontend config or backend/.env FRONTEND_URL accordingly.
• Registration and authentication endpoints return structured validation errors. Inspect the JSON response body to see errors and field messages.
• MetaMask support exists in the frontend under frontend/src/components/wallet/. Use MetaMask connected to the appropriate network when testing blockchain features.

Quick checklist for first run

1. Start MongoDB (local or ensure MONGODB_URI points to a running DB).
2. Create backend/.env with a JWT_SECRET and MONGODB_URI.
3. Install & run backend, then install & run frontend (see commands above).

Contributing

Open issues or PRs. Please follow project code style and include a short description of any breaking changes.

Contact / next steps

If you want, I can also:

• add brief API usage examples (endpoints + sample payloads)
• add a small local integration test or a tiny script to confirm the backend is accepting requests
• push local branch changes or help clean up the remaining root node_modules if you confirm it's safe to kill running node processes on your machine.

---

Generated: November 1, 2025