Crunchy is a "find nearby places" app built with Next.js, React.js, JavaScript, Tailwind CSS, Google Places API, and Google Maps API.
Why this stack? I have decided to use Next.js to render the pages statically, React.js to build the user interface, JavaScript, Tailwind CSS to style the application, and Google Places API and Google Maps to power the search functionality.
- View bars, restaurants or cafés nearby your location
- Search bars, restaurants or cafés with the search bar
- Navigate the map provided by Google Maps
- Next.js
- React.js
- JavaScript,
- Tailwind CSS
- Google Places API
- Google Maps API
I started by writing down in my notebook what features I wanted.
I obviously started by setting up Next.js and the folder strucutre, then continued with the Tailwind CSS. Next, I set up the Side Nav Bar, the Search Bar, and the Category List, then focused on the Business List component.
Then it was the bigger part of the project, generate the Google Places API and getting and fetching places from the API. I then added the Shimmer Effect to give the impression of data loading.
The most challenging part was figuring out how to calculate the distance. One new thing I learned was indexing in Google Places API. That was new to me and something I can take with me into the future.
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Run npm install or yarn in the project directory to install the required dependencies.
- Run npm run start or yarn start to get the project started.
- Open http://localhost:3000 (or the address shown in your console) in your web browser to view the app.
