{"componentChunkName":"component---src-templates-case-study-js","path":"/case-studies/quicker-poll","result":{"data":{"markdownRemark":{"id":"bacf1098-8a94-5bec-9472-a43fc4a546eb","html":"

About QuickerPoll

\n

QuickerPoll is a crowd-sourced real-time polling app created with React and Nodejs. QuickerPoll lets you create, edit, update, delete public polls and vote on them publicly. This project is just an example of using react, nodejs and restful APIs all together

\n
\n

please do not create any violating contents here as is this database is publicly visible, and I'm not responsible for any violating content

\n
\n

Tools used

\n

chart.js react-color styled-components socket.io

\n\n
\n

Planning

\n

The first thing in full-stack apps is Setting up the back-end server.

\n
\n

Setting up nodejs

\n

I used nodejs to setup the back-end for this app because nodejs is scalable, fast and easy to create real-time apps

\n
\n

Express, Mongoose, mLab

\n

In the third step I setup Express Server, Mongoose Schemas/Models and connect our app with mLab database which will act as a DBaaS (Database as a service)

\n
\n

Planing API Structure

\n

RESTfull API should be consistent and easy to integrate with our Front-end app that's why planning the API models is necessary for example our polls API looks like this /api/polls

\n
\n

Creating API Endpoints

\n

We are creating a CRUD (Create, Read, Update, Delete) API, which can be done quickly with mongoose queries.

\n
\n

Front-End

\n

Since we are done with back-end, we are going to add client-side code, and we will use create-react-app boilerplate to make our life easy. To connect our front-end with back-end we are going to use the NPM package \"concurrently\" to start both our servers at the same time. and to talk with our api endpoint, we have to set a proxy to our client-side package.json \"proxy\": \"http://localhost:5000\"

\n
\n

UI

\n

We have to let users interact with our back-end database through an elegant UI. So i decided to use Ant Design to scaffold the UIs. antd provides all the sleek UI components which can be used easily integrated with our app for example Menu, List, Input, Card, Popover, Icon

\n
\n

Making it real-time

\n

After setting up our UI for our client-side CRUD operations, i used socket.io to make our app real-time, and I used ReactContextAPI to manage Global state of the app

\n
\n

Deployment

\n

I'm going to use Heroku to deploy our app online. Heroku lets us deploy nodejs apps for free it uses something called Dynos to deploy nodejs apps. Finally, to deploy our app, I'm going to build our client-side React code and make an optimized production build.

","fields":{"slug":"/case-studies/quicker-poll"},"frontmatter":{"demo":"//quickerpoll.herokuapp.com","iframe":"//www.youtube.com/embed/10sL4z9BHNE/?modestbranding=1&showinfo=0&autohide=1&rel=0","src":"//github.com/anuraghazra/QuickerPoll","title":"QuickerPoll","info":{"idea":"The basic idea of this project is to create a MERN stack app with basic CRUD operations, but not to make a todo app","links":[["Mongoose","https://https://mongoosejs.com/"],["Nodejs","http://nodejs.org"]],"tech":["Nodejs","AntDesign","React","MongoDB"]}}}},"pageContext":{"slug":"/case-studies/quicker-poll"}},"staticQueryHashes":["1033876704"]}