CADemy

Inspiration

Millions of students, especially in underprivileged communities, lack access to quality CAD education due to expensive software and hardware requirements. Traditional CAD tools are intimidating and exclude countless young learners from discovering 3D design skills that unlock opportunities in engineering and product design.

CADemy was born from a simple belief: every student deserves the chance to learn, create, and innovate, regardless of their background or resources. I was inspired by the potential of 3D modeling to design assistive technologies like prosthetics and accessibility tools that can change lives.

By making CAD browser-based and gamified, CADemy eliminates barriers - learners need only curiosity and internet access, not expensive software or powerful machines.

What it does

CADemy is an interactive web-based application that teaches 3D modeling and Computer-Aided Design (CAD) concepts through hands-on practice. The platform offers:

• Interactive 3D Environment: Users work with real 3D objects using professional-grade tools
• Progressive Learning System: Starting with basic shapes and advancing to complex assemblies
• Challenge-based Learning: Practical challenges that simulate real-world design tasks
• Real-time Feedback: Instant feedback with helpful hints and suggestions
• Transform Controls: Precise move, rotate, and scale operations

The application features three main modes: Playground for free-form modeling, Challenge mode for structured learning and Tutorial mode for guided instruction.

How I built it

CADemy is built using modern web technologies optimized for 3D graphics:

• Frontend Framework: React for component-based UI architecture
• 3D Graphics: Three.js for WebGL-based 3D rendering
• React Integration: React Three Fiber as the React renderer for Three.js
• 3D Utilities: React Three Drei for enhanced 3D components and helpers
• Authentication: Appwrite for user login and signup functionality
• Styling: Tailwind CSS for responsive, modern design
• Build System: Webpack for module bundling and development workflow

The architecture follows a modular approach with dedicated components for 3D scene management, UI interactions, and state management through React Context API.

Challenges I ran into

Performance Optimization: Rendering complex 3D scenes in the browser while maintaining smooth interactions required careful optimization of geometry updates and render loops.

Boolean Operations: Implementing CSG (Constructive Solid Geometry) operations in JavaScript proved computationally intensive, requiring efficient algorithms for mesh manipulation.

State Management: Coordinating 3D scene state with React's component lifecycle while maintaining performance was architecturally challenging.

Accomplishments that I'm proud of

• Created a fully functional 3D CAD environment that runs entirely in the browser
• Developed an intuitive challenge system that makes learning CAD concepts engaging
• Achieved smooth real-time 3D interactions with professional-grade transform controls
• Built a scalable architecture that supports progressive feature additions
• Implemented complex boolean operations for constructive solid geometry
• Designed an accessible interface that lowers the barrier to entry for 3D design

What I learned

3D Graphics Programming: Gained deep understanding of WebGL, Three.js ecosystem, and 3D mathematics including transformation matrices and geometric algorithms.

Performance Engineering: Learned optimization techniques for real-time 3D rendering, including efficient geometry updates and memory management.

React Ecosystem: Mastered advanced React patterns including Context API, custom hooks, and integration with non-React libraries like Three.js.

Built With

• react
• tailwind
• three.js