niclaszll / reagier

Social network built with React, Redux and Firebase

Reagier - React Social Network

Overview

The foundation of the frontend for this application are React and Redux together with Material UI as the UI framework.

Firebase is used as a flexible and scalable backend. Cloud functions serve as a REST interface, which provides access to user authentication, storage and the database.

---

Installation

Firebase Backend

1. Clone this repository
2. Go to Firebase directory and do npm install
3. Create a new Firebase project
4. Edit .firebaserc and config.js to match your Firebase config (How to download Firebase config file)
5. Deploy to Firebase via Firebase CLI with firebase deploy

Should problems occur, a local project can alternatively be initialized via Firebase CLI first. Then simply insert the folders handlers and util, as well as the index.js and package.json. More info in the Firebase CLI Docs.

Frontend

1. Go to Frontend directory and do npm install
2. Go to package.json and change proxy to your Firebase API endpoint
3. Go to App.js and change axios.defaults.baseURL to your Firebase API endpoint
4. Start local server via npm start. A browser window pointing to http://localhost:3000/ should automatically open.
5. Done :)

---

Current Features

• Create, like and comment on posts
• Personal user profile consisting of user name, picture, bio, location and website
• Notifications if someone liked or commented on your post

Screenshots

Expand a post to see and create comments

Edit your user profile

Notifications

Login Screen

While data is fetched a loading skeleton is shown instead of an empty page

---

Acknowledgement

A big part of this project is based on the Full Stack React & Firebase series by Classed/Hidjou. If you are interested in different tutorials in the area of web, please have a look at his channel!