kart_codes System Requirements Document

1. Introduction

The project "kart_codes" aims to develop a beginner-friendly coding website called "KarthikCodes". This document outlines the system requirements necessary to build the website, ensuring it meets the specified functionalities and design expectations.

2. System Overview

"KarthikCodes" is designed to be an educational platform that provides users with a variety of coding courses and problem-solving exercises. The platform will feature a dynamic and interactive user interface, making it accessible and engaging for beginners. Key features include an animated landing page, secure login with advanced features, a comprehensive course selection interface, and a problem-solving streak system.

3. Functional Requirements

• As a User, I should be able to see the brand name "KarthikCodes" with an animated logo on the index page.
• As a User, I should be redirected to the login page after clicking "Enter" on the index page.
• As a User, I should be able to log in using an OTP verification system.
• As a User, I should receive login alert emails.
• As a User, I should have the option to reset my password using the "Forgot Password" feature.
• As a User, I should be able to log in using Google or GitHub accounts.
• As a User, I should be able to view my login history.
• As a User, I should receive a welcome email from karthikcodes26@gmail.com after a successful login.
• As a User, I should be able to select from a variety of courses after logging in.
• As a User, I should be able to choose a difficulty level for each course: Easy, Medium, or Hard.
• As a User, I should see a fire emoji if I solve at least one problem per day.
• As a User, I should see a love emoji if I miss solving a problem for a day.
• As a User, I should experience modern, colorful CSS effects with animations throughout the site.
• As a User, I should interact with visually attractive 3D interface elements on the login and course selection pages.
• As a User, I should have a responsive design experience on both desktop and mobile devices.

4. User Personas

• Beginner Coder: A user new to coding, looking for an engaging and easy-to-navigate platform to learn various programming languages and concepts.
• Returning User: A user who frequently logs in to continue learning and track their progress through problem-solving streaks.

5. Core User Flows

• User lands on the index page -> Clicks "Enter" -> Redirected to login page -> Logs in using OTP/Google/GitHub -> Receives welcome email -> Accesses course selection -> Chooses course and difficulty -> Solves problems -> Streaks updated daily.

6. Visuals Colors and Theme

• primary: #1E90FF (Dodger Blue)
• primary_light: #63B8FF (Light Sky Blue)
• secondary: #FF6347 (Tomato)
• accent: #32CD32 (Lime Green)
• highlight: #FFD700 (Gold)
• bg: #F0F8FF (Alice Blue)
• surface: rgba(255, 255, 255, 0.9)
• text: #000000 (Black)
• text_muted: #696969 (Dim Gray)
• border: rgba(0, 0, 0, 0.1)

7. Signature Design Concept

The homepage of "KarthikCodes" will feature an interactive 3D animated logo that users can manipulate by hovering over it. The logo will rotate and change colors dynamically, creating an engaging entry point to the site. Upon clicking "Enter", the logo will animate into a portal effect, transitioning the user to the login page. This concept will be implemented using @react-three/fiber for 3D animations and framer-motion for smooth transitions and interactions.

8. Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, providing a layered depth effect as users scroll. This will be complemented by animated transitions and hover effects on interactive elements, enhancing the user experience. Internal pages, such as the dashboard and settings, will adopt a "static" model for clarity and ease of use.

9. Non-Functional Requirements

• The website should load within 3 seconds on standard broadband connections.
• The system should handle up to 10,000 concurrent users.
• Ensure data security and user privacy, especially concerning login credentials and personal information.

10. Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB
• AI Models: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The website will primarily target users in India, considering local preferences and internet speeds.
• The platform will be accessible on both desktop and mobile devices.
• The system will use email services compatible with Gmail for sending notifications and alerts.

12. Glossary

• OTP: One-Time Password
• CSS: Cascading Style Sheets
• 3D Interface Elements: Interactive components that provide a three-dimensional visual effect
• Responsive Design: A design approach that ensures the website functions well on various devices and screen sizes.