This repo contains a barebones Facebook Messenger clone, implemented with a React-Firebase tech stack. The project was built for use by Texas Convergent as a part of our curriculum to show new developers what is possible with React and Firebase.
Make sure you have the following prerequisites on your computer:
- Git
- NodeJS installation
- Javascript Package Manager
- NPM (comes with NodeJS)
- Yarn
Using your terminal of choice, navigate to the folder you want to put this project folder in. Then run:
In the current working directory, you should see a folder called convergent-react-firebase-demo with all of the code files.
To set up the Firebase stack in this project, you will need to create a Firebase project in the google console.
- Navigate to the firebase console. Using your google account of choice, click "create project".
- Choose an ID for your project. This ID is not front-facing, so it can be anything you want. Then, click "continue".
-
Choose whether you want to enable or disable Google Analytics. Analytics is optional, and this project shouldn't be used in a production setting. I recommend disabling it, but for future production Firebase projects, consider enabling it.
-
On the dashboard homepage, you'll be greeted with buttons to add an app to your project. Click the third button with the </> icon to set up a Javascript web app.
-
Enter a nickname for the web app. This nickname isn't front-facing so you can put whatever here.
-
After putting your app name, you'll be greeted with a code example containing your firebase config object. Make note of the JSON - this will be used in the react project. (You can always come back to the config object through the project settings page). After making note, click "continue to console".
- With you App created, you'll need to enable the Firebase services used by the front-end. In the sidebar of the project dashboard, click Authentication under the Build section. On the authentication dashboard, click Get Started.
- In the sidebar , click Firestore Database under the Build section. On the firestore dashboard, click Get Started.
- In the sidebar , click Storage under the Build section. On the storage dashboard, click Get Started.
If you want to get the user search functionality working, you will need to create an algolia account. Go to algolia.com, create an account, and follow the instructions to create an index. From there, you will need to make note of your API key, Search Key, and App ID.
To get the rest of the React stack set up, read the README in the react folder.
To set up the project's cloud functions, read the README in the functions folder.
To get a better understanding of the project, you can view the slide deck detailing the project's component, and you can study the source typescript files within both client and functions folders.
Here are general resources to get you up to speed in terms of Firebase and React.
- Codecademy's JS Rundown
- Codecademy's React Course
- Firebase Web Intro Codelab - Implement Chat Client
- freeCodeCamp - To-Do Application With React/Firebase
- freeCodeCamp - Full Stack React / Firebase Social Media App (WARNING: Very long YouTube video)
Finally, here's a slide deck that goes over the structure of the app.
- Add support for Group Conversations
- Create front-end notifications on new message send
- Mark unread conversations in the ConversationList component
- Add support for other forms of media for each message
- Add other authentication methods