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
please do not create any violating contents here as is this database is publicly visible, and I'm not responsible for any violating content
A design system with values of Nature and Determinacy for the better user experience of enterprise applications
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile.
Promise based HTTP client for the browser and node.js.
Mongoose provides a straight-forward, schema-based solution to model your application data.
Database-as-a-Service for MongoDB. Now part of the MongoDB family, powering over 1 million deployments worldwide.
The first thing in full-stack apps is Setting up the back-end server.
Setting up nodejs
I used nodejs to setup the back-end for this app because nodejs is scalable, fast and easy to create real-time apps
Express, Mongoose, mLab
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)
Planing API Structure
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
Creating API Endpoints
We are creating a CRUD (Create, Read, Update, Delete) API, which can be done quickly with mongoose queries.
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"
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
Making it real-time
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
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.