Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzle, Tailwind, DaisyUI, MapLibre

Video Description

In this video, CJ builds a Full Stack application with Nuxt / Vue / TypeScript that allows users to keep track of the places they have visited and view them on a map. View the LIVE App | https://nuxt-travel-log.vercel.app/ View the Code | https://github.com/w3cj/nuxt-travel-log Project Board Creator Tool | https://github.com/w3cj/travel-log-github-project-creator Example Project Board with Issues | https://github.com/users/w3cj/projects/11/views/1 Links / Resources | https://gist.github.com/w3cj/3d331e23c17df1dbeaa55342f230f3ee Vue Crash Course | https://www.youtube.com/watch?v=5oKpoqmUj64 Nuxt Crash Course | https://www.youtube.com/watch?v=RhZZ0whiuT8 00:00:00 intro / overview 00:07:27 stack / architecture overview 00:12:18 github project board setup 00:15:50 project setup 00:17:52 github auto deploy with vercel 00:19:21 eslint / editor setup 00:21:10 antfu eslint-config 00:25:57 pre-commit hooks lint 00:30:30 git feature branch worflow 00:32:12 lint github action 00:38:48 tailwind setup 00:41:25 daisy ui setup 00:44:38 nuxt/icon setup 00:49:25 landing page 00:57:44 theme toggle / color mode 01:05:14 typesafe env with zod 01:11:54 db setup 01:13:21 drizzle setup 01:18:00 turso local development 01:22:25 db schema 01:29:42 set environment variables on vercel and github actions 01:31:46 auth setup with better-auth 01:40:00 github oauth setup 01:47:56 create auth store with pinia 01:52:31 auth error page 01:56:31 github oauth production configuration 01:58:08 turso cloud setup 01:58:53 run db migrations on production 02:01:24 auth status display 02:08:02 sign out page 02:12:48 protected routes redirect 02:16:25 SSR Auth Session 02:25:41 create dashboard sidebar 02:36:38 collapsible sidebar 02:47:16 persist sidebar collapse in localStorage 02:50:05 dashboard nested routes 02:52:05 create location form 02:57:20 validate form with vee-validate 02:58:53 drizzle zod validation schema 03:03:35 handle location form submit / show validation errors 03:07:59 re-factor form field component 03:14:53 show confirmation if unsaved changes in form 03:18:01 create location API route 03:19:21 validate location before insert 03:21:14 display server errors on form 03:30:06 loading state during create location 03:33:11 insert location into db 03:34:19 access logged in user in API route 03:37:59 insert location into db with userId 03:39:08 redirect after creating new location 03:41:12 csrf protection 03:46:54 validate unique location slug and name 03:50:22 generating slug during location insert 03:57:19 unique location name per user database constraint 03:59:35 oops - reset entire db / migrations 04:01:41 show unique location name error 04:04:10 consolidate location table db queries 04:12:23 show form errors in production 04:13:29 list locations in dashboard 04:16:41 create authenticated event handler util 04:22:46 list locations API route 04:24:17 list locations in dashboard 04:34:21 list locations in sidebar 04:52:06 map setup 04:54:50 set up nuxt-maplibre 04:59:39 map styles setup 05:05:55 list locations on map 05:17:09 center map on location bounds 05:29:53 map popups 05:32:48 override maplibre popup styles 05:37:20 set selected location on hover 05:48:22 zoom to map point on hover 05:56:27 drag marker to set location coordinates 06:10:15 center map on draggable marker 06:15:15 double click map to set location 06:20:30 places search api options 06:24:25 place search 06:25:31 view location page 06:29:59 typecheck npm script 06:31:45 view location page continued 06:41:25 location logs relation / query 06:46:59 view location by map marker 06:59:19 location specific sidebar links 07:05:17 refactor current location into store 07:11:54 location specific sidebar continued 07:19:20 update location details form 07:36:17 fix current location SSR 07:39:11 update location details form continued 07:42:39 fixing data loading issues 07:47:31 update location details form continued 07:48:46 update location details api 08:02:28 delete locations 08:12:45 delete location api 08:18:35 create location log form 08:47:38 create location log api 08:55:03 list location logs 09:08:03 list location logs in sidebar and on map 09:16:49 view location log 09:30:29 edit location log 09:41:45 delete location log 09:48:19 minio local s3 storage setup 10:00:52 s3 image upload flows 10:04:38 select upload image 10:12:07 resize / optimize image on client 10:17:20 create image checksum on client 10:19:23 create pre-signed post url on server 10:32:25 get pre-signed post url on client 10:38:40 upload image to s3 from client 10:41:59 insert image metadata into db 10:52:54 list images 11:08:14 s3 production setup 11:14:59 delete images 11:25:33 final fixes 11:35:19 nuxt sentry setup 11:39:41 final deployment 11:40:30 thanks! View the place search API hidden chapter here: https://www.youtube.com/watch?v=M2iT6DuITLI Brought to you by Sentry.io