Giter VIP home page Giter VIP logo

blog_webapp's Introduction

Blog_WebApp

web application to post and read blogs with nested comment section implemented.

Design Document: Link

Features!

  • This blog web app allow a user to post and view blogs.
  • A user can also post and reply to comments in the comment section of a blog.
  • There are two ways to write a blog. One way is using markdowns to write correctly aligned and size-controlled blogs. Another simple alternative should be present for users who not comfortable with markdowns.
  • Additionally while writing a blog, user can preview the blog before submitting.
  • Authentication for posting or liking a blog and to comment.

Technologies:

  • Front-end: Reactjs along with Material-UI (React UI framework).
  • Back-end: Nodejs, Express, Passportjs (for google authentication).
  • Database: MongoDB hosted at mlab.com
  • Google+ API Service: for user authentication

Front-end flowchart

image

Datebase Models:

image

How to Use on a local machine

(The below installation guide is for on ubuntu) Install node and npm:

$ sudo apt-get install nodejs
$ sudo apt-get install npm
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
$ sudo npm install -g n

After confirming that node are npm are installed. Clone this repo ( Assumming git is already installed ):

$ git clone https://github.com/Mohit-Nathrani/Blog_WebApp.git

after cd <repo_dir> there is a file server/config/keys.js inside that input

  1. mongodb database link link
  2. CookieKey (anything ex:"RandomKey")
  3. Go to https://console.developers.google.com create a project and get clientId, clientSecret for authentication using google+ api there provide Authorized JavaScript origins : http://localhost there also provide Authorized redirect URIs: http://localhost:3001/auth/google/redirect after getting keys put them in key.js

Now we will start the server:

$ cd server
$ npm install
$ node index

if everything is okay, this text will come on terminal:
server listening....
connection successful

Now in another terminal (from repo dir):

$ cd client
$ npm install
$ npm start

This step will open ( localhost:3000 ) in browser.

Free Software, Hell Yeah!

blog_webapp's People

Contributors

mohit-nathrani avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.