Project
Search Places
Webpack
Babel
SASS
Typescript
Foursquare API
Mapbox Map
Frontend Web Developer
Duration
3 weeks
Medium
Introduction
To enhance your skills in web development, you will have the opportunity to build a Search Places App using modern web development tools. Throughout this project, you will gain knowledge and hands-on experience with various tools such as Webpack, Babel, Sass, TypeScript, Foursquare API, and Mapbox Map. These technologies will equip you with the necessary skills to develop a real-world application and deepen your understanding of the web development ecosystem.
Prerequisites
- Practical knowledge of HTML & CSS and Javascript
- Basics of Modern Frontend Tools
Requirements
Please refer to the above video for a visual walkthrough of the project requirements.
Features
- Create a Webpack dev environment for SASS styling and Typescript.
- Add Navbar with Search Places Form.
- Use Foursquare Places API to fetch places in a city.
- Add Sidenav to show the list of venues.
- Add Mapbox Map.
- Show places using markers.
- Show place details with an Image and complete address in the marker popup.
- When the popup opens, highlight and scroll the active place in the Sidenav.
- Bundle code to deploy it to production.
General
- Responsive UI
- Error Handling and Notification.
Roadmap
Below is the weekly breakdown of how to approach the project. This is how an actual developer would approach and build the project.
Set up development workflow and complete Navbar with the search form.
Tasks
- Create a Webpack dev environment for SASS styling and Typescript.
- Add Navbar with Search Places Form.
Fetch venues and show them in the Sidenav.
Tasks
- Use Foursquare Places API to fetch places in a city.
- Add Sidenav to show the list of venues.
Show venues on Mapbox using a marker and their detail.
Tasks
- Add Mapbox Map.
- Show venues using markers.
- Display Place information when clicking on Marker.
- Sync Marker and active venue on the Sidenav.
- Bundle code to deploy it to production.
Helpful Resources
- Use Mapbox for Maps.
- Use Foursquare Places API to get place data.
Contributor(s)
John Doe
Founder and Fullstack Developer at freeCodeProject.org
Created this project.