• 

  List of news stories with easy edit ability

• 

  Mock of adding a new story

• 

  Login

Offsideszone Admin App Hackathon Write-Up

🎯 Inspiration

I wanted to give my other hackathon project, Offsideszone, a simple, non-technical dashboard so editors can:

• Review, edit, or delete auto-generated news stories
• Add new links and let AI generate titles/subtitles automatically
  
• Keep our content fresh without giving direct access to the database

🧠 What I Learned

• Prompt engineering with Bolt to generate a full-stack React/Tailwind app from one spec. If you spend a little time up front tailoring your prompt, you can get a more powerful app that is close to a useable app. I believe I am only a few more prompts away from using this app.

🛠 How I Built It

My single Bolt prompt
`Build an admin web app called Offsides Admin to manage news stories for the offsideszone project.

🔐 The app should use Supabase Auth with magic link login. Only allow login for the user malwalden5@gmail.com. 💾 Connect to an existing Supabase project (I'll plug in the URL and API key later). 📰 Once logged in, show a table of news stories from the news table. The table includes: id, title, subtitle, external_link, category, date, and created_at ✏️ For each story, I should be able to: Edit title, subtitle, or external_link Delete the story ➕ Include an "Add Story" form where I paste a link. The AI should mock generating the title and subtitle from the link (hardcode placeholder values for now) and insert a new row into the database. The final version will call an AI endpoint to do this dynamically. 🧪 Use clean, modern UI (Tailwind or ShadCN). Make the layout mobile-friendly. ✅ Display toast notifications on save/delete success. ❌ If a user who is not malwalden5@gmail.com logs in, redirect to an "Access Denied" screen. 📄 Make the login screen the root view. Redirect to the news dashboard after login. colors: { 'pitch-green': '#0A8754', // Good contrast 'sunburst-yellow': '#FFD700', // Brightened for better contrast 'chalk-white': '#F6F5F0', // Good contrast 'deep-navy': '#1F2D3D', // Good contrast 'electric-purple': '#9333EA', // Adjusted for better contrast 'success': '#15803D', // Darkened for better contrast 'warning': '#B45309', // Darkened for better contrast 'error': '#DC2626', // Adjusted for better contrast }, fontFamily: { sans: ['Inter', 'sans-serif'], heading: ['Montserrat', 'sans-serif'], },

🚧 Challenges Faced

• NONE!

🔭 How I Would Add on in Future

• Make the access denied error right after entering email not after the email is sent
• Fix error saving changes
• Swap mock AI for real endpoint (OpenAI)
  
• Enable bulk-import of links via CSV drag-and-drop
  
• Add audit log (who changed what, when)
  

Built With

• postgresql
• supabase