🦉 Solving Owl

🌐 Live Demo

🚀 Visit Solving Owl - Try it Now!

---

A modern interactive coding platform where developers can practice problem-solving skills across different difficulty levels. Solve coding challenges, track your progress, and enhance your programming abilities with an intuitive code editor and instant feedback system.

📸 Screenshots

🚀 Technologies Used

• Frontend Framework: React 18.2.0
• Build Tool: Vite 4.4.5
• Routing: React Router DOM 6.14.2
• Styling:
  • TailwindCSS 3.3.3
  • DaisyUI 3.5.1
• Backend Services: Firebase 10.1.0 (Authentication & Hosting)
• State Management: React Context API
• Animations:
  • Lottie React 2.4.0
  • React Type Animation 3.1.0
  • React TSParticles 2.12.1

✨ Core Features

• 🎯 Multiple Difficulty Levels - Practice problems categorized as Easy, Medium, and Advanced
• 💻 Integrated Code Editor - Write and test JavaScript code with syntax highlighting
• ✅ Instant Code Validation - Real-time feedback with test case execution
• 👤 User Authentication - Secure login and registration with Firebase
• 📊 Progress Tracking - Monitor solved problems and track your journey
• 🎨 Modern UI/UX - Responsive design with smooth animations and interactive elements
• 🌙 Dark Theme - Eye-friendly interface for extended coding sessions
• 📱 Mobile Responsive - Seamless experience across all devices

📦 Dependencies

Production Dependencies

{
  "@uiw/react-textarea-code-editor": "^2.1.7",
  "axios": "^1.4.0",
  "firebase": "^10.1.0",
  "localforage": "^1.10.0",
  "lottie-react": "^2.4.0",
  "match-sorter": "^6.3.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.10.1",
  "react-lottie": "^1.2.3",
  "react-router-dom": "^6.14.2",
  "react-tsparticles": "^2.12.1",
  "react-type-animation": "^3.1.0",
  "sort-by": "^1.2.0",
  "sweetalert2": "^11.7.20",
  "tsparticles": "^2.12.0"
}

Development Dependencies

{
  "@vitejs/plugin-react": "^4.0.3",
  "autoprefixer": "^10.4.14",
  "daisyui": "^3.5.1",
  "eslint": "^8.45.0",
  "tailwindcss": "^3.3.3",
  "vite": "^4.4.5"
}

🛠️ Installation & Setup

Follow these steps to run the project locally:

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager
• Git

Step 1: Clone the Repository

git clone https://github.com/Humayun63/solving-owl-client.git
cd solving-owl-client

Step 2: Install Dependencies

npm install
# or
yarn install

Step 3: Configure Firebase

Create a .env file in the root directory and add your Firebase configuration:

VITE_APIKEY=your_api_key
VITE_AUTHDOMAIN=your_auth_domain
VITE_PROJECTID=your_project_id
VITE_STORAGEBUCKET=your_storage_bucket
VITE_MESSAGINGSENDERID=your_messaging_sender_id
VITE_APPID=your_app_id

Step 4: Run Development Server

npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

Step 5: Build for Production

npm run build
# or
yarn build

Step 6: Preview Production Build

npm run preview
# or
yarn preview

📁 Project Structure

solving-owl-client/
├── public/              # Static assets
│   └── showcase/        # Screenshot images
├── src/
│   ├── assets/          # Animation files
│   ├── components/      # Reusable components
│   ├── firebase/        # Firebase configuration
│   ├── layouts/         # Layout components
│   ├── pages/           # Page components
│   ├── provider/        # Context providers
│   └── routes/          # Route configuration
├── firebase.json        # Firebase hosting config
├── vite.config.js       # Vite configuration
└── tailwind.config.js   # TailwindCSS configuration

🔗 Related Resources

• Backend API: Solving Owl Server
• Firebase Console: Firebase Project
• Live Website: https://solving-owl.web.app/

👨‍💻 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📝 License

This project is open source and available for educational purposes.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

---

Built with ❤️ using React and Vite

© 2024-2025 Md Humayun Kabir. All rights reserved.