CIVIC DRAFT

• 

  Civic Draft Home Page

• 

  Civic Draft Live Discussion

• 

  Civic Draft Debate Page

• 

  Civic Draft Team Page

• 

  Civic Draft Playbook Page

Inspiration

I'm passionate about inclusion and accessibility. Data and information should be accessible and easy for everyone to engage with. When people can interact in a healthy, dynamic way, the possibilities are endless. I was inspired by my own desire to engage more with politics and hearing similar feelings from colleagues, friends, and family. I thought: What if there were a way to engage with politics in a fun, interactive, yet extremely valuable way? A place where you could listen to debates from people directly affected by legislation and executive orders, get a deeper understanding of policies from experts, and read political player profiles to compare politicians, all while being able to discuss issues with like-minded people.

What it does

Civic Draft is a unique platform that turns politics into a game by allowing you to build your dream team of real politicians, join live debates, and stay engaged with current issues. Like fantasy sports for democracy, it empowers you to understand and influence who's shaping your life.

Features

Core features include:

• Sign-up and login
• Automatic team generation based on your state
• Browsing players and swapping political players
• Filter players
• Creating teams
• Simulation of live debates

How I Built It

I built a demo prototype of the application using Bolt.new to scaffold the project, starting with a prompt that included the tech stack. I kept the design bare bones(black and white) to focus on the core functionality. I outlined the pages and features, then iterated, refining the interactions and improving functionality. After iterating on the basic foundation and interactions, I moved the project to VS Code to make UI, interaction, and layout changes easier, as well as to refactor parts of the code. The demo includes static and dynamic data stored locally to support interactive features.

• Bolt.new, Next.js, Tailwind CSS, ShadCN UI, Lucide React Icons, LocalStorage, VS Code

Challenges I ran into

One challenge I faced was balancing planning and prompting to execute the code. I'm accustomed to creating at least a basic plan before jumping into code, but this time, I had only rough layouts and concepts without a detailed data structure for users or teams.

As I developed features, I found myself refactoring and adjusting the data structure, but that's also what I love about building prototypes: they help answer these questions before committing to a database design. Another challenge was debugging the code and understanding the codebase as Bolt developed it. Also, ran into challenges connecting to Netlify.

What I learned

One takeaway for me is how quickly I can use Bolt.new to take an idea and, have it prototyped, and then iterate on it to get to a solution. Additionally, I've learned how to achieve the right rhythm of prompting to yield the results you want.

What's next for CIVIC DRAFT

I plan to gather feedback and build out the prototype into a live MVP application with Supabase. I want to expand Civic Draft by incorporating detailed player profiles that include information on committees, voting records, legislation, and analytics, among many other features.

Built With

• localstorage
• nextjs
• react
• shadui
• tailwind
• vercel
• vscode