Social Ape (demo)
This was a fun app I wrote to teach people how to combine React, Firebase, Redux and Material-UI to create a full social media app (Watch me type it on Youtube )
Visit demo - Server code - Client code
(You can login as [email protected]:123456)
Goal
As a social media app, Social Ape aims to connect users together by allowing them to post their thoughts as 'screams'
The app should allow users to interact with each other and do the following:
- Register and Login on the website.
- Create and delete posts.
- View, like and comment on posts.
- Create and edit a profile with details and profile image.
- Receive notifications on activity related to one's posts.
- View posts by a user of choice.
Method
With there being many interactions where the user edits the content on app, the app had to be designed to be interactive and instantly reflect these changes. So it had to be a dynamic SPA.
The app needs a database to store user information and posts and all related data and meta data.
Although using Firebase as a backend might not be the optimal solution for this particular app, the idea behind this series is to teach people how to use Firebase so it was used as a backend.
These are the functionalities and approaches used to implement them:
- A REST API for the client app to interface with the backend, using Google cloud functions.
- Database for storing all related data, using Firestore document based database.
- A UI library for styling the app and making it responsive with minimal CSS, Matarial-UI (a fantastic React integration of Material Design)
- A state management library for managing application wide state on the React client app, using Redux + react-redux
- A hosting solution for deploying and hosting the app, using Firebase hosting
