Inspiration
Inspiration
Our team noticed a significant disconnect in technical education. Students often struggle to find relevant, focused practice questions outside of structured curriculum, and the dry, text-heavy nature of typical coding platforms doesn't suit all learning styles. We were inspired by the idea that visual engagement and a calm atmosphere can drastically improve focus and learning retention, especially for complex concepts like algorithms and data structures.
What it does Scenic Solve is a multi-language coding playground designed to deliver focused practice problems (LeetCode-style) within highly stylized, animated environments.
Key features include:
Aesthetic Learning: The background dynamically changes (e.g., to a "Minimalist Space" or "Flowing Lava" theme) with subtle, non-distracting animations to create a unique atmosphere for problem-solving.
Multi-Language Execution: Users can write code in over 50 languages (Python, Java, etc.) thanks to the external execution API.
Integrated Monaco Editor: A professional, fully featured code editor (the engine behind VS Code) provides syntax highlighting, auto-completion, and multi-file project emulation.
How we built it
This project is a modern, full-stack application built for speed and portability:
Frontend: React (Functional Components) for the application structure and state management (leveraging Chakra UI and Tailwind CSS for styling).
Code Editor: We integrated the @monaco-editor/react library and implemented custom themes to seamlessly blend it with the site's unique aesthetic.
Code Execution: We utilize the Piston API (a remote execution service) to securely run user code in the cloud and return the output or errors in real-time.
State Management: We extensively used React Hooks (useState, useRef, useEffect) to manage component memory, synchronize data (for file switching), and gain direct control over the editor instance.
Challenges we ran into
State Synchronization (The File Switch Problem): The biggest challenge was synchronizing the incoming code prop with the internal editor state, ensuring the editor fully refreshed when a user clicked a new problem (a new "file") without losing unsaved work or causing unnecessary re-renders. .
Cross-Browser Animation: Generating complex, subtle CSS animations (like the slow lava flow or planet orbits) that are performant and look identical across different browsers demanded precise keyframe definitions and careful use of transform properties. Accomplishments that we're proud of
Successful Aesthetic Integration: We created a unique design language that successfully blends the dramatic (volcano, space) with the subtle and calm, proving that coding environments can be visually stimulating without being distracting.
Robust Multi-Model Editor: We built a reusable, componentized editor wrapper capable of dynamically changing language, code content, and syntax highlighting on the fly.
Rapid API Implementation: We quickly integrated the Piston API to achieve real-time, polyglot code execution, maximizing the number of languages available for learning.
What we learned
We gained deep expertise in advanced React Hook patterns, specifically:
Using useRef as an "escape hatch" to gain direct, imperative control over third-party libraries (like Monaco's editor.focus()) without triggering excessive re-renders.
Using useEffect to manage state synchronization, solving the common problem of initializing state from props that change over the component's lifetime.
Advanced component styling using a hybrid approach of Chakra UI/Tailwind CSS with embedded custom CSS keyframes.
What's next for Scenic Solve
Firebase/Persistence: Integrate Firebase Firestore to allow users to save their progress, favorite questions, and retain their last submitted solutions.
User Roles & Sharing: Implement user authentication and create an interface for sharing custom-designed problems and aesthetic themes with the community.
Expanded Environments: Add more educational themes (e.g., Ancient Ruins, Deep Sea Exploration) and integrate the animated elements with the actual problem descriptions.
Log in or sign up for Devpost to join the conversation.