Sveltekit Fullstack Todo Crud
This is a SvelteKit full stack app demo that implements Firestore and Firebase Auth. It shows the best practices for svelte stores, state management, authentication, routes, styling, responsive web app development and CRUD operations.
SvelteKit To-Do App
This is a demonstration of a To-Do App built with SvelteKit, incorporating Svelte Store for state management, Firebase Auth for user authentication using email and password, Cloud Firestore for storing individual to-do lists for each user, Vercel for deploying the web application, and protected routes for enhanced security.
š Open live Demo
Tech Stack
- SvelteKit
- Svelte Store
- Firebase Auth
- Cloud Firestore
- Google Fonts
- Font Awesome
- Vercel
Features
- User authentication using Firebase Auth (email and password)
- CRUD operations for managing to-do lists
- Real-time data synchronization with Cloud Firestore
- Responsive design for a seamless user experience on various devices
Screenshots
Installation
First, clone the project and open it with Visual Studio Code:
git clone https://github.com/javigong/sveltekit-fullstack-todo-crud.git
cd sveltekit-fullstack-todo-crud
code .
Then, create a .env.local file in the root of the project and configure the following environment variables:
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id
Finally, install the npm dependencies and run the application:
npm install
npm run dev
Now the application is running on http://localhost:5173/ š
Deployment details
SvelteKit To-Do App deployed using Vercel:
