The official website for Power Platform ToolBox - showcasing features and providing easy downloads for the desktop application.
This is a Next.js-based static website built with TypeScript and Tailwind CSS that:
- Showcases the key features of Power Platform ToolBox
- Automatically detects the user's operating system (Windows, macOS, or Linux)
- Provides smart download links from the latest GitHub release of the desktop-app
- Features a responsive, modern design
- Next.js 16 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- Supabase - Backend service (ready for future enhancements)
- Node.js 20 or higher
- npm or yarn
# Clone the repository
git clone https://github.com/PowerPlatformToolBox/pptb-web.git
cd pptb-web
# Install dependencies
npm install
# Run the development server
npm run devOpen http://localhost:3000 to view the website.
npm run dev- Start the development servernpm run build- Build for productionnpm run start- Start the production servernpm run lint- Run ESLint
This website is designed to be deployed as a static site. It works with:
- Vercel (recommended) - Zero configuration deployment
- Netlify - Static site hosting
- GitHub Pages - Free hosting for public repositories
- Any static hosting service
Or using the Vercel CLI:
npm install -g vercel
vercelThe website automatically detects the user's operating system and displays the appropriate download button for their platform.
Downloads are automatically fetched from the latest release of the desktop-app repository, ensuring users always get the most recent version.
The website is fully responsive and works seamlessly on desktop, tablet, and mobile devices.
Six key features are highlighted with icons and descriptions:
- Solution Management
- Environment Tools
- Code Generation
- Plugin Management
- Data Import/Export
- Performance Monitoring
pptb-web/
├── app/
│ ├── about/ # XrmToolBox tribute page
│ ├── auth/
│ │ └── signin/ # OAuth sign-in page (Microsoft, Google, GitHub)
│ ├── dashboard/ # Authenticated user dashboard
│ ├── rate-tool/ # Tool rating page
│ ├── tools/
│ │ ├── [id]/ # Individual tool details page
│ │ └── page.tsx # Tools showcase page
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── components/
│ ├── animations/ # Reusable animation components
│ ├── Button.tsx # Button component
│ ├── Container.tsx # Container component
│ ├── DownloadButton.tsx # Smart download button with OS detection
│ ├── Footer.tsx # Footer component
│ ├── Header.tsx # Header with navigation
│ └── ... # Other components
├── lib/
│ ├── os-detection.ts # OS detection utility
│ ├── github-api.ts # GitHub API integration
│ └── supabase.ts # Supabase client and types
├── styles/
│ └── globals.css # Custom theme and styles
└── public/ # Static assets
- Home (
/): Main landing page with features and download button - Tools (
/tools): Showcase of all available tools with filtering by category - About (
/about): Tribute to XrmToolBox and Tanguy (with placeholder text) - Tool Details (
/tools/[id]): Individual tool page with features, ratings, and version info
- Sign In (
/auth/signin): OAuth authentication with Microsoft, Google, and GitHub
- Dashboard (
/dashboard): User dashboard with tool analytics (downloads, ratings, AUM) - Rate Tool (
/rate-tool): Form to rate and review tools
- OAuth sign-in with three providers: Microsoft (Azure AD), Google, and GitHub
- Protected routes automatically redirect to sign-in
- Graceful handling when Supabase is not configured (uses mock data)
- Browse all tools with category filtering
- View detailed information about each tool
- Rate and review tools (authenticated users only)
- Real-time statistics: downloads, ratings, and AUM (Active User Months)
- Overview of all tools with sortable analytics
- Quick access to rate tools
- Statistics summary (total tools, downloads, average rating)
The website integrates with Supabase for:
- User authentication (OAuth providers)
- Tool data storage and retrieval
Supabase configuration no longer uses NEXT_PUBLIC_ prefixed variables. Instead set the following in your .env.local:
SUPABASE_URL=your-project-url.supabase.co
SUPABASE_ANON_KEY=your-anon-keyTo enable GitHub Sponsors data, trigger GitHub Actions workflows, and increase API rate limits, add a GitHub Personal Access Token:
GH_PAT_TOKEN=your-github-tokenHow to create a GitHub Personal Access Token:
- Go to GitHub Settings → Tokens
- Click "Generate new token" → "Generate new token (classic)"
- Give your token a descriptive name (e.g., "PPTB Web - API Access")
- Select the following scopes:
public_repo- For public repositories and basic API accessread:org- To read organization sponsorship dataworkflow- To trigger GitHub Actions workflows
- Click "Generate token" and copy the token
- Add it to your
.env.localfile
Note: Never commit your .env.local file to version control. Use .env.example as a template.
Client components now initialize Supabase via a lightweight hook useSupabase() that fetches configuration from an internal API route (/api/supabase-config). This prevents accidental exposure of additional server-only environment variables while still allowing the (safe) anon key to be used in the browser.
import { useSupabase } from "@/lib/useSupabase";
export function Example() {
const { supabase } = useSupabase();
// supabase will be null until initialized
// Add guards before calling auth/data methods
}For server components or route handlers, use the server client in lib/supabase.ts.
- User ratings and reviews
- Analytics tracking
See SUPABASE_SETUP.md for detailed setup instructions.
- Add user profile management
- Implement real-time analytics updates
- Add tool search functionality
- Create admin panel for tool management
- Add blog or news section
- Create video tutorials section
- Add community showcase
Contributions are welcome! Please feel free to submit a Pull Request.
Made with ❤️ for the Power Platform community