About Polle
Polle is an open-source platform where you can create polls, share them to get votes, and finally analyze them in the dashboard. See the number of votes on each answer, votes on each day, votes from different devices, and much more!
🚩 The Problem
Now, we know there are already a lot of poll makers in the market. They lack in one big thing, analytics and that's where Polle can help you. I used some of the poll makers out there and came to know that they don't have great analytics like we don't know from where the votes are coming, when are we getting the most votes, how many votes we got today, yesterday, or the day before yesterday, are we getting votes from mobile, desktop or tablet.
💡 The Idea
That's where I came up with the idea of Polle. It not only lets you build and share polls but also provides user-friendly charts for analyzing the polls. I was thinking to build such kind of app way before this hackathon. But when I heard about this hackathon, I was very motivated to build it.
Here are some reasons why I built Polle for this hackathon:
- To complete the entire project. I usually leave my projects incomplete in the middle. This hackathon really pushed me towards completing the entire project.
- To learn something new. This project helped me learn some new technologies like PlanetScale and Prisma.
- And of course for the swags and prizes 🤣.
🔥 Features
1. Landing Page
Not a feature though. But tried my best to build a nice-looking landing page.
2. Authentication
I added authentication using JWT and Cookies.
3. Dashboard
The dashboard shows an overview of the polls, votes and votes on the current day.
4. Poll Creation
Users can not only create polls, but they can also customize and configure them. Users can:
- Add a question and multiple answers. Also added drag/drop functionality to change the position of answers.
- Pick a theme color for the poll.
- Show a custom "thanks message" that the audience will see after submitting the vote.
- Show or hide results. If results are hidden, the audience can't see the results after voting.
- Enable or disable the poll anytime. The audience can't vote if the poll is disabled.
5. Polls Page
6. Analytics
The analytics page shows:
- Number of votes on each answer.
- Number of notes on each day.
- Votes from different devices like desktop, mobile, and tablet.
7. The Poll
This is the Poll page where users can vote and can also see the results if allowed by the creator.
There are some other features and pages as well. Make sure to explore them.
👨💻 Tech Stack
- Next.js - For building the entire App.
- Material-UI - For building the UI.
- SASS - CSS preprocessor.
- Chart.js - For adding charts to the dashboard.
- Context API - For managing state.
- Prisma - For working with the database.
- PlanetScale - As a database.
- JWT - For authentication.
- Axios - For consuming the API.
- Bcrypt - For hashing passwords.
- React-Beautiful-DnD - For drag/drop feature.
- Vercel - For deployment.
I built the entire app using Next.js along with some other packages and deployed the app on Vercel.
🧱 Project Structure
-- components
-- AnalyticsBox
-- DashboardLayout
-- Features
-- Footer
-- Header
-- Hero
-- HomeLayout
-- Navbar
-- Poll
-- PollCustomize
-- PollItem
-- PollMaker
-- PollManager
-- PollSettings
-- Seo
-- SharePoll
-- context
-- PollContext
-- UserContext
-- lib
-- getUser
-- prisma
-- pages
-- api
-- auth
-- polls
-- votes
-- dashboard
-- analytics
-- edit-poll
-- create-poll
-- index
-- polls
-- poll
-- _app
-- _document
-- index
-- login
-- signup
-- prisma
-- schema.prisma
-- src
-- styles
-- utils
😵💫 Process of Creation
As this was the first time I was working with PlanetScale and Prisma, so I had to cover some basic stuff before creating the project. I read this blog post on PlanetScale by Camila Ramos which gave me an overview of Prisma and PlanetScale. Then started reading the official docs of Prisma and PlanetScale. Once I covered the basics, then the next step:
npx create-next-app polle
Installed Prisma, set up PlanetScale, and created the schema. I started off by implementing authentication, then CRUD operations on the poll, then implemented analytics by using chart.js, and at the end built this cool logo:
Which is nothing but a copy of an emoji from Notion 🤣. I just changed its color using Figma 😊. I'm not a designer so I had to do this 😔. I also created an open-graph image using Canva:
😕 Difficulties
Here are some difficulties that I faced during the development process:
- As I'm not a designer, It was a bit hard for me to come up with a nice-looking UI.
- I struggled with the analytics part. As I had never worked with charts before so adding charts and gathering data for them was hard for me.
🤖 Future Enhancements
These are some features that I thought of adding but was unable to do so. However, I will definitely add them in the future:
- Dark mode.
- Add images in the poll.
- Add a description in the poll.
- Ability to embed the polls in websites using iframe or some other technique.
🔗 Links
Live Preview: polle.shahmir.me
Github Repo: github.com/shahmirfaisal/polle
🧑 About Me
I'm Shahmir Faisal, currently pursuing my Bachelor's in Computer Engineering. I've been in the world of coding for 3 years now. I'm a web developer and my current stack consists of React, Next, Node, Express, and MongoDB. But now I will also include Prisma and PlanetScale 🔥.
🎇 Conclusion
In the end, I want to say thanks to Hashnode and PlanetScale for organizing such a great hackathon where we can learn and show our skills by building cool projects.
