You have some new innovative, fun idea of social media.You want a secure, smart, fast and scalable app.This is how you can achieve this on limited time and budget. This article based on personal experience and hours of research. It will mostly contain code examples. — scalable servers and extra tools — real time database — security and performance — emails Ingredients: Node.js GCP Firebase Cloudflare Mailgun We will use one App engine and split it into 3 microservices1st microservice — Backend server2nd microservice — Cron server3rd microservice — Web server I will use for the client side.The Backend solutions are good for other client options. React Before you write the first line of code You need to set your goals for the first release.It’s important to decide what is necessary for the first version and what you can add after. Choose a name for your social media app.Check if the domain is available. You can use Google domains or GoDaddy for this. Open accounts and create new project at GCP, Firebase Cloudflare and Mailgun. Open developers account on Facebook and Instagram to enable login options. (Make sure you are sending a review request, it might take some time). Backend API server Goals: Client side friendlySecurityAuto scalingEasy to maintainKeep logsReal time reports on bugs Yes, you can achieve those goals with a traditional RESTful API server, but, I would like to show you another alternative which will save you a lot of time. We are going to use , Firebase real-time database and Google App engine to create that. Firebase queue This will be my folders hierarchy. 📁config📁keys➥serviceAccountKey.jsonconfiguration.jsonindex.js 📁services📁firebase➥index.js📁image_manipulation➥index.js📁notifications➥index.js 📁utils➥index.js app.jsapp.yamlpackage.json Node dependencies: "fcm-node": "^1.0.15","firebase": "^5.4.0","firebase-admin": "^6.0.0","firebase-queue": "^1.6.1","mailgun-js": "^0.20.0" Image manipulation dependencies: "@google-cloud/storage": "^1.5.1","@google-cloud/vision": "^0.14.0","image-size": "^0.6.2","imagemin": "^5.3.1","imagemin-giflossy": "^5.1.10","imagemin-jpeg-recompress": "^5.1.0","sharp": "^0.18.4","smartcrop": "^1.1.1","smartcrop-sharp": "^1.0.5" Let's start with the config/configuration.json: {"firebase": {"projectId": "YOUT_PROJECT_ID","url": "YOUT_PROJECT_DB_URL","serviceAccount": "config/keys/serviceAccountKey.json"},"mailgun": {"apiKey": "YOUT_MAILGUN_KEY","domain": "YOUT_MAILGUN_DOMAIN"},"app": { config/index.js (note that there is configuration.dev.json) config = process.env.NODE_ENV === 'production'? require('config/configuration.json'): require('config/configuration.dev.json'); const module.exports = config; app.yaml : api : nodejs : flex : : prod service runtime env env_variables NODE_ENV services/firebase/index.js admin = require('firebase-admin'); config = require('config'); const const admin.initializeApp({credential: admin.credential.cert(require(config.firebase.serviceAccount)),databaseURL: config.firebase.url}); db = admin.firestore(); tasksDB = admin.database(); tasksQueue = tasksDB.ref('tasks_queue/'); const const const db.settings({ timestampsInSnapshots: }); true // Here we will write our db functions module.exports = {tasksQueue Now we can start writing our server ( app.js) Personally, I like to set my require() paths like this: (you can read more about it ) here process.env.NODE_PATH = __dirname;require('module'). ._initPaths(); Module We will start with the setup and add three simple ‘tasks’ and . saveUser , updateUser likePost function will save the incoming task in our log table at Firebase. addLogs will email the task data with the error message in case of an error. mailError And will listen to the table on Firebases real time DB and whenever a new task written in that table it will process the task according to its type. If there are more tasks than he can handle App engine will autoscale. processTask tasks_queue As you can see we need to add some function to our Firebase endpoint file setData(ref, data){ ( ref === 'string') db.doc(ref).set(data); ref.set(data);} function if typeof return return updateData(ref, data){ ( ref === 'string') db.doc(ref).update(data); ref.update(data) function if typeof return return ateLogs(date, taskType, time, task) {tasksDB.ref(`logs/${date}/${taskType}/${time}/task`).set(task) likePost(postId){ Promise((resolve, reject) => { postRef = db.collection('posts').doc(postId); db.runTransaction((transaction) => { transaction.get(postRef).then((postDoc) => { (!postDoc.exists) resolve(); newLikes = postDoc.data().likes + 1;transaction.update(postRef, { likes: newLikes });});}).then(resolve).catch(reject);});} ion return new const return return if const // Don't forget to add them to the module exports This is how the tasks table will look like: Another thing we may want to add to our server is image manipulation. Let's say, a user uploaded a photo to our fun social media, We will need to compress that image, Maybe alert us if it is offensive and we may even want to create a smart thumbnail for it. We will add the task to handle that request Now, lets have a look at services/image_manipulation/index.js (I will not get into details on this one) Notifications Our most valuable retention tool. We need to inform the users if, for example, someone like their post. We want to be able to send messages and notifications to users across platforms, Android, iOS, and the web. A good thing will be also to save it in our DB so we can display all of the notification inside the app. Let’s change our like_post function likePost(data = {}) { Promise((resolve, reject) => { { user, postId, postOwner, } = data;Promise.all([db.likePost(postId),db.newNotification('like', user, postOwner),]).then(resolve).catch(reject);});} function return new const And add to our Firebase endpoint file newNotification fcm = require('services/notifications'); notificationsText = require('texts/en/notifications'); const const newNotification(tag, from, to) { Promise((resolve, reject) => { notification = notificationsText(tag, from, to); (to.deviceToken) fcm.sendNativeNotification(notification, deviceToken); newNotificationRef = db.collection(`messages/${to.uid}/notification`).doc();newNotificationRef.set(notification).then(resolve).catch(reject);});} function return new const if const services/notifications/index.js So there you have it, API server that does exactly what you need to bootstrap (Well, you will still need to write functions that will handle your client tasks). rules can be easily set through the rules tab on the console. You can read more about it . Security Firebase here Cron server If we need some schedule functions to run in the background. This is how we will achieve that: In this example our schedule function will like a random post The folder hierarchy 📁bin➥www 📁config📁keys➥serviceAccountKey.jsonconfiguration.jsonindex. 📁cron_jobs➥ index.jsrandom_like.js 📁services📁firebase➥index.js 📁utils➥index.js app.jsapp.yamlcron.yamlpackage.json Node dependencies: "express": "^4.16.3","firebase": "^5.4.0","firebase-admin": "^6.0.0" The configurations remain the same as the API server. app.yaml : cron : nodejs : flex : : production service runtime env env_variables NODE_ENV cron.yaml :- : Like a Random Post : /like_random_post : every 10 minutes : Etc/GMT : cron cron description url schedule timezone target app.js process.env.NODE_PATH = __dirname;require('module'). ._initPaths(); Module express = require('express'); app = express();app.enable('trust proxy'); const const app.use('/', require('cron_jobs')); app.use((err, req, res, next) => res.status(500).send(err.message || 'Something broke!')); module.exports = app; cron_jobs/inde express = require('express'); randomLike = require('cron_jobs/random_like'); router = express.Router(); t const const // [START routing]router.get('/like_random_post', randomLike);// [END routing] module.exports = router; cron_jobs/random_like.js At the Firebase endpoint file // addTask(type, data){ tasksDB.ref('tasks_queue/tasks').push({ type, data });} function return As you can see at the cron.yaml file, a GET request will be fired every 10 minutes to the /like_random_post endpoint (target: cron microservice). The function gets a random post from the DB and add a ‘like_post’ task to our tasks queue. That’s conclude the first part of our story, by now you should have a working server that can be use for any type of app, native or web. Part 2 — Frontend Web server This server will serve pages to the users. Basically, we will need only one route since we will handle all the routing with React-router. However, when our users will share their posts to others social media, we will want it to be attractive. Rich previews are a great tool to achieve that. WebApp In order to support Rich preview we will need to adjust our html file for every post. I will add an example code here of how it can be done easily, this is just an example there are others ways to do it. Folder hierarchy: 📁bin➥www 📁config📁keys➥serviceAccountKey.jsonconfiguration.jsonindex. 📁routes➥ index.jspost.js 📁services📁firebase➥index.js 📁utils➥index.js 📁views➥index.js➥html_template.js app.jsapp.yamlpackage.json app.yaml : nodejs : flex : : production runtime env env_variables NODE_ENV app.js As you can see, we will server our files zipped for better performance. routes/index.js 'use strict'; express = require('express'); router = express.Router(); htmlTemplate = require('../views'); const const const // [START post]router.get('/post/*', require('./post'));// [END post] // [START app]router.get('/*', (req, res) => {// console.log(req); res.send(htmlTemplate())});// [END app] return module.exports = router; routes/post.js html_template.js Web App There are plenty of great ‘how to build a React web app’ articles out there. Here I will focus on some social media web app challenges. Goals: FeedLive ListenersImages uploadsRich previews Let’s start with the root of our WebApp pushNotification is our the way to communicate with the users of the app, which looks something like this: For that we will use ‘toastr js’. toastr 'toastr'; import from pushNotification(message, type = 'error') {toastr.options.positionClass = 'toast-bottom-full-width';toastr.options.showMethod = 'slideDown';toastr.options.hideMethod = 'slideUp';toastr.options.hideDuration = 300;toastr.options.newestOnTop = ;toastr.remove(); (type) { 'info':toastr.info(message); ; 'error':toastr.error(message); ; 'success':toastr.success(message); ; 'warning':toastr.warning(message); ; :toastr.error(message); ;}} export default function false switch case break case break case break case break default break Firebase end-point file: import firebase from 'firebase/app';import 'firebase/auth';import 'firebase/storage';import 'firebase/firestore';import 'firebase/database';import config from 'config'; class Firebase { static serverTimestamp() {return firebase.firestore.FieldValue.serverTimestamp();} constructor() {firebase.initializeApp({apiKey: config.firebase.api_key,authDomain: config.firebase.domain,projectId: config.firebase.project_id,storageBucket: config.firebase.bucket,});this.auth = firebase.auth();this.db = firebase.firestore();this.db.settings({ timestampsInSnapshots: true }); .tasksDB = firebase.database();this.tasks = .tasksDB.ref('tasks_queue/tasks');this.storage = firebase.storage();} this this } export default Firebase; Feed 📁feed📁view➥feed_item.js➥index.js➥index.js Hopefully we will need to handle a lot of posts. In order to manage it correctly, we need: 1. Paginate data with query cursors 2. Highly efficient infinite scrollable container 3. On-view post updates listener “Controller”: For infinite scrollable container we will use ‘react-infinite’ “View”: For the post item we will want to add some listeners. For example, likes — counter should be constantly updated in real time. However, setting listeners to the huge amount of posts can hit our webapp performance significantly, in order to make it efficient we will listen to changes only the posts that are in-view and use ‘react-visibility-sensor’ to do that. Let’s add some functions to our Firebase end-point file getRecentPosts(startAfter = ) { postRef = startAfter? .db.collection('posts').orderBy('created_at', 'desc').startAfter(startAfter.created_at).limit(config.app.feed_paging): .db.collection('posts').orderBy('created_at', 'desc').limit(config.app.feed_paging); postRef.get().then(snapshot => snapshot.docs.map(doc => doc.data()));} null const this this return postChangesListener(postId, callback) { .db.collection('posts').doc(postId).onSnapshot((doc) => { (callback) callback(doc.data());});} return this if addTask(type, data) {return this.tasks.push({ type, ...data });} Image upload We want our users to be able to upload photos to our web app, we want to create thumbnails for those photos, we don’t want them to wait a long time for it to finish. In order to accomplish that we will need to lower the photo size (for faster upload and to create the thumbnail). UploadPhoto Component: When we resize a photo we need to take its exif data into account, otherwise we may encounter orientation issues. ImageTools: Login example Final Firebase end-point file Note that the Firestore data manipulation doesn’t happen on the client side, but instead we add tasks to our server through Firebase RD. This is only for security reasons. I am using webpack 4 and this is my webpack.config.js, if you need code splitting and gzip you can use it as an example. After you finish writing your first version and deploy everything to GCP you can now add your App Engine records to your Cloudflare DNS settings and get a free performance and security boost including SSL, CDN and much more. Here’s my final tip for building your new fun social media: for everything. That is how you would know what your users are doing. It will help you improve and invest your time on the things that matter to them. include analytics I would love to get your comments and suggestions. If you have any questions, feel free to contact me at my . Thank you for reading! Spread the love :) linkedin
