Khaled

I finally finished the game fixed most of bugs in the game. Created character choice screen. Also Created github deployment stuff.

I created The game using python, and since I haven't made any websockets or server for gaming, I started by creating singleplayer mode with basic AI bots to make the game playable : ), After everything worked I started implementing the server using simple python library called: socketserver and threading ofc.
Then made net_client in the game to finally support multiplayer and implemented an entry page to choose from singleplayer and multiplayer and now fixing bugs and adding more features.

When I tested my app I found some issues related to the player itself like what if the user want subtitle, what if they want a delay option for it, what about full screen mode, ui, etc ...

So I started to build my own custom video player specifically for Syncy.
- I made the a purple seek bar with burble timing 00:00/30:00
- Made the seek player functional
- Also Added full screen mode
- Added an option to set a translation from the phone using file_picker
- Added an option for translation delay or remove subtitle.

For subtitles part I made a fully custom decoder that analyzes the subtitle files and correctly insert in the UI with custom stylings.

Next I started working on a bottomsheet that shows users and if they online or offline, currently It shows users in the room when they join and if they are offline.
And connected in the room controller.

Next I made testing and found out issues related to entering and exiting full screen and fixed them, then finally tested on two devices and started to run on IOS, but found issues related to POD file and fixed them and now the app smoothly run on IOS and Android. There are a few issues that will be fixed in next devlog like:
- Screentime timeout (Will be fixed using wakelock_plus)
- Seeking not smooth (will be fixed by only triggering the seek function on user finishes seeking and make it above subtitle and more accessed in area.
- Parsing more types of subtitles.

🔧 Component Enhancements
GooeyBtn.tsx: Added onClick prop support.

Footer.tsx: Refactored backend references into a standalone footer component.

Layout.tsx: Created a simple layout to integrate with React Router.

NavBar.tsx: Improved anchor link scrolling and in-page navigation.

🎨 UI Updates & Fixes
ParallaxGallery.tsx: Resolved issues with anchor links.

SimpleGlassyBtn.tsx: Code cleanup and formatting adjustments.

Projects.tsx: Fully integrated with backend — now dynamic and interactive!

Icons: Added new SVG icons (msg.svg) for improved visual communication.

📄 Route Development
Certificate.tsx: Introduced a detailed certificate view.

Certificates.tsx: Created a separate view for showcasing all certificates professionally.

Contact.tsx: Developed a fully responsive contact form, integrated with backend.
Also made form validation using ZOD

🧩 Code Organization
icons.tsx: Consolidated and separated reusable custom glassy icons into their own module.

🧑‍💻 App-wide Improvements
App.tsx: Finalized About section, properly wired up routes, and optimized header/footer integration.

main.tsx: Connected new routes to the main app structure.

index.css: Added and refined styles for multiple components and UI features.

Backend:
- Added more models: Project, Certificate, SocialMedia
- Created new views for all of new models and serializers.
- Created Admin views.

• Created Footer
• Enhanced Notch watery effect.
• Enhanced some stylings.

• Created final home page section, which is About Section and make it in a simple beautiful way using flex system for full responsivness!

• Created Certificates section.
• Created A 3D Component for rainy bg effect and added more effects like clouds and snow.
• Optimized for responsive design and performance on different devices.
• Added Parallax effect for certificates and horizontal scrolling like a gallery.

• I transformed Many Icons into Glassy Icons (SVG).
• Created a glassy Component.
• Created a Skills Section responsive with magnetic effect on mouse hover and infinite scrolling.
• Made the new Section completely responsive
• Chose a nav Icon for it.

Making the notch a dynamic component and fixing width issues.

• I implemented fully responsive Projects Section.
• Created Card Glassy Design
• Created New 3D glassy btn.
• Created a glassy tab switcher.
• Created a glassy window element.

Finished Landing Section with adding of more components like:
- Watery text
- Glassy BTN
- Glassy Circular BTN
- Glassy Labels
- Notch NavBar with many kind of effects (Still in progress)

I started generating my first Mesh BG, Also I started the early Component styling to be like a water droplet.

• Created Join Room Dialog
• Updated Room Controller:
• Added joinRoom
• Added User ID Generation
• Added play function
• Added pause function
• Added Seek function
• Added Leave Function WebSocket Service:
• Added join, play, pause, seek, leave too

(In the Attached Video, Video Sync is done correctly, as I match the duration at each pause and play. Unfortunately, my device's performance isn't very good.)

• Fixed a routing issue when exiting room page.
• Fixed player issues.
• Started WebSocket Service.
• Added controls widget from documentation.

• Connected the create room bottom sheet to the backend.
• Created Room Controller.
• Created User Model and configured it to save the user's name.
• Created Room Model
• Added Snack Bars to indicate whether the user created a room successfully or not.
• Added FVP library to handle all video encodings.
• Created Room Screen with basic setup for now.

• Implemented Search Screen.
• Implemented a Good Searching Algorithm with the assistance of AI.
• Made a placeholder for broken thumbnails.
• Improved Media Card Accessibility.
• Implemented Create Room Bottom Sheet.

• I finished the Home Screen UI.
• Made Custom Bottom Nav Bar.

• Created a Thumbnail service to handle thumbnail creation and saving to the phone, also without blocking the thread in flutter or any crashes.
• Made db store media files to increase the speed.

Initalizing the home controller and finalized the first phase of models.

I started the Flutter app dev. Now The early models have been implemented. And made dir architecture ready.