Skip to content

User Guide

devradarapp edited this page Jan 6, 2026 · 1 revision

User Guide

Complete guide to using DevRadar - from sign up to managing your tech stack projects.

🚀 Getting Started

Creating an Account

DevRadar offers two ways to sign up:

Option 1: Google Sign In (Recommended)

  1. Visit devradar.dev
  2. Click "Sign In" in the top right
  3. Select "Continue with Google"
  4. Choose your Google account
  5. Done! You're signed in instantly

Option 2: Email/Password

  1. Visit devradar.dev
  2. Click "Sign In""Create an account"
  3. Enter your email address
  4. Create a password
  5. Check your email for verification (if required)

What Can I Do Without Signing Up?

Anonymous users can:

But to create projects and use the wizard, you'll need an account.


🧙 Using the Stack Wizard

The Stack Wizard is your guide to building the perfect tech stack. It adapts based on your development approach.

Start the Wizard

  1. Click "Start Wizard" on the homepage or dashboard
  2. Or visit devradar.dev/wizard directly

Step 1: Choose Your Development Approach

┌─────────────────────────────────────────┐
│  How do you want to build?              │
├─────────────────────────────────────────┤
│  🤖 AI-Assisted Development            │
│  Let AI tools help you build faster     │
│                                         │
│  🛠️ Traditional Development            │
│  Build everything yourself              │
└─────────────────────────────────────────┘

Step 2: Select AI Tool (AI-Assisted Only)

If you chose AI-Assisted, pick your tool category:

Category Description Tools
CLI Agents Terminal-based AI Claude Code, Aider
AI IDEs AI-powered editors Cursor, Windsurf
AI App Builders Prompt-to-app Lovable, Bolt.new
Managed Platforms Full-stack hosting Replit, StackBlitz

Then select your specific tool.

Step 3: Choose Platforms

Select which platforms your app will target:

  • 🌐 Web - Web application
  • 📱 iOS - iPhone/iPad app
  • 🤖 Android - Android app
  • 🔌 API - Backend API only

Step 4: Select Features

Choose features your app needs:

Feature Description
SEO Search engine optimization
Offline Offline functionality
Realtime Real-time data sync
Auth User authentication
Payment Payment processing
i18n Internationalization

Step 5: Choose Framework

Based on your previous choices, the wizard shows compatible frameworks:

Example for AI App Builder:
┌─────────────────────────────────────────┐
│  ⚠️ Stack Locked                        │
│  Lovable requires: React + Next.js      │
│                                         │
│  Selected Framework: Next.js 15         │
└─────────────────────────────────────────┘

For Traditional development, you can choose freely:

  • Next.js, Remix, SvelteKit, Nuxt, Astro, and more

Step 6: Complete Your Stack

Choose remaining components:

Component Options
Database PostgreSQL, MongoDB, Supabase, Firebase, etc.
Hosting Vercel, Netlify, Cloudflare, Railway, etc.
Authentication Clerk, Auth0, NextAuth, Supabase Auth, etc.
Styling Tailwind, shadcn/ui, Chakra, etc.

Step 7: Review & Create

See your complete stack with:

  • Compatibility Score - Overall compatibility rating
  • Component List - All selected technologies
  • Potential Issues - Any compatibility concerns
  • Project Name - Give your project a name

Click "Create Project" to save!

Auto-Save Feature

The wizard automatically saves your progress in your browser. If you close and come back later, you can continue where you left off!


📁 Managing Your Projects

View All Projects

Visit devradar.dev/projects to see all your projects.

Each project card shows:

  • Project name and type (Web, Mobile, API)
  • Compatibility score
  • AI tool used (if any)
  • Stack components
  • Last updated date

Project Detail Page

Click any project to see its detail page with tabs:

Overview Tab

  • Project summary
  • Technology stack display
  • Platform badges
  • Feature requirements

Compatibility Tab

See how your stack components work together:

┌─────────────────────────────────────────┐
│  Compatibility Matrix                   │
├─────────────────────────────────────────┤
│  Next.js ↔ Prisma     ✅ Compatible     │
│  Next.js ↔ Vercel     ✅ Compatible     │
│  Prisma ↔ Vercel     ✅ Compatible     │
└─────────────────────────────────────────┘

Features:

  • View compatibility status between any two components
  • Add compatibility notes
  • Flag issues for follow-up
  • Link to full compatibility reports

Stack Tab

View all your stack components with details:

  • Framework, database, hosting, auth, styling
  • Add notes for each component
  • See official documentation links

Tasks Tab

Create and track tasks for your project:

✅ Set up Next.js project
✅ Configure Prisma
⬜ Build authentication
⬜ Create database schema

Features:

  • Add new tasks
  • Mark complete/incomplete
  • Delete tasks
  • Progress tracking

Notes Tab

Add rich notes for documentation:

# Deployment Notes

Remember to set environment variables:
- DATABASE_URL
- NEXTAUTH_SECRET

Features:

  • Markdown support
  • Add/edit/delete notes
  • Organize by title

Activity Tab

See a timeline of all project activity:

  • Tasks completed
  • Notes added
  • Changes made
  • Project created

Project Actions

Edit Project

  • Change project name
  • Update description
  • Modify stack components

Delete Project

  • Click delete button
  • Confirm deletion
  • Project is permanently removed

📊 Dashboard

Visit devradar.dev/dashboard for an overview:

Statistics

  • Total Projects - All your saved projects
  • Active Scans - Compatibility checks performed
  • Issues Found - Potential compatibility issues
  • Optimization - Stack optimization score

Recent Activity

See your latest actions across all projects.

Quick Actions

  • Create New Project - Start the wizard
  • View All Projects - Go to project list

💡 Pro Tips

1. Start with the Wizard

Even if you know your stack, the wizard helps discover compatibility issues you might miss.

2. Use Compatibility Notes

When the wizard flags potential issues, add notes to remember workarounds.

3. Track Tasks

Use the Tasks tab to break down your project into manageable steps.

4. Check Compatibility Before Building

Spending 5 minutes checking compatibility can save hours of debugging later.

5. Explore AI Tools

Try the AI-Assisted path even if you're skeptical. You might discover a tool that changes your workflow.


🆘 Troubleshooting

Wizard Not Saving?

  • Check browser localStorage is enabled
  • Try refreshing the page
  • Make sure you're signed in

Can't See My Projects?

  • Sign out and sign back in
  • Check you're using the same account
  • Clear browser cache if needed

Compatibility Score Wrong?

  • Our data is sourced from official docs and community
  • If you find discrepancies, report it!

📚 Related Resources


🤝 Still Need Help?


Happy building! 🚀