5799fedbf3b93fa81268eb5c613ca812844862cf
LivePoll is an interactive web application designed to simplify the process of creating, participating in, and managing polls. It combines user-friendly features with real-time updates to deliver a seamless polling experience📊.
Features
- User can signup and login using his credentials, used cookie based authentication with jwt.
- User can browse all the Polls created by other users in a pagination format and click on view to view the poll.
- In poll view page user can vote on the poll and see the result of the poll live with chart using sockt.io.
- User can bookmark the poll and see the bookmarked poll in bookmark page.
- In user dashboard user can see the their details and manage their poll.
- By clicking on the create poll button user can create a new poll and add options to the poll.
- Used react-toastify for showing the error and success message.
- Used chart.js and scocket.io-client for showing the poll result live in chart in poll view page.
- Used daisyui and tailwind for styling the UI of the application for responsive design.
Links
Preview Images
Home Page
Polls Page
Login Page
Signup Page
Poll Votting Page
Dashboard Page
Create Poll Page
Bookmarks Page
Tech Stack
Frontend
Framework & Routing: ReactJS, React Router
State Management: Zustand, React Query
Real-Time & Charts: Socket.io-client, react-chartjs-2
Styling: TailwindCSS, DaisyUI
Notifications & Icons: React-Toastify, React Icons
Backend
Framework & Authentication: Node.js, Express.js, JWT, bcrypt
Validation & Documentation: Zod, Swagger-jsdoc
Real-Time Communication: Socket.io
Database & ORM: Mongoose
Others
API Communication: Axios
Installation and Setup
Prerequisites
- Node.js and npm/yarn installed.
- MongoDB database set up locally or on a cloud provider.
Steps
-
Clone the Repository
git clone https://github.com/ManikMaity/LivePoll.git cd LivePoll -
Backend Setup
- Navigate to the backend directory:
cd backend - Install dependencies:
npm install - Create a
.envfile and add the following:env PORT=3000 DB_CONNECTION="your mongodb url" SALT_ROUNDS=6 JWT_PRIVATE="your jwt private key" CLIENT_URL="your client url" - Start the server:
npm run dev
- Navigate to the backend directory:
-
Frontend Setup
- Navigate to the frontend directory:
cd frontend - Install dependencies:
npm install - Update
.envfile with the backend URL (e.g.,http://localhost:3000). - Start the development server:
npm start
- Navigate to the frontend directory:
-
Access the Application
- Open a browser and go to
http://localhost:5173.
- Open a browser and go to
To Switch Between Local and Deployed Environments
- Update backend
.envwith:BACKEND_URL=http://localhost:3000 - Update frontend Axios base URL to:
axios.defaults.baseURL = "http://localhost:3000/api/v1"; - Update the Socket.io URL in the voting page:
const socket = io("http://localhost:3000");
Usage
- Navigate to the
frontenddirectory and runnpm run devto start the development server. - Navigate to the
backenddirectory and runnpm run devto start the server. - Open a browser and go to
http://localhost:5173to access the application.
Future Improvements
- Add a search feature to the poll page.
- Add like feature to the poll.
- sorting polls using created date and popularity.
- Updated user.
- User avatar.
- Multiple question poll.
Description
Languages
JavaScript
99.4%
HTML
0.5%
