/pollapp

A web application for creating polls

Primary LanguageTypeScript

📊 PollApp

A web application to create polls implemented using webpack module federation. This is a monorepo contains multiple micro frontends.

🔨 Development

Frontend

  1. Installing packages

    Install all the dependecies in each of the microfrontends. In folders authentication,poll,profile,utils and shell

     yarn install

  2. Running

    Same as above, in all the folders, run following command

    yarn dev

    When running this command in shell folder, it will automatically open up browser else visit here

Backend

To run backed

cd server
docker-compose -f docker-compose.dev.yml up

On first time run, the migration and seeding will not be running since no database is created. So run again the same command. Sometime sequelize won't create database, in that case, manually create a database with whatever name you given in .env file. Follow these:

docker ps

This will list all the containers, from these copy the id of postgres, then

docker exec -it <POSTGRES_CONTAINER_ID> sh

This will connect to postgres container and open up sh.

psql -U <USER>

This will connect to psql CLI. Run the following to create database

CREATE DATABASE <DATABASE NAME>

Microfrontends

These are the different frontends used:

Authentication

This is the home page of the app. To see more details click here

Hosted URL - link

Poll

Poll app take care of the polling part, where there will be 2 types of user (host/joinee). To see more details click here

Hosted URL - link

Profile

Profile is where user can create/edit polls and questions. To see more detail click here

Hosted URL - link

Utils

This will serve some of the common things to the other microfrontends. To see more details click here

Hosted URL - link

🎉 Shell

Shell will hold together all other apps. To see more details click here

Hosted URL - link

📌 Libraries

  • 📣 ReactJS,ReactDOM
  • 📣 Antd, styled-components - Component library and styling
  • 📣 react-router-dom - For handling routes
  • 📣 react-google-login - For google authentication
  • 📣 recoil - State management
  • 📣 axios - HTTP client
  • 📣 @uiw/react-md-editor - Markdown editor
  • 📣 chart.js,react-chartjs-2 - For charts
  • 📣 socket.io-client - Handling socket

📟 Server

To handle backend, a node based server is implemented. To see more details click here

📌 Libraries

  • 📣 ExpressJS - Handling HTTP requests
  • 📣 google-auth-library - To get user details from user bearer token
  • 📣 redis - To store poll details
  • 📣 pg - Database
  • 📣 sequelize - An ORM to query with Database
  • 📣 socket.io - For real-time connection with client