This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun deva. Install all dependencies: Make sure you have the necessary packages installed. Next.js, TypeScript, Tailwind CSS, Redux Toolkit, and Leaflet. Install them using:
npm install next react react-dom typescript tailwindcss @reduxjs/toolkit react-redux leaflet
This project is a simple web application that allows users to search for locations and view the results on a map. The application is built using Next.js, TypeScript, Tailwind CSS, Redux Toolkit, and Leaflet. The application is deployed on Vercel and can be accessed Ground-signal-test(Location-search).
- Next.js - The React Framework for Production
- TypeScript - TypeScript extends JavaScript by adding types.
- Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
- Redux Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development.
- React Redux - Official React bindings for Redux.
- Leaflet - An open-source JavaScript library for mobile-friendly interactive maps.
The project is structured as follows:
- Autocomplete Search Field:
- Utilizes the provided sample data from sample-data.js.
- Allows users to search for results based on the name value in an input field.
- Provides autocomplete suggestions as users type.
- Results List:
- Displays the results of the autocomplete search as a list of clickable items.
- Enables users to select/click on items from the list.
- Locations/Markers on Map:
- When a user clicks on a search result, the corresponding location is displayed on the map.
- Utilizes markers to visually represent the locations on the map.
- Details Modal:
- When a user clicks on a map location/marker, a modal is triggered.
- The modal contains additional information about the selected location.
├── components
│ ├── _map
| | ├── map.tsx
│ ├── _modal
| | ├── detailsmodal.tsx
│ ├── _results
| | ├── resultcard.tsx
| | ├── resultlist.tsx
│ ├── _searchbar
| | ├── autocompleteSearchbar.tsx
│
├── redux
│ ├── store.ts
│ ├── provider.tsx
│ ├── reducers.ts
│ ├── types.ts
│ ├── autocomplete-slice.ts
├── const
│ ├── sample-data.js
├── public
│ ├── icon-pin.svg
│ ├── next.svg
│ ├── pin.png
│ ├── icon-search.svg
-
The biggest challenge i faced occurered when i tried to build the application, i kept getting a refrence error, that pointed towares the leaflet library.
RefrenceError: window is not defined. Through research i found out that the leaflet library is not compatible with server side rendering. The problem happens when you include the Leaflet library as a dependency in any SSR app using npm/yarn. The error occurs because Leaflet tries to perform actions that depend on thewindowobject before an instance of it is even created. I was able to fix the issue by using the dynamic import method to import the leaflet library. Here is a link to the Github Pr, NextJs No SSR I used. -
Another chanllenge I faced was getting the markers to show up on the map. I had to do a lot of research and read through the documentation to figure out how to create custom marker. I also had to figure out how to get the markers to show up on the map when a user clicks on a search result. I was able to figure it out by using the Leaflet API and the React-Leaflet library.
- Search results should be sorted by distance from the user's current location.
- The map should be centered on the user's current location.
- Search history should be saved and displayed to the user.
- The user should be able to save locations to a favorites list.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.