Facebook-clone

Table of Contents

• About the Project
  • Built With
  • Features
  • Roadmap
• Getting Started
  • Prerequisites
  • Installation
  • Run
• License

About The Project

A friend of mine gave me a challenge, "let's see who will make the best facebook clone in one weeks." Of course I accepted the challenge. So this is my MVP Facebook-Clone made in approximately one week.

The Project was fun to do and made me combine my previous knowledge about image uploading, APIs, websocket and react into a working project. Am I proud of my end product? Yes, I am. ...Well not so proud about all the design, but I'm overall happy about how it turned out.

What I learned

• React's new useState and useHooks makes it faster and much more pleasant to make components.
• CSS is still hard, Bootstrap saves my day everytime, but I have to practice UI-design
• Small components makes it easy to reuse, but too small components makes it hard to integrate logic.
• Streaming data from user to database through sharp image processor is still hard, but I'm getting the hang of it.
• NodeJS is still treating me good, but I should make my next project in .net Core to expand my horizon.

Built With

• React - Starting to love React now <3
• React-Router
• React-Bootstrap - Got to make it kinda pretty
• Node - So fast to build backends, and used it for a long time
• Express - REST API
• Socket.io - Live chat messages
• MariaDB - For all relational text data
• MongoDB - To emulate a s3 bucket or similar, used for images. I chosed to save in database instead of on filesystem because I think that is more realistic in for future products, where you need backups and or saves the file in Azure Bucket or s3 storage or whatever those services are called.

Features

• Real time chat with socket.io. With annoying popup chat when friends message you.

• Posts with multiple images

• Liking, adding friends, multiple chat windows etc.

• Custom profile picture

• Images are processed with sharpjs to make large, medium and small copies in mongodb gridFsBucket

• Dedicated space to ads, have to make the investors happy.

• Passwords are encrypted with bcrypt of course.

roadmap

Things that I will add if I decide to spend more time on this:

• Group messages
• Friend requests, now the friend requests are automatically added
• Automatically open chat window when a friend sends message to you
• Notify user on new posts, likes, comments
• Comments on posts, needs front-end

Getting Started

Prerequisites

• NodeJS
• MariaDB or similar sql database
• MongoDB for storing images

Installation

1. Clone the repo

git clone https://github.com/mathiash98/facebook-clone.git

3. Install NPM packages

cd ./node-backend
npm install
cd ..
cd ./react-client
npm install

4. Edit config.js to suit you example:

module.exports = {
    db: {
        mariadb: {
            host: '127.0.0.1',
            user: 'root',
            password: '',
            database: 'facebook-clone'
        },
        mongodb: {
            uri: 'mongodb://localhost:27017',
            dbName: 'facebook-clone'
        }
    },
    jwt: {
        // used for encrypting and decoding the jwt-tokens,
        // make it a long an difficult string
        secret: 'Sup3rDup3rS3cr3tP@ssw0rdF0rJWTTôk£nAuthênticãtiõns'
    },
    port: {
        development: 8888
    }
};

5. Run ./facebook-clone.sql in your sql database to setup tables.
6. Procceed to Run

Run

This is for development

1. Start mongodb and mariadb
2. start node-backend and react-client

cd ./node-backend
nodemon index

cd ./react-client
npm start

3. Make some users, search for the users you made, add them as friend and start chatting and posting.

Extras

Diagram for MariaDB

License

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