oaksprout / reddit-clone-2

Reddit-Clone-2

Recreating a less polished version of Reddit using React and Redux as the client side and Firebase Firestore for the backend. Bulma is used to style the pages.

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Resources
• Status
• Inspiration
• License
• Contact

General info

Inspired by The Coding Garden's YouTube code along. However, the video used Vue/Vuex, while I was more inspired to create the clone with React/Redux. The application uses Firebase Firestore methods to interact with the backend. The client and store is created with my own React/Redux Boilerplate with create-react-app as the base.

Screenshots

Technologies

• Node - version 12.3.1
• React - version 16.13.1
• Sass - version 1.26.5
• firebase - version 7.23.0
• date-fns - version 2.16.1
• bulma - version 0.9.1

Setup

1. Clone the repo

git clone https://github.com/drregg6/reddit-clone-2.git

2. Install NPM packages

npm install

3. Set up a Firebase/Firestore

Features

• Generate Vue App
• Create Firebase Project
• 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 a few subreddits in Firestore
  • philadelphia
  • 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 Comments
  • Edit User
• Edit Post
• Edit 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

Resources

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

Status

Project is: in progress

Inspiration

The project is a inspired by The Coding Garden

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Dave Regg - @daveregg - [e-mail]

Project Link: Dave Regg's Personal Reddit