Skip to content

README.md

Latest commit

 

History

History
108 lines (84 loc) · 3.79 KB

README.md

File metadata and controls

108 lines (84 loc) · 3.79 KB

Labour Hire Frontend

LIVE MODE

Labour Hire Frontend - Live

Description

The Labour Hire Frontend is the client-side of the full-stack Labour Hire project.
It provides a modern, responsive and dynamic user interface that connects to the backend API hosted on Render.
Through this platform, users can:

  • Sign up and log in (with JWT authentication and bcrypt-secured passwords on backend)
  • Manage their profiles and availability for work
  • Create, list, and manage tasks
  • Interact with tasks by submitting offers and approving/rejecting proposals
  • View dynamic rankings of users based on activity
  • See users currently online and available for hire
  • Navigate through a fully responsive interface accessible on desktop and mobile

The frontend is built with React (Vite), following component-based architecture and modern best practices.

🚀 Technologies Used

  • React + Vite – frontend framework and build tool
  • React Router DOM – client-side routing
  • Axios – API communication with backend
  • JWT – authentication (handled via backend, consumed here)
  • bcrypt – password hashing (on backend, integrated with frontend authentication flow)
  • Vercel – frontend hosting
  • Render – backend hosting

⚙️ Features

  • Authentication

    • Login and Signup with validation
    • Token-based auth (JWT stored and used in requests)
    • bcrypt-secured password flow (backend)
    • Protected routes (only authenticated users can access dashboard and tasks)

  • Task Management (CRUD)

    • Create, edit, delete, and list tasks
    • View available jobs in real time
    • Users can submit offers for tasks and receive responses

  • User Interaction

    • Real-time dynamic ranking system based on activity
    • Show available/online users looking for work
    • Offer system with acceptance/rejection flow

  • UI/UX

    • Fully responsive design (mobile-first)
    • Clean and consistent styling
    • Dashboard layout with navigation sidebar

🔑 Environment Variables

Create a .env file in the project root with:

VITE_API_URL=https://labour-hire-backend.onrender.com/api

⚠️ Never commit your .env file. Use .env.example as reference for contributors.

🖥️ Running the Frontend Locally

Clone the repository: git clone https://github.com/gvserpa/labour-hire-frontend.git

Install dependencies: cd labour-hire-frontend npm install

Run the development server: npm run dev

By default, it will run at: http://localhost:5173

🔗 Deployment

The frontend is deployed on Vercel:
👉 Labour Hire Frontend - Live

The backend API is deployed on Render:
👉 Labour Hire Backend

🔒 Security

  • JWT tokens are stored securely in the frontend for authenticated API calls
  • Passwords are hashed with bcrypt before being stored in the backend database
  • Sensitive values are loaded from .env (not committed to version control)
  • CORS enabled in backend to allow communication with deployed frontend

✅ Best Practices

  • Separation of concerns (components, pages, services, context)
  • Organized project structure for scalability
  • .gitignore properly configured to exclude:
    • node_modules/
    • .env
    • dist/
    • log files (npm-debug.log*)
    • IDE/editor configs (.vscode/, .idea/)

📌 Next Steps

  • Add task filtering and search functionality
  • Improve user ranking logic with more metrics
  • Implement notifications for new offers or accepted proposals
  • Integrate Stripe payments (once backend is completed)
  • Add unit tests and integration tests for pages and services

👨‍💻 Author

Gustavo Vieira Serpa