Hot Takes!

A new and fun way to post and vote on possibly controversial takes on any topic! Visualized data in the results page and more!

Comment

Inspiration

The poll system on Reddit is good, but the was UI getting a little bit repetitive and I also wanted a way to search for interesting questions/polls, which is a bit of hard to search for. I envisioned a more visually stimulating, engaging, and overall easier system to find these type of discussions in certain communities.

What it does

It is a system that transforms hot takes into a more interactive voting experience.

Users can:

  • Submit controversial opinions (hot takes) with custom emojis and categories
  • Vote on statements using an intuitive 1-10 slider with real-time emoji feedback
  • View detailed statistics including vote distributions, temperature scores, and community consensus
  • Search and discover hot takes from throughout Reddit communities
  • Watch live results with animated charts showing how polarizing each take really is

How we built it

  • Frontend: React with TypeScript for component architecture
  • Styling: TailwindCSS for responsive design with custom gradients and animations
  • Data Visualization: SVG curves and animated bar charts for vote distributions
  • Backend API: RESTful endpoints for submitting hot takes, casting votes, and fetching statistics connected with Devvit's integration of Redis

Challenges we ran into

Some challenges that we ran into were:

  • Smooth curve rendering: Creating a distribution curve that properly connects bar chart points while staying above all bars, even those with zero votes
  • Mobile responsiveness: Designing a horizontal scrolling interface that works seamlessly on small screens while maintaining the side-by-side voting layout
  • Calculating real-time statistics: Calculating and animating vote percentages, temperature scores, and role distributions with smooth transitions

Accomplishments that we're proud of

  • Having an engaging UI/UX: Created a vibrant, game-like interface that makes voting feel exciting rather than monotonous
  • Smooth animations: Implemented animated counters, sliding transitions, and dynamic color schemes based on vote temperature
  • Distribution visualization: Built a custom SVG curve overlay that elegantly shows voting distributions and polarization

What we learned

  • TypeScript's best practices for type-safe React components with complex state management
  • SVG path manipulation for creating smooth Bezier curves in data visualization
  • Using Devvit's Redis integration for real-time updates (a bit confused at first)

What's next for Hot Takes!

  • Leaderboards showing the most controversial takes and top contributors
  • Social sharing with generated result cards for Twitter/Discord
  • Subreddit filtering
  • Creating possible games within this system

Built With

Share this project:

Updates