3
2 Comments

Need suggestions on my Firebase and Vanilla JS web app

Hello everyone,
I need some suggestions on how to improve my simple doodle sharing website. Topics I need help on

  • what tech stack to use (I use simple HTML CSS javascript for frontend and firebase for backend including authentication)
  • is firebase enough for the backend?
  • it lets the authenticated user add posts. How Do I make it more secure?
  • How do I make it look elegant and responsive? ( I am familiar with React should I go ahead and use it?)
  • I use html5 canvas to let users draw. Are there other frameworks which work better to let users draw and save pictures?
  • How do I save pictures on firebase? (Right now I am saving base64 image url)
  • Can I let other users comment and like public posts?

------ ANY SUGGESTION REGARDING FIREBASE AND REACT IS HIGHLY APPRECIATED ( I AM FAMILIAR WITH FIREBASE BUT NOT AWARE OF ALL OF ITS FUNCTIONALITIES. I JUST DO NOT KNOW HOW TO TAKE THE NEXT STEP TO IMPROVE MY SITE) --------

Here's the link:
https://whiteboardarchive.web.app/

Thank you so much taking your time to read.

on December 13, 2020
  1. 2

    Hey, I use Firebase and React almost exclusively for most of my projects.

    Some issues to be aware of:

    • You won't have full text search (Firebase does not support this yet). You may integrate a third party like Algolia or set up Elasticsearch.
    • You can save images in Firebase Storage, and store the image url in the database using Firebase Database triggers, or if you're certain the images will not be larger than 1MB (Max document size for Firestore) you can save them directly in the database as base64
    • HTML Canvas is the best way to go for web based drawing.
    • You can set up Firebase Database Rules for your database so that only authenticated users can access data, and only their data.
    • Yes you can let users comment and like posts.

    A good source of tutorials especially for Firebase focused stuff is Jeff Delaney https://fireship.io/ , I do believe he has videos for a commenting and post liking system. You can also find videos for uploading images to Firebase Storage.

  2. 1

    I personally have been using gatsby with Firebase Authentication, I think gatsby could help you with style and functionality and was fairly easy to pair with firebase authentication and firestore for saving data. I made a post explaining how I integrated firebase with Gatsby you can check it out here.

    https://medium.com/swlh/adding-firebase-authentication-in-gatsby-with-a-little-typescript-magic-adf6ad1fbfb2