johncena-huang / langisland-reads

The MERN application which allows users to share their book reflections and interact with other users via the comment system

LangIsland-Reads

The MERN(MongoDB, Express, React, Node) application where users can share their book reflections, import notes from notion and interact with other users via the comment system.
Explore the website

Test account

Email: [email protected]
Password: 123456

Table of contents

• Overview
• Quick start
• APIs and dependencies

Overview

Home page tour

Book search

Import document from Notion

Leavea the comment

Like the comment

Quick start

Clone the project to your local machine

 $ git clone https://github.com/Johncena-Huang/langisland-reads.git 

The following commands should be entered in the root of the directory.

Install all the dependencies for both server and client

 $ npm i 

Create environment variable

 $ touch .env 

Enter the corresponding keys in the .env file

Please have a look at the APIs mentioned for the backend server

 
// .env
SENDGRID_API_KEY=
EMAIL_FROM=
NAME="LangIslandEnglishClub Admin"
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_URL="http://localhost:3000"
NOTION_CLIENTID=
NOTION_CLIENT_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_CLOUD_KEY=
CLOUDINARY_CLOUD_SECRET=
DOMAIN=http://localhost:3456

The Redirect URIs for NotionAPI shoud be set to http://localhost:3000/oauth/notion/callback

Start Mongodb server

 mongod 

By default, the server connects to mongodb server on port 27017

Start the development server

 $ npm run dev 

Check in browser on http://localhost:3456/

APIs and Dependencies

Frontend

Third party APIs

Using New York Times API to fetch the list of best sellers and their book information(isbn number)

Using Google Book API to fetch the cover image based on the isbn number of each book

Functional

Using react for React framework to build the user interfaces on the website.

Using react-router-dom for router implemented on the client-side.

Using redux, react-redux for hooking up React to redux and state management.

Using redux-thunk to combine different action creators together and create a new one so that each one can be kept compact and small.

Using redux-persist to persist certain piece of state in order to avoid redirect upon refresh(F5) in protected routes.

Using http-proxy-middleware to connect frontend to backend in development via proxy.

Using uuid to create non-repeating random numbers assigned to each alert message.

Visual

Using tinymce-react for its out-of-the-box, customizable WYSIWYG HTML editor

Using swiper for its highly customizable carousel component

Using react-lazy-load-image-component for lazy-loading the image onto the page with blurry and giving a better user experience

Using react-animate-on-scroll to animate elements on scroll with animate.css, which provides a wide array of animation effects.

Using react-fontawesome for using fontawesome icon library in the React project

Using bootstrap CSS framework to quickly create a responsive website.

Using react-bootstrap to use special components in the React project

Using react-router-bootstrap to make bootstrap component behave like a React router <Link>.

Using sass for compiling SASS into CSS in order to customize bootstrap.

Using github-markdown-css to style the markdown text.

Backend

Third party APIs

Using Google OAuth 2.0 for OAuth to authenticate users on the server.

Using Notion API to access the documents for the given users from Notion in our application.

Using Cloudinary cloud service for storing the images.

Using SendGrid API for sending the verification emails to newly-registered users.

Functional

Using express to set up the main logic of backend server

Using express-session to make the visits of the user stateful in between requests

Using connect-mongo to set up the session store and hook it up to MongoDB MongoDB Atlas Database

Using passport, passport-local, passport-local-mongoose, passport-google-oauth2 to set up user authentication and authorization for both local and google login

Using multer-storage-cloudinary and cloudinary for storing the picture file on the external cloud storage space.

Using @sendgrid/mail for connecting to Twilio SendGrid Web API v3 via Node.js and sending the email verification letter to new registered user

Using html-to-text to parse HTML and convert it to text.

Using @notionhq/client for connecting to Notion API and grabbing the documents for the login user.

Using notion-to-md to convert fetched notion document blocks to markdown.

Using markdown-it to convert markdown to HTML

Using joi to implement server side data validation on incoming form data.

Using moment to formulate date