Proad: Code in a Click

A zero-friction, minimalist platform for instantly trying out modern, visual web technologies. No sign-up required. Just choose a course and start coding.

Comment

Inspiration

Our journey began with a shared frustration: why is there so much friction just to try a single line of code online? We were tired of mandatory sign-ups, cluttered dashboards, and complex local setups that stood between a moment of curiosity and the act of creation. We were inspired by the simplicity of platforms like Progate and the power of modern web technologies to ask a simple question: what if you could just... code? We wanted to build the most direct path from an idea to its execution, creating a zero-friction environment for both new learners and experienced developers.

What it does

Proad is a minimalist, single-purpose platform for instantly trying out and learning modern, visual web technologies. It's built on a core principle: Code in a Click.

  • Zero-Friction Access: There are no sign-up forms or login walls. Users arrive, choose a course, and start coding immediately in a live, interactive environment.
  • Focused Learning UI: The learning page is a full-screen, distraction-free sandbox. It features a high-quality Monaco code editor and a real-time preview pane, maximizing the space for hands-on learning.
  • Visually-Driven Content: The courses are curated to teach modern, visual technologies like CSS Animations and 3D graphics, providing the satisfying and immediate feedback that makes learning engaging.

How we built it

We built Proad on a modern, fast, and scalable tech stack, developed entirely within the Bolt environment.

  • Frontend: We used React with Vite and TypeScript for a fast, type-safe development experience.
  • Backend & Content: All course and lesson data is served from a Supabase PostgreSQL database, allowing for easy content management.
  • UI & Styling: The clean, minimalist UI was built with Tailwind CSS and shadcn/ui components.
  • Routing: Client-side navigation is handled by React Router.
  • Deployment: The application is deployed on Netlify, configured to support SPA routing.
  • Assets: The conceptual video clips for our promotion were generated using Veo.

Challenges we ran into

Our biggest challenge was a persistent bug related to state management and race conditions. After implementing user authentication with Supabase, we found that pages would often get stuck on a "loading" screen. The core issue was that child components were trying to fetch data before the root App.tsx component had fully confirmed the user's session status. We went through several iterations, initially trying to manage loading states on each page, before realizing we needed a centralized, robust authentication flow in App.tsx to ensure all user data was loaded before any pages attempted to render. It was a valuable lesson in architecting React applications.

Accomplishments that we're proud of

We are incredibly proud of creating an experience that truly lives up to our "Code in a Click" mantra. The user flow is seamless: from the landing page, a user is two clicks away from writing their first line of code in a real development environment. Stripping away the user registration and login features, while counterintuitive at first, was a breakthrough. It forced us to focus on the core value of the product and resulted in a uniquely fast and accessible platform that we believe stands out.

What we learned

This project reinforced a critical lesson: a simple, focused user experience is often the most powerful. We learned that the initial friction of signing up for a service can be a significant barrier, and removing it creates a fundamentally more welcoming product. Technically, we gained a deep appreciation for robust, centralized state management in React. Debugging the race condition issues taught us the importance of establishing a clear "source of truth" for application-wide state like authentication before rendering any dependent components.

What's next for Proad: Code in a Click

The future of Proad is exciting. With the core learning experience now solid, our next steps will be to thoughtfully re-introduce features on top of this stable foundation.

  1. Expand the Curriculum: We will add more courses focused on creative and visual technologies, including JavaScript libraries like p5.js and more advanced animation techniques.
  2. Optional Progress Tracking: We plan to bring back user accounts as an optional feature. Users could choose to create an account to save their progress, earn achievements, and create a portfolio of their creations.
  3. Community Snippets: We envision a feature where users can save and share their code "snippets," creating a community-driven gallery of cool effects and ideas, further inspiring others to learn and create.

Built With

Share this project:

Updates