Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Building Real-World Web Applications with Vue.js 3

You're reading from   Building Real-World Web Applications with Vue.js 3 Build a portfolio of Vue.js and TypeScript web applications to advance your career in web development

Arrow left icon
Product type Paperback
Published in Jan 2024
Publisher Packt
ISBN-13 9781837630394
Length 318 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Joran Quinten Joran Quinten
Author Profile Icon Joran Quinten
Joran Quinten
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Part 1: Getting Started with Vue.js Development
2. Chapter 1: Introduction to Vue.js FREE CHAPTER 3. Chapter 2: Creating a Todo List App 4. Chapter 3: Building a Local Weather App 5. Chapter 4: Creating the Marvel Explorer App 6. Part 2: Intermediate Projects
7. Chapter 5: Building a Recipe App with Vuetify 8. Chapter 6: Creating a Fitness Tracker with Data Visualization 9. Chapter 7: Building a Multiplatform Expense Tracker Using Quasar 10. Part 3: Advanced Applications
11. Chapter 8: Building an Interactive Quiz App 12. Chapter 9: Experimental Object Recognition with TensorFlow 13. Part 4: Wrapping Up
14. Chapter 10: Creating a Portfolio with Nuxt.js and Storyblok 15. Index 16. Other Books You May Enjoy

Setting up the database

After registering for a free account on Supabase (https://supabase.com/), you’ll end up in the dashboard to create a new project. Let’s use fitness-tracker as the name and choose a strong database password. For the region, pick one that is geographically close to you for better latency. We’ll stick with the free plan!

On the next page (Figure 6.2), you will see the project API keys:

Figure 6.2 – Overview of the project API keys

Figure 6.2 – Overview of the project API keys

We’ll store them in our .env file in the root of our project:

VITE_SUPABASE_URL=YOUR_SUPABASE_URLVITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Note that sharing keys like this via a client-side app always exposes them to the public. Luckily, Supabase has its own means of ensuring authentication while interacting with the database.

I’ve created a script that sets up the database with the table structure for our app. Via the dashboard and SQL editor, you...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime