Todo App Part 3 in React JS + Vite

In the previous parts of this series, we have built a simple Todo application using React JS and Vite. In this part, we will focus on deploying our Todo app to Vercel and integrating Firebase for data storage.

Vercel Deployment

Vercel is a cloud platform for static hosting and Serverless Functions. It’s a great option for deploying frontend applications with ease. To deploy our Todo app to Vercel, we first need to build our application for production using Vite. We can do this by running the following command:

$ npm run build

This will generate a production-ready build of our application in the `dist` directory. We can then deploy this directory to Vercel using the Vercel CLI or by connecting our GitHub repository to Vercel for automatic deployments.

Firebase Integration

Now that our application is deployed to Vercel, we can focus on integrating Firebase for data storage. Firebase provides a set of tools and services for building and managing web and mobile applications. We can use Firebase’s Firestore to store our Todo items.

First, we need to create a new Firebase project and set up Firestore. Once we have our Firestore database set up, we can use the Firebase JavaScript SDK to interact with the database in our Todo app. We can install the Firebase SDK by running the following command:

$ npm install firebase

We can then use the Firebase SDK to perform CRUD operations on our Todo items. For example, to add a new Todo item to Firestore, we can use the following code:

// Initialize Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Add a new Todo item to Firestore
const db = firebase.firestore();
db.collection("todos").add({
  text: "Example Todo",
  completed: false
})
  .then((docRef) => {
    console.log("Todo added with ID: ", docRef.id);
  })
  .catch((error) => {
    console.error("Error adding Todo: ", error);
});

With Firebase integrated into our Todo app, we can now store and retrieve Todo items from the Firestore database.

Conclusion

In this part of the series, we have successfully deployed our Todo app to Vercel and integrated Firebase for data storage. Our Todo app is now live and using Firestore to store and manage Todo items.

Next, we can further enhance our Todo app with features like user authentication, real-time updates, and more. Stay tuned for the next part of this series!