MojReddit

Moj Reddit is a reddit website clone made with React, Typescript and Firebase.
Live preview: https://mojreddit.com

Features

• Home feed and custom user feed
• Subreddits
• Sign in with email/password, Google or GitHub
• 3 types of posts:
  • Text
  • Image/video
  • Poll
• Upvote/downvote posts
• Post comments
• Inbox & chatting with other redditors
• Searching for posts
• Account and profile settings

Technology stack

Front-end:	Back-end:
React	NodeJS
	Express
Typescript	Typescript
Firebase Auth Firestore Storage React Firebase Hooks	Firebase Admin SDK
Axios	Algolia Search
React Router Dom	Node Cron
Material UI	DotEnv
FontAwesome icons
React Hot Toast
React Loading Skeleton
React Quill

How to run locally

0. Install NodeJS.
1. Clone both frontend and backend repositories.
2. Install dependencies in both folders.
   • Run npm install
3. Set up environment variables.
   • Back-end:

     File name	Description
     fake-reddit-backend/.env	Environment variables such as the client URL, port number, hostname, algolia api key, etc. See an example here.
     fake-reddit-backend/serviceAccountKey.json	Firebase Admin SDK configuration file. Read more here. See an example here

   • Front-end:

     File name	Description
     fake-reddit/src/utils/firebase/firebaseConfig.ts	Firebase configuration file containing the api key, auth domain, etc. Read more here. See an example here.
     fake-reddit/src/utils/misc/constants.ts	Various application constants. "SERVER_URL" is set to http://localhost:5000 by default. See an example here.

4. Start the server.
   • Navigate to the back-end folder and run npm start.
   • The console should say Server started at http://localhost:5000.
5. Start the client.
   • Navigate to the front-end folder and run npm start.
   • The console should say Compiled successfully! You can now view fake-reddit in the browser.

Things I would change if I were to start over

1. Have more consistent CSS styles.
   • Use Material UI components for everything.
   • Make it easy to add more themes later on (dark/light/system).
   • Make it responsive for mobile devices from the beginning.
2. Pay attention to accessibility.
3. Use a CDN instead of storing raw files in the Firebase Storage bucket.

TODO

• Add missing links above.
• Make it responsive and mobile friendly.
• Change post requirements to be same as the real reddit website.
• Fetch only last x comments, instead of fetching all of them.
• Fetch only last x messages, instead of fetching all of them.