Taha Ctw

🛠️ Devlog #2 – Full Platform Completed 🎉
Date: July 25, 2025

✅ What I Accomplished:
I’ve officially finished building and launching the full React Academy platform! Here’s what’s now live and working end-to-end:

🧩 Core Features Completed:
Landing Page: Dark-themed, bilingual hero section with smooth CTA buttons and animated elements.

Authentication: Supabase-powered login and registration (email-based), fully styled and secure.

User Dashboard:

View/edit profile (name, bio, avatar)

Tabs for Settings, Gift History, Messages, Courses, and Books

Arabic and English layout switching (RTL/LTR)

Books Page:

Pay What You Want (PWYW) pricing system

Admin panel to upload books with minimum price enforcement

Dynamic ownership tracking per user

Courses Page:

Telegram-based course flow

5 courses unlock in sequence as user completes each

Admin can update course info and links

Admin Panel:

Upload/edit books (title, price type, min price, cover image)

Manage all 5 course cards

Set validation and feedback messages globally

⚙️ Tech Stack:
Frontend: React + Vite + Tailwind CSS

Backend & Auth: Supabase (Auth, Storage, Database)

Payments: Paymob Integration

Deployment: Vercel

Design: Custom UI with dark theme, RTL support, and responsive layout

🧠 Challenges I Overcame:
Building a fully dynamic bilingual site while maintaining consistent UX

Creating a seamless user flow from login → dashboard → book/course interaction

Implementing Paymob + Supabase validation across PWYW logic

Admin dashboard UX for fast updates without breaking production content

🛠️ Devlog #1 – Launching the Snake Game on GitHub Pages

Date: July 24, 2025

✅ What I Accomplished:
Deployed a classic retro Snake game as a fully static site on GitHub Pages!

Styled with a nostalgic CRT aesthetic using glowing green and red tones.

Game includes three difficulty modes: Easy, Normal, and Hard.

Added a visible score and high score tracker.

Smooth Game Over overlay with replay button.

Simple controls: arrow keys to move, spacebar to pause.

Works seamlessly across desktops and mobile browsers.

🔧 Stack Used:

Frontend: HTML5 + CSS3 + Vanilla JavaScript

Deployment: GitHub Pages

Assets: Custom pixel art and 8-bit inspired color palette

🧠 Challenges Faced:

Tuning the grid-based movement to stay pixel-perfect across screen sizes.

Ensuring Game Over logic doesn't trigger multiple times.

Debugging issues with touch controls on mobile (future fix).

🚀 Next Steps:

Add touch/gesture support for mobile devices.

Save high scores using localStorage.

Animate the snake death sequence for smoother UX.

Add background music and retro sound effects toggle.

Create a difficulty unlock system based on score thresholds.

🛠️ Devlog #1 – Launching the React Academy Homepage
Date: July 23, 2025

✅ What I Accomplished:
Built and deployed the landing page for React Academy!

Designed a minimal, dark-themed hero section with a dual-tone animated title and clean CTA buttons for Books and Courses.

Added three key features below the fold to highlight:

Community Learning

Expert-Led Courses

Digital Library

Footer includes links to social media and legal pages (Terms, About, Contact).

Implemented basic RTL support for Arabic in the top nav bar.

Responsive design across devices.

🔧 Stack Used:
Frontend: React + Vite + Tailwind CSS

Icons: React Icons

Design: Custom layout with soft colors and hover animations

🧠 Challenges Faced:
Making sure the bilingual layout didn’t break responsiveness.

Tuning the color contrast for light readability while keeping a sleek look.

Balancing minimalism with enough visual interest for first-time users.

🚀 Next Steps:
Add login/authentication integration via Supabase.

Hook up real dynamic book/course data.

Enable animated transitions between sections.

Track visitor interaction with basic analytics.