stede-technologies/vc-frontend

Bringing the VendorConnect backend to life. A high-performance, bilingual (English/Luganda) Next.js web application designed to help informal market vendors track daily sales, optimize product photography with AI, and unlock working capital. # VendorConnect Integration Exercise Welcome to the frontend integration phase! We have successfully built our FastAPI backend and designed the Next.js UI. Your mission today is to connect the two. In this repository, you will find the complete UI for the VendorConnect dashboard. However, the data is currently hardcoded. Your objective is to replace this mock data with real data fetched from our backend endpoints. ## Setup Instructions Follow these steps to get your local development environment running. ### 1. Prerequisites Ensure you have the following installed on your machine: * Node.js (Version 18 or higher) * Git * A code editor like VS Code ### 2. Clone the Repository Open your terminal and clone this repository to your local machine: ```bash git clone github.com cd vc-frontend => npm install => touch .env.local => Open .env.local and add the following line (update the URL if your backend is running on a different port): NEXT_PUBLIC_API_URL=localhost => npm run dev ``` ## Repository Structure To keep our code organized, we separate our API calls from our React components. * **`src/lib/api.ts`**: Contains the global Axios setup (already configured for you). * **`src/lib/api-client.ts`**: This is where you will write the functions that make HTTP requests to the backend. * **`src/features/`**: Contains the UI components where you will use React Query to call the functions you wrote in `api-client.ts`. ## Your Mission **Step 1: Write the Fetch Functions** Navigate to `src/lib/api-client.ts`. You will find a series of empty functions marked with `TODO`. Using the provided API Documentation, write the Axios requests for each module (Core Profile, MarketFresh, Londola, TukolaPay). **Step 2: Connect the UI (React Query)** Once your fetch functions are ready, navigate to the respective components in `src/features/`. Replace the hardcoded data by implementing the `useQuery` and `useMutat …