PROJECTS .

🛠️ Technical Stack Frontend (Modern & Dynamic) Framework: Next.js (App Router, React 19) Language: TypeScript for robust, type-safe development. Styling: Tailwind CSS with PostCSS. Animations: Framer Motion and tailwindcss-animate for smooth, premium transitions. UI Components: Radix UI (Accessible primitives like Dialogs, Tabs, and Selects). Lucide React for a clean, consistent icon set. shadcn/ui inspired component architecture. Themes: next-themes providing full support for Dark and Light modes. Backend (Robust & Fast) Framework: FastAPI (Python) for a high-performance, asynchronous API. Database: SQLite for lightweight yet powerful data persistence. Hosting: PythonAnywhere deployment for the backend services. Utilities & Best Practices Data Fetching: Hybrid approach using Server Actions, standard Fetch API, and Axios. Form Handling: React Hook Form with Zod for strict schema validation. SEO: Comprehensive metadata strategy including OpenGraph, Twitter Cards, and JSON-LD schema for search engine dominance. ✨ Key Functionalities 1. Dynamic Project Showcase A sophisticated gallery that pulls live data from the FastAPI backend. Search & Filter: Users can search projects by keyword or filter by technology tags. Server-Side Rendering: Optimized performance with data revalidation every hour. 2. Interactive "Execution Pipeline" Terminal A unique, developer-themed section that simulates a terminal environment. It showcases technical principles and workflows in a visually engaging way, reinforcing the "engineer" persona. 3. Performance & Evolution Tracking Live Stats: Real-time metrics reflecting project growth and impact. Interactive Timeline: A visual representation of technical evolution and professional milestones. 4. Network Background Design An advanced UI feature (NetworkBackground) that provides a persistent, tech-inspired visual layer throughout the site, enhancing the premium feel. 5. Professional Service Offerings Dedicated sections for specialized services, allowing potential clients or employers to quickly understand the value proposition. 📈 SEO & Performance The project is built with performance in mind: Image Optimization: Uses Next.js next/image for responsive, lazy-loaded assets. Dynamic SEO: Page titles and descriptions are dynamically updated via the backend API to ensure each project is indexed correctly. Accessibility: Built on Radix UI primitives to ensure the portfolio is usable by everyone.

This project consists of the creation of a comprehensive 'dynamic website' designed to meet the digital needs of educational institutions, such as primary schools, high schools, or educational institutes. The primary objective is to provide a modern platform that allows institutions to enhance their image, manage student enrollments, publish schedules, share galleries, and facilitate communication between the administration, students, and parents. Key Features : The platform offers a professional showcase with several essential modules : + Multilingual Interface: The site is fully available in three languages: French, English, and Arabic. + Enrollment Management: A dedicated online form allows parents and students to submit registration requests easily. + Academic Organization: Secure publication and consultation of 'class schedules' by level and grade. + Secure Admin Panel: An intuitive dashboard allows staff to manage all site content (news, photo/video galleries, messages) without needing programming knowledge. + Communication Tools: Integration of features for testimonials, newsletters, and a direct messaging system to stay connected with the school community. Technical Stack : The project is built on a 'Full Stack' architecture using modern technologies to ensure reliability and scalability: + Backend: Developed with 'Python' using the 'Flask' framework. + Frontend: Responsive interfaces crafted with 'HTML5, CSS3, JavaScript' , and the 'Jinja' template engine. + Database: Data management via 'MySQL' utilizing the 'Flask-SQLAlchemy' ORM. + Development Tools: Built using 'VS Code' , 'XAMPP' (Apache local server) , and 'StarUML' for technical design. Live Demos : The project's live implementation can be explored through the following links: + Web Application: ( https://zakariaouchttou.pythonanywhere.com ) + Admin Interface: ( https://zakariaouchttou.pythonanywhere.com/admin ) + Credentials: Username: 'programmer' Password: 'programmerOuzak'