Knowledge center - social bookmarking website for developers, programmers or hobbyists.
LIVE: https://shrouded-sands-46900.herokuapp.com

Introduction

RefShare is an open source fullstack web application created for everyone who values order and harmony in their resources and for those who want to increase personal growth by looking for new content as guides, tutorials, articles or docs. RefShare is a perfect place for those who want to share their resources with others, while at the same time looking for new inspirations and want to extend the horizons of their competences.
If you have no idea where to get knowledge from, or would you like to ask experienced programmers for their opinions or to share your selected links with others? Be free to create an account and be part of the best social web bookmarking network!

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Before installing, download and install Node.js. It is required to have both, Node.js and NPM installed on your local machine. To verify it's installed correctly use command:

$ node -v && npm -v

Installing

First of all clone repo or download source code from master branch.

Then, open your favourite terminal, go to RefShare root folder and use npm install command:

$ npm install

That will install every dependencies listed in package.json file required to run local server. Then, go to /client folder and install all dependencies for client.

$ cd client && npm install

After these installations your source code is almost ready to run. Last thing to do is configure a database connection. RefShare is using Moongose to create Schemas, so you have to deliver MongoDB connection. For this purpose create a new file in /config folder named keys_dev.js. This file has to be created in following structure:

module.exports = {
  mongoURI: 'YOUR_MONGO_URI',
  secretOrKey: 'YOUR_SECRET_PHRASE'
};

Starting an application (developing mode)

After all setups you can now locally start your platform. Because RefShare is a MERN aplication, all used commands are npm scriptes so it is listed in package.json file and should be run in this file location.

• To start whole application (backend + frontend) use a command which will start server and client concurrently

$ npm run dev

• To start only server-side of application

$ npm start

• To start only server-side of application with nodemon wrapper, which will automatically restarting an application whenever you change a code.

$ npm run server

After starting server you should see a following message on your console:

Server running on port 5000
Mongo DB Connected

That means server is started on port 5000 and is connected to given database.
At this point you can test your server with any API REST client, like Postman or cURL.

Use /api/test URI to create simple request to test server connection

$ curl -X GET localhost:5000/api/test
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    28  100    28    0     0   1750      0 --:--:-- --:--:-- --:--:--  1750{"msg":"Server is running!"}

• If for any reason you want to run only client-side of application use

$ npm run client

Deployment (Heroku)

RefShare has support in deploying application to Heroku which is a cloud platform as a service (PaaS) supporting several programming languages.
Create your own account, install Heroku-CLI and run heroku app in CLI, next provide enviroment Config Vars in Heroku website, including MongoDB URI and secret phrase.

In package.json file there is a script "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client", which is used by Heroku. With this script Heroku automatically builds client application in way we want to. NPM_CONFIG_PRODUCTION=false flag is to tell Heroku to download all dev-dependencies for client app.

Used technologies

Backend

• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine
• ExpressJS - Node.js web application framework
• Mongoose ODM - Object modeling for node.js
• nodemon - Automatically restarting the node application when file changes
• Passport.js - Authentication middleware for Node.js
• passport-jwt - Strategy for authenticating with a JSON Web Token
• jsonwebtoken - An implementation of JSON Web Tokens
• body-parser - Node.js body parsing middleware
• bcrypt.js - Optimized bcrypt in JavaScript
• validator.js - A library of string validators and sanitizers
• express-sslify - Module enforces HTTPS connections

Frontend

• ReactJS - A JavaScript library for building user interfaces
• Redux + React-Redux - State container for JavaScript apps
• Create-React-App - best way to start building a new single-page application in React
• React Router - Declarative routing for React
• Redux-thunk - Redux middleware to write action creators that return a function instead of an action
• Redux-devtools-extension - provides power-ups for your Redux development workflow
• React-devtools - lets to inspect the React component hierarchy, including component props and state
• axios - Promise based HTTP client for the browser and node.js
• Material UI - React components that implement Google's Material Design
• react-facebook-login - A Facebook OAuth Sign-in / Log-in Component for React
• react-google-login - A Google OAuth Sign-in / Log-in Component for React
• jwt-decode - Library that helps decoding JWTs token which are Base64Url encoded
• classnames - A simple JavaScript utility for conditionally joining classNames together
• react-copy-to-clipboard - Copy to clipboard React component

Used practics

• As mentioned before, client-side was create using create-react-app package. This means that a lot of boilerplate was created by a script. In this way there is no need to configure things e.g. bundlers like Webpack or Babel loaders, plugins and module rules. To make possible for local client side to communicate with local backend use proxy in package.json file. Add proxy": "http://localhost:5000/, this tells Webpack development server to proxy API requests to API server, given that Express server is running on localhost:5000.

• For better understanding of application flow it is recommended to use brower extensions like React Developer Tools and React DevTools. store.js is adapted to work with these extensions by using special function composeWithDevTools which is invoked at the time of creating Redux's store object.

• Authenticate is based on JSON Web Tokens. After successful autorization (using standard username/password method or 3rd party services like Facebook or Google), server signs a new JWT for an user. For safety reasons every JWT expires in one hour. Algoritm takes user data like his ID, name and picture and then generate a new JWT using secret phrase. New JSON Web Token is returned to a user as Bearer type token, stored in his agent's local storage and passed as Autorization Header in every HTTP request made with axios. To debug JWT use online debugger.

OAuth Facebook login screen

Author

• Krystian Walaszczyk Selthias

License

This project is licensed under the MIT License