Full Stack Reddit Clone with Firebase Firestore, Vue.js/Vuex, Bulma

• Generate Vue App
• Create Firebase Project
  • STRICT RULES
• Add Firebase Auth
  • https://firebase.google.com/docs/auth/web/google-signin
  • https://firebase.google.com/docs/auth/web/manage-users
    • Save user on login
      • Update Rules
• Add VuexFire
  • https://github.com/posva/vuexfire/tree/firestore
• Add a few subreddits in Firestore
  • general
  • javascript
  • learn-programming
  • pics
  • funny
• Show Subreddits on Home Page
• Show Single Subreddit
• New Post Form
  • Update Rules
• Display Posts on Subreddit Page
  • Types: Image/Text/Url

Extra

• Hide submit form if not logged in
• Show Usernames
• Show User Images
• Format Dates
• Fix card formatting
• Search/Filter Posts
• UpVote/DownVote Posts
  • Update Rules
  • Order by total score
  • Order by created
• Add comment to Post
  • Update Rules
• User Profile
  • Show Submitted Posts
  • Show UpVoted Posts
  • Show Comments
• Edit Post
• Edit Comment
• UpVote/DownVote Comment
• Reply to Comment
• Display Error Image if bad link/error
• Cloud Function Score Aggregator
  • https://firebase.google.com/docs/firestore/solutions/aggregation#solution_cloud_functions
• Delete Post
  • Cloud Function "Cascade Delete" comments
• Upload Images to Firebase storage

firebase setup

Permission settings

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    match /{document=**} {
      allow read: if true;
    }
    
    match /users/{user_id} {
    	allow write: if request.auth.uid == user_id;
    }
    
    match /posts/{post_id} {
    	allow write: if request.auth.uid == request.resource.data.user_id;
  }
 }
}

Resources

• https://angularfirebase.com/tag/firestore/