This is a React and Vite project that includes two routes and utilizes several libraries and APIs for functionality.
Before running the project, make sure you have the following:
- Node.js (version 12 or higher) installed on your machine
- Access to the required environment variables:
VITE_GOOGLE_MAPS_API_KEY: API key for Google Maps APIVITE_BACKEND_ENDPOINT: Backend API endpoint
- Clone the repository:
git clone repository-url](https://github.com/sagiv1996/crop-store-ui - Navigate to the project directory:
cd crop-store-ui - Install the dependencies:
yarn
- Create a
.envfile in the project root. - Set the following environment variables in the
.envfile:VITE_GOOGLE_MAPS_API_KEY=<your-api-key>VITE_BACKEND_ENDPOINT=<backend-endpoint>
To run the project in development mode, use the following command:
yarn dev
This will start the development server and the application will be accessible at http://localhost:5173/.
To build the project for production, use the following command:
yarn build
This will create an optimized production build in the dist directory.
To deploy the project, you can use the static files generated in the dist directory.
This project utilizes the following libraries and APIs:
@headlessui/react- A set of completely unstyled, accessible UI components for React.@react-google-maps/api- React components for Google Maps API integration.@tanstack/react-query- A library for managing and caching asynchronous data in React applications.graphql- A JavaScript reference implementation for GraphQL.graphql-request- A minimal GraphQL client for fetching data.ra-data-graphql- A GraphQL data provider for the React Admin framework.reactandreact-dom- The core libraries for building React applications.react-icons- A library that provides a collection of icons for React components.react-router-dom- A library for routing and navigation in React applications.
Make sure to install these dependencies using yarn before running the project.
This project includes the following routes:
/- The home route that includes an input box using the Google Places API. When the user enters data, more data is loaded, and the user can select a value.After the user has chosen an entry, he can press the "Search" button and go to the second route. If the value of the button is not selected, it is disabled./map/:lat/:lng?address=<address>&cropStoreId=<cropStoreId>- Shows a map and next to it the existing branches. The center of the map comes from the link (lat, lng). In addition, you can write an address and cropStoreId. Information and sending an address, it will be displayed in the input box (otherwise it will only be there and it will be possible to enter another value and go to the relevant page). If you click on a specific marker on the map, or alternatively send cropStoreId, the page will open a pop up window and load the information about the desired branch