Build & Deploy a Geocoding Map App With Vue 3, Express & Tailwind CSS

What is covered:
✔️ simple express server to proxy API
✔️ spa with Vue 3 using composition API
✔️ deploying vue 3 application with express to production
-----------------------------------------------------------------------------------------------------
Join my channel to support me to continue doing what I love!
-----------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
Timestamps:
0:00 introduction
2:15 project requirements
4:28 create simple express server
11:01 create express route
15:51 add a parameter to express route
22:21 adding query strings to express route
26:32 using the express router
30:19 creating vue 3 project
35:23 add tailwind and other dependencies
50:35 get users location
59:08 plotting user location on map
1:06:11 handling geolocation errors
1:18:27 toggle tracking location
1:31:12 making search request's
1:42:52 add lazy search to input
1:46:58 output results from api
2:05:00 display selected results
2:13:33 getting our app ready for deployment
2:18:14 deploy to heroku
-------------------------------------------------------------------------------------------------------
#vue #vue3 #vue3compositionapi
Current Subscribers: 5,880

[JohnKomarnicki]

Hope you enjoy the first video of the year. One small thing we did not cover is error handling on the FE for errors on the request to the API. So if you want to enhance this project try adding some error handling when we get to the portion! I'll also add this to the repo if you want to check out how i handled this. 1:31:40

[Jpk]

@John komarnicki good job under two hours and the project looks so good.

[AntNZ]

I hit an error 00:39:00 with tailwind configuration, Postcss version 8 required (regardless of the version install) - I found that this is the way to config tailwind to resolve this compiler error:

run npm uninstall autoprefixer postcss tailwindcss
and then run
vue add tailwind - selecting minimal option

[redouanebenbiga]

i m a laravel developper but i start loving vuejs because of your videos, so start learning it from your channel keep like that, my only question is mapbox forward geocoding free?? because i stuck when axios give 401 error i tried everything 21:35

[abdul_developer]

We need more videos like this using vue 3

[mustafa_sakalli]

cool tutorial. But I couldn't understand what happened between 50:00 - 1:05:00, i.e navigator.geolocaation is leaflet method? I'm completely lost there

[wasd]

thx for the guide
about input focus
you can use @focus="showSearchData = true" @blur="showSearchData = false"
and I don't think those need to live outside of the component, so no emit necessary

[eneomaos]

Thank you! You saved me a lot of precious time!

[norbertlipinski]

You are making really good content! Keep going! I have one concern though. What you actually did you created server side and client side on two different ports. Due to that, in case of app deployment on Heroku or wherever, then only your server would work since Heroku will run your server index.js file. In the same time there will be no possibility to see front end you have built since server is not giving the html within the response. With your solution you would need to run two separate hosting servers, one for back end server and one for front end application and I dont think this is the way how it is handled in production apps but maybe I am mistaken. Therefore, my suggestion for you, as a subscriber of your channel, is to make a video about making and deploying full stack app so user at the end can both display front end and receive some server response using the same one domain address. Still, I really enjoy your videos and I hope to see more your videos with Vue & Node & Tailwind also with more advanced level.

[I-AMDAILY]

Such a cool project, can you do another one that's similar with MEVN?

[danr.]

Nicely done! Your videos are a great help.

[pedroelton]

21:10 my output looks like this: APP has started on port: 3000
�`I.��(��\�Q�����օQ�v.
�gS<+3

But much longer... Does anybody know what happened? The code is the same. The API changed something?

[Mehdi-sztq]

You are making really good content! Keep going!

[edoardo]

I was going through the code and I have a couple of questions:
On routes declaration which and how are handled the CRUD requests?
also how should the system respond to routes that are requested but not declared?

[mateuszburasinski]

Great work Sir! Pozdrowienia z Polski!

[terrificsoprano]

THIS IS AWESOME CONTENT !!!! THANK YOU..

[xemu]

Question, why do you choose for different kind off css frameworks in your videos rather then vuetify?

[hassaantahir]

This is 👍🎊
Next please make a "software House website" single or multiple page plZzz

[edoardo]

when I run the terminal it says: app has started on port: ${PORT} instead of 3000 (I'm still in the beginning), and I each code is the same as the tutorial. Also in postman it says "Cloud Agent Error: Can not send requests to localhost. Select a different agent." finally another error encountered is: "Parsing error: No Babel config file detected". I checked for hours in many websites and blogs but any solution I tried doesn't work for me. Any suggestion please?

[zulfikarahmad]

Thanks for the tutorial bro, next please make "auth + protected route vue 3 with express & jwt"