Pollist is a portal where users can create and host polls for FREE. They can also embed the polls on their website with a simple link.
Creating polls shouldn't be hard, and it also shouldn't be heavy on your website if you embed them in yours. Pollist uses modern Tech Stack and features like SSR, CSS purging, etc., to make every poll lightweight and slick helping users easily create polls that they want
To make sure Pollist is fast and scalable, it houses technologies such as :
- Next.js - For optimized frontend and backend
- Typescript - To keep me sane and Pollist's code maintainable
- TailwindCSS - To give Pollist it's sexy looks
- PlanetScale Database - To store Pollist data
- Prisma ORM - To easily integrate the Database into the Pollist backend
- Prettier - To make Pollist's code readable and maintainable
- Vercel - To host Pollist's frontend and backend
- UNLIMITED and FREE poll
Users can create any number of polls, all for free.
- Hosted links for all polls
To ensure your polls are accessible to everyone worldwide, we host them on our website with unique publicly accessible links.
- Ability to control when the poll is live or hidden
Toggle individual poll's visibility from its very own editing page
- Embeddable links
This gives you the ability to embed polls on any website.
- Analytics for each poll
See how many users your poll reached and how many.
- Loading animation
Nprogress was a big help for easily adding loading animation, by simply adding 5 lines loading animation was done
import nProgress from "nprogress";
import "../styles/nprogress.css";
Router.events.on("routeChangeStart", nProgress.start);
Router.events.on("routeChangeError", nProgress.done);
Router.events.on("routeChangeComplete", nProgress.done);- Querying database
For querying the database I used Prisma . Prisma makes interacting with database feel like a breeze, getting user’s data from database becomes something like this
await prisma.user.findFirst({
where: {
id: session.user_id,
},
select: {
email: true,
name: true,
id: true,
},
});Next.js does not support Date, sets, etc. by default but using this "super" package you can easily overcome this limitation
Pollist's codebase is secure with type checking using interfaces when and where needed (which is almost everywhere). All variables and functions have a proper naming conviction, making them understandable and easy to edit. I tried to keep it easy so that even beginners could understand the code.
Typescript saved me many hours of debugging, trust me on this, learning Typescript is soo worth the time if you are still using JavaScript for your projects
Pollist's APIs are versioned, so creating/modifying APIs and integrating them into the system becomes painless. In the future making polls accessible through APIs is also possible using this system.
Using non-relative module resolution for @components, @utils, and @types, code automatically becomes clean, from having code like this
import x from "../../../components/x"
import y from "../../../components/y"
import z from "../../../components/z"to something clean and simple like
import { x, y, z } from "@components"Setup module resolution in your project by simply adding these lines in your tsconfig.js file
{
// rest of tsconfig
"baseUrl": "./",
"paths": {
"@components": ["src/components"],
"@utils": ["src/utils"],
"@types": ["src/types"]
}
}- Custom styles for poll
- Managing Polls using API
- Custom poll url
- Poll Description
- Header images
Follow me on Twitter and LinkedIn, and I am soon going to start writing technical blog's on my personal blog
Lastly, I would like to thank Hashnode and PlanetScale for hosting this hackathon which encouraged me to build this project. Let me know in the comments what you all think about this project.