Abdulgafar Abdurrasheed

Speed development Up, by using AI to Add a tutorial On how to use the App, So i can submit for the Lockin Sidequest. I will still Do my own Tutorial, and Discard the AI tutorial tho, But yeah.

replaced console logging with logging on my app’s console object

Wired all components to the App component. We now have everything working, YAY. Now to add a tutorial, and Ship.

Added right Click context menu. Right click anywhere on the canvas to quickly add Node, Delete Nodes, e.t.c., Equipped with a search bar too

Added The Top ToolBar Component. Here, you can clear, fit screen, and do a lot of cool stuff

Added Array nodes, More math nodes, and string conversion Nodes. All with their functionality ofCourse

Added loops Nodes, and Logic. For loops was pretty easy. While loops However………
Anyways, the only reason i’m even this fast is cause i took a 3 day Break to actually learn how this would work exactly. And it’s paying off.

Added conditional statements Nodes, and Boolean literals.

Rewrote the entire Node rendering, and line connector Logic. Had a problem with the Nodes not connecting, and rendering far Off of what i am trying to render. Had to re-write the whole logic to fit the UseCase

Completed addition of different nodes, And categorising them. I currently have 5 nodes. Still working a=on wiring and functionality

Added Addition node, for mathematics category. Before there was only print node.

Added print Node Functionality. Now, when The run button is clicked, and it senses a print node, It just console.logs something.

Added wiring logic. This is how we would connect nodes to one another

Added a node(That’s what i’m going to be calling my blocks of code). A printing node, That does nothing yet. But drag, move, and drop

Initial project scaffold. Don’t have stuff to show yet.

Changelog

• ux improvement
• Added Video export option, and improved topBar UI design

Changelog

• Added image background importing
• feature: Svg export

Changelog

• feature: Svg export
• Built a zoom calculator/display

You can now Export your Art as SVG or PNG, and Know your zoom percent.

Changelog

• Added sounds.

Changelog

• Tweaks and Updates

Changelog

• feat: add interactive keyboard shortcut guide component and integrate into application UI

Changelog

• added comment backend function
• Added a comments backend function
• Added playback function

Comment Section Now works for each mandala.

So now you can view every mandala, Like a mandala, and click on a mandala to drop a comment.

Changelog

• Added playback function

You can now draw, click the Timelapse button, an watch your art redraw itself stroke by stroke

Changelog

• Added square grids.

To improve Drawing Accuracy i guess. All drawing apps have this, so i added it lol

Changelog

• Tweaks and updates
• Added eraser brush type

Added an eraser brush type. Cancels stroke, Mandala style. Also Tweaked some Lint errors and typos

Changelog

• Tweaks, Updates, Bug fixes
• still has horrendous bugs, but i’m tired for now.

Fixed ugs. Globall gallery View now available

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d9ca6bc8-467c-46ae-97cf-1f943e368879-Screenshot%202026-01-07%20203003.jpg

Changelog

• still has horrendous bugs, but i’m tired for now.

I’m going to sleep. That’s enough work for one day 🙃🙃

Changelog

• modified Gallery hook to feature managing pages for each user
• Added Login with google feature

Changelog

• Added Login with google feature
• made collapsible/expansible components

Changelog

• made collapsible/expansible components

Made the layers/Tool platelets components collapsible to improve UI, and reduce clogging. A drawing app shouldn’t be clogged by Various components.

Changelog

• De-Aied, fixed contrast problems, and made better UI/UX all round.
• vote feedback fix: stopped page elements from stopping your drawings, and tried to De-AI a bit

Treating Users right, Fixing stuff Highlighted in User feedbacks, and improving User experience

Changelog

• Comleted global gallery feature to view and publish community artwork

You can now view artwork from other creators in the global gallery. Next up is: Comminity feedback(Comments, likes, maybe reshares), profile pages where you can see and manage all your own artworks, and authentication(Gives me the chills.)

Adde

Changelog

• Started implementation of a global gallery
• Added layering

Started implementation of a global Gallery, where each person’s Mandala is saved to a database, and everyone can see it(If they want..)

Changelog

• Added layering

Added layering logic. You can now draw on different layers, without them affecting one another. Lol

Added 3 different types of brushes. The standard “solid” brush, the Particle brush, and the pulse brush

Changelog

• Added different brush styles

Changelog

• updated the app to have pan and zoom

The app now zooms in and out with mouse control(scrolling for trackpad, and scrollwheel for actual mouse).

It’s till a tad bit buggy, Infact, a whole lot buggy, but it’s a devloggable uodate

Added brush Opacity control. You can now make your strokes lighter or brighter. Also added PWA architecture, so the app works offline.

Changelog

• Added custom color picker

Yeah, Just that lol

Rewrote the gallery to use IndexedDB with idb-keyval to remove the space limit. Now unlimited gallery items instead of the former 20. Have to fix the gallery to be aware of that tho/

refactored the undo/redo, to save line/stroke mathematics, instead of the whole page’s snapshot

Changelog

• Completely extracted 3 custom hooks from the app component, and wired them to the new app component
• Extracted the gallery logic to a custom hook
• created custom hook for Undo/Redo functionality.

Refactored the structure, and created custom hooks

Been coding for Jackpot, But then i decided not to, and came back here, Hence, No devlogs. What i have done tho:
Pitch
Player cards
Ball
Player cards moving with ball
Save state
Passing vision lines
HeatMap

I don’t think i can name it all actually. Anyways, more detailed devlogs from now i guess.

Changelog

• Fixing graph UI
• Make graph curvy, rather than point at the edges.

I’m honestly tired of trying to make the graph look better, so this would have to do. was going for @Hridiya’s utils graph’s look but when i checked her repo, she was using a graphing library, and i wanted to do the math and all of that myself. Turns out that was not the best of decisions eh? TCH.

Added Space theme. Paragraphs and color code.

Changelog

• Added forgotten line in BackgroundFX.tsx
• Add space theme and associated paragraphs

Changelog

• Added refresh button for memory optimisation
• Final fox. Hope this works
• remove unused TS declarations to unblock deployment
• Removed polling useEffect that caused my PC to crash cause it sent too many requests.

Polling for new data every 15 seconds was eating up netlify functions free tier fast, and i had to do something about it. First, i changed the 15 seconds time intercal by adding a crazy amount of zeros to it. It was a lazy fix. I thought that by doing that, my app would never send the request anymore. Turns out, it did the opposite. Javascript couldn’t understand an integer greater than 32 bit, and sent MULTIPLE requests within seconds(I think 4k in onnesecond lol) This caused my poor Computer to crash, so i had to find a way to stop it. My fix was to just add a refresh button to the LeaderBoard page, so leaderboard polling was more intentional, and better all round. I’ll drop images in my Readme, Make sure to check them out.

Changelog

• fixed graph bugs, and logic.

While still not completely Okay, I’m happy with this for now, and would come back to it later i guess. Still needs UI, and logic improvement

Changelog

• Updated from tracking with time, to tracking per character
• Moving graphing logic from time based to character based

Works Now i guess. The only problems are:

• The graph has too much space at the bottom. The graph should almost be touching the X-axes
• The Graph Line is too thin, and points are too sharp. Should be fatter and wavy
• It should also have it’s own page. The end screen can’t render all those components
• Still has bugs to be fixed.

Changelog

• Started building an interactive accuracy graph component

Got the Graph working, But it’s Buggy, and doesn’t work well. This is not entirely accurate, the fall point be the point that has the hoverable interactive red dot. I’m currently tracking based on the time it checks for accuracy, and that explains the inaccuracy, cause it might not get data the exact second the accuracy goes down. Now i think a better approach would be to plot the graph as “Characters” against accuracy as opposed to time against accuracy. Such that it tracks every correct character, and once there is a wrong character, it calculates the accuracy(Not get now, it calculates it itself based on how we already calculate accuracy), and plots it. Also, axes labels should be included i guess

Changelog

• Populated the paragraphs

Changelog

• Fixed all ghost tracker bug. ghost tracking now works perfectly.
• update ghost data structure and add paragraph count tracking

There were multiple errors in the ghost tracker/racer logic, and it was a headache to fix(a fun headace) First issue was when the ghost reaches the next paragraph before me, it literally disappeares. I think it might’ve been teleporting to its own different paragraph lol. Anyways, i found out that the problem was from the Ghost not knowing where to render after a paragraph finishes so it just crashes. My fix was to use a 2d, instead of 1d, which saves both the paragraph index, and Character index. That spectacularly failed tho, as Since the ghost saves paragraph information of the PB run too, when you have paragraphs of different lengths, it only counts the indexes of it’s own paragraph(wether first or second or whatever), and then moves on to the second paragraph. For example, say in the PB run, my first paragraph was 6 characters second was 13, and 4th was 7 and in this one, my first is 10, second 2, third 6. here is waht the ghost does. on the first paragraph of the current session, instead of coounting 10, it counts 6, moves on to the next paragraph, and the radar goes “Ghost is one paragraph ahead” Then when i get to the second paragraph which is just 2, compared to the 13 of the PB run, i get there, finish my own 2(probably see the ghos if it was slow to type those 2 characters before i caught up), and then i am 1 paragraph ahead, with the ghost still counting 13, cause that is the data it has. I don’t know if you understand me. Lastly, the fix was just saving every all keystrokes, and rendering it at the time it came. Don’t let me Bore y’all with details.

Changelog

• Ghost rendering already working
• initialised variables for a ghost racer feature

Implemented a Ghost racer/tracker Feature that tracks your current position/index at every millisecond, and saves it if you finish higher than your Personal best run(i.e. It tracks your position every millisecond for your personal best run). Then, in your current session, you have a ghost like stuff, based on your Best ever run, chasing you down. It is currently buggy tho, still fixing t, but had to devlog the progress.

Changelog

• populating the paragraphs
• populating the paragraphs
• confetti turned off by default

Spent the last hour actually populating the paragraphs for each theme

Changelog

• tweaks and updates. All milestones now follow current
• Makein the #1 follow the Now when the Now beats the #1
• scaling logic to the wpm bar
• completed wpm tracking bar
• made the leaderboard and heatmap render differently from the rest of the stuff on the end screen
• bug fixes

T’was a Long productive day. Got many things working, i’m glad. Added a WPM bar, and made the wpm bar now has labels that follow you as you beat your last score, personal best, and global best.

Changelog

• added keyboard heatmap that shows error keys
• added streak, and pausing with esc key
• fixing user review problems. added space validation, and brightened unfocused words

Added Keyboard Heatmap Viewing. You can now see which keys you missed, which keys you’ve mastered, and all of that, and share it with your stat Card

Changelog

• Added confetti toggle button

A former voter complained about the confetti being too much, and and others liked it, so I added a toggle button, that saves your preference to local storage.

Changelog

• more paragraph population
• Populating the paragraphs

Basically spending time researching the various themes, and populating the paragraphs. this is going to take quite a bit of time imo.
PS: the underwater easy paragraphs is just sebastian the crab’s “Under the sea” from Disney’s “the little mermaid” 😅. I guess that’s not what it’s meant to be tho. i’ll create a separate “Disney” theme later

Changelog

• added sharable stat card. Copy to share

I legit don’t know how this took 1 hour, but i guess some time from the last devlog carried over. Anyways, you can now share stat cards featuring WPM, Accuracy, and maxCombo to your freinds.

Changelog

• tweaks and updates
• feat: implement faux-live leaderboard polling
• fixed bug, and mad name change/update happen immidiately
• using uuid instead of ANON for users who haven’t changed name
• Rename useLeaderBoard.ts to useLeaderboard.ts
• fixing bugs, trying to deploy
• Completed the Leaderboard feature, and fixed CSS bugs that was hidinng the Overdrive Label
• add useLeaderboard hook for leaderboard functionality

Yeah…. The leaderboard is finally complete, and Boy was that Harder than expected. Spent 1 hour(untracked BTW) debugging why my netlify deploy with github repo wasn’t working, and finally saw that it was a Casing issue. Anyways, it works now, and i’m glad i’ve gotten that over with.

Changelog

• add useLeaderboard hook for leaderboard functionality
• implement leaderboard API

Changelog

• Redis integration for leaderboard integration

Started work for the addition of a LeaderBoard. Want to do this without signup/Auth, so the ides is: Each local storage is assigned a unique ID, that ID is stored in a database, along with the relevant stats, and anytime a person goes to the website, the stats saved in that localstorage’s ID will be loaded. I didn’t know how feasible it was, so i asked on Stack Overflow, and i goot really good, and helpfull answers. Was going to use vercel KV, but i guess redis upstash was better for me, since i don’t Host on Vercel

Changelog

• Ui updates.
• completed theming.

Theming Now complete. Every theme has Custom UI, and Paragraphs. Currently, it’s just background color, and particle changes.
I will add Sound changes, and probably an animated/video background too, but later.
I haven’t written the paragraphs. would probably take hours(I’m not just going to copy and paste paragraphs. That’s bad for hour farming 😅)

Changelog

• More custom theme styles.
• added custom CSS for each theme
• added theme selector to the Intro Overlay
• Added paragraph theming
• started integration of multiple theme feature.

Basically started the addition of custom CSS, and paragraphs per theme. currently supports 4 themes:

• Cyberpunk (The OG)
• Underwater
• Retro
• Fantasy

Haven’t wired the changes to the UI yet. Would do that by the next devlog i guess

Changelog

• Added difficulty selection to end screen, and added space clicking to move to the next word
• Add difficulty selection and adjust game mechanics for varying difficulty
• removed the line spacing that was causing mushy text

Basically added difficulty modes easy, medium, and hard. Medium introduces spaces and Case differences(upper/lower case). Hard introduces special characters, and Randomness.

Changelog

• completed gallery view feature
• gallery view
• Gallery save: 200×200 JPEG thumbnails to localStorage (max 20)
• Slide-out panel with 2-column thumbnail grid
• Delete artwork
• Gallery button in TopBar with cyan badge showing saved count
• Empty state message when gallery is empty

Changelog

• Separate the Guide Line rendering component
• added dynamic circle brush cursor
• added keyboard shortcuts
• 8 keyboard shortcuts
  • Ctrl+Z for Undo
  • Ctrl+S for Export/Download
  • G to toggle guide lines on/off
  • M to toggle mirroring on/off
  • N to toggle glow on/off
  • [ to reduce strokess
  • ] to increase strokes
• Ctrl+S overrides browser “Save Webpage” → exports artwork instead
• Dynamic brush cursor preview (size + color + glow matches settings)
• Extracted GuidesOverlay.tsx with center pivot dot

Changelog

• added toast component
• completed component separation
• Extracted ColorPicker
• Extracted BrushSlide
• Extracted SymmetryControl
• Extracted ToggleGroup
• Built Toast.tsx with auto-dismiss timer

Changelog

• Separate the tool palette component
• Separate the top Bar component
• Start splitting components, starting from the canvas
• Extracted Canvas.tsx
• Extracted TopBar.tsx
• Extracted ToolPalette.tsx
• App.tsx reduced from ~200 lines to ~80 lines of JSX

Changelog

• Add faint guide lines
• added toggle buttons for glow, mirror, and guides, added symmetry axes number changer
• Symmetry axes stepper. Steps of 2, range 2-32
• Toggle group Buttons for glow, mirroring, and guide lines
• DOM-based visual guide lines (excluded from PNG export!)
• Guide count adapts to symmetry count + mirror state

Changelog

• added brush change size slider to tooolbar
• add color picker
• added toolbar placeholder
• added Png export, and TopBar with buttons
• Floating glassmorphism toolbar at screen bottom
• Color picker
• Brush size slider
• Scrollbar-hide CSS for mobile overflow scroll

Changelog

• added Png export, and TopBar with buttons
• PNG export with timestamped filename
• Toast notification state for export feedback
• TopBar UI
• Undo button (disabled when stack empty, Lucide icon)
• Clear button (with undo safety net)
• Export button (white, glowing, hover:scale animation)

Changelog

• finished undo system. ctrl+ z for undo
• implement undo/redo
• saveState() snapshots canvas to data URL before each stroke
• undo() clears canvas, restores previous snapshot
• clearCanvas() wipes with undo safety (saves before clearing)
• Ctrl+Z / Cmd+Z keyboard shortcut for undo

Changelog

• added mirroring, and glow features
• Radial symmetry engine. strokes replicated N times around center
• ctx.translate + ctx.rotate math for center-origin symmetry
• Mirror reflection, doubles every axis
• Neon glow: canvas shadowBlur scales with brush size

Changelog

• Basic line rendering now working
• added drawing start and stop handlers, cleared the unnecessary hook
• create pointer coordinate extraction
• getCoordinates() unified helper mouse + touch
• startDrawing / stopDrawing lifecycle
• Basic single-stroke drawing engine
• Wired all 8 event handlers to canvas
• First visible drawing on screen!

Changelog

• create the canvas to fill the background, and add dimensions
• create the canvas to fill the background, and add dimensions
• add types and constants
• Project initialisation complete
• Installes tailwind and lucide-react
• Initialised the project
• Defined TypeScript interfaces
• Created color palette constant
• Set game defaults
• Built minimal App shell with all state hooks
• Initialized full-screen canvas with background fill

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d9ca6bc8-467c-46ae-97cf-1f943e368879-Screenshot%202026-01-07%20203003.jpg

made the tour available for anyone, signed in or not.
You don’t have to create an account to know what the project is all about now.

Changelog

• Added ending stat page, and removed some errors preventing build

Final Devlog before first ship I guess. I really hope this one does well, if not, I go just actually give up

• actual paragraphs
• reponsiveness styles
• Tweaks and Updates
• readme
• More tweaks and updates

Changelog

• More tweaks and updates
• Adding some styles, Bug fixes, Tweaks and updates
• add SpeechSynthesis callouts at combo milestones
• SpeechSynthesis combo callouts at milestone combos
• useSoundEffects hook wrapper
• Super Saiyan global CSS theme (green→pink color shift on everything)
• Scan beam pulse animation for OVERDRIVE word display

Changelog

• more sound effexts
• error buzz and word completion sound synthesis
• Add ‘Thock’ Audio

**Sounds added: **

• playThock()
• playError()
• playWordComplete()
• playSuperSaiyan()
• playGameOver()

Changelog

• added more intro styles.
• visual effects components added to app.tsx
• particle explosion system for completed words
• created the background canvas
• BackgroundFX canvas with floating particles and moving scan line
• word explosion system (dot + character particles)
• Intro overlay CSS
• Matrix rain CSS with columns of falling katakana with staggered timing

Changelog

• wiring all to App component

• intro sequence

• ame over screen with rank tiers

• EndScreen with 6-tier rank system (N00B → CYBERDEMON)

• IntroOverlay with 4-step tutorial

• Wired ALL 6 components into App.tsx

• Hidden input pattern for fullscreen keyboard capture

• Screen shake on error

Changelog

• Built Combo display/animation
• Built the animated health bar.
• Built the live stats display component
• StatsBar with animated WPM flip counter
• HealthBar with 3-tier visual escalation
• WordDisplay with character-level correct/wrong/cursor rendering
• ComboMeter with MAXIMUM OVERDRIVE rainbow cycling
• Level badge with spring pop animation on level-up

Changelog

• add end screen stats layout, rank display, and restart button
• input display and end screen card
• combo meter bar with super saiyan effects
• Word display container with glass-morphism
• Character states: correct (green glow), wrong (red shake)
• Combo meter bar with hot/fire color escalation
• MAXIMUM OVERDRIVE label inside combo bar
• Terminal-style input display with “>” prompt
• Complete end screen

Changelog

• add health bar styles and animations
• added base styles for the stat ber
• game header layout and neon logo glow
• added the theme/overlays with standard css
• app layout, and animations with standard css
• Adding UI to the game engine
• finished the Game engine Hook
• word completion detection, and moving on to a random paragraph
• get the user’s input, and check if it is correct or not

Changelog

• Now implement game start, and timer drain functions
• implementing game ending and timer stopping functions
• added sound refs
• cleared faulty GameEngine Hook
• started the project, created game engine hook, added base styles, added paragraphs

Worked on getting the game engine running. UI changes by the next devlog.

• Initialised the project, Creating Base Styles, and planning.
• Created complete folder structure (components, hooks, data)
• Defined GameState interface
• Tuned 7 game balance constants
• Wrote some of the cyberpunk-themed paragraphs
• Pre-split all paragraphs into word arrays

Added Delete account Function. A User can now delete his account whenever he wants by going to his profile, clicking the delete button, and tyipng “DELETE” in the modal that appears. Had to learn Edge functions for this.

Completed the first stage of the tournament. Now Ready for shipping. Fixed Bugs, Added a detailed tour, remade the Dashboard, added match logging feature, added tournament view page, and lot’s more.

Changelog

• added tournament details page, with tabs for navigation
• most unserious commit. Don’t mind this
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@cda431e555645772e324c372c47a2afbb94ce87e 🚀
• more tweaks and updates. Getting ready for a massive ship.
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@d5a1dff848b1e889146ea39f2798a1198c2290cd 🚀
• added bracket viewing for knockout competitions, more tweaks and updates
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@1a4081bc28da9a39b7ef1e2015ee77c50a01af86 🚀
• Fixed erreors, teaked and updated, and created the standings table
• tweaks and upsates

Completed the Core of the tournament creation. The tournament WIzard now accurately puts data into supabase, and set’s the stage for the tournament format and all. Also added a tournament card to show active tournaments on the Tournament Finding Page. Next, i have to create a page for a tournament’s details, and all of that. The tournament part of the project is almost complete.

Changelog

• added realtime subscription hooks for tournament updates and started the creation of the TournamentWizard component for tournament creation
• created react hook for Matches
• created react hooks for manager
• added react Query for Tournaments
• added analytics for the tournament. Highest goal scorers, Highest assisters, Form, Head to Head, e.t.c.

This was Such a genuinely productive part of the project overall. I added tournament state with zustand stores to prvent prop drilling hell, I implemented Match scheduling Logic, League tables, Tournament analytics, Highest Goal Scorers, Top Assisters, e.t.c.
The project might Just be ready for it’s first ship, But i need to clean up some stuff first. The Berger table logic was very interesting to learn tho. You guys should read about it. It contains algorithms like sorting, finding, Divide and conquer, e.t.c.

Loved this part Overall.

Started Tournament creation process. Implemented form validation using Zod, And added tournament database types.

Fixed bugs, and learn’t alot. Kinda tired, so forgive me if this is awfully boring. No UI update/Form yet, Just Behind the scenes stuff.

Deleted an 8 hour Devlog By Mistake 😭😭😭😭. AHHHHHHHHHHHH.

Learnt How to write test, wrote tests for the authentication process, that I have been working on for the past 30 hours( and Yeah. I’on like writing tests 😭😭). Fixed a bug that the test exposed, and yeah. This is currently in a good state I guess. Also integrates Sentry, and created an error boundary component. On fire 🔥🔥

Created a profile page(Users can now view and edit their profiles), added sentry for error tracking, and enhanced the UI more and more. Used framer motion to add more animations(I’m playing around with this a lot), and added responsiveness for different screen sizes. Reduced animations for mobile, with an option to remove them entirely. Fixed a Bug where Profiles refuse to update when an profile picture change is added(Just removed Profile picture changing for now, I’ll get back to it later.)

Have completed the Authentication UI. Users can now Login, Sign Up, and all that without any Problems. Used Framer motion for Smooth Opening of Authentication Modals. Finally Getting the Hang of Supabase, typescript, and the Frontend, Backend communications with one another. Going into creating tournament Features Now. Probably Gonna ship after the next Phase. I’d say i’m currently about 20% done with the whole thing, and in 40 hours is record time(Considering I’m just learning). Dealt with A LOT of typescript bug, and consulted AI A WHOLE LOT. But it’s all fine and good init? My Idea, My Code, My Project.

Created the UI for the Login, and Sign up pages, Connected it to the Backend, Added email confirmation link, Created the Routes to said pages, and Some more stuff. Had a heck of a problem creating a working supabase project that uses google OAuth.

Finished all Auth Processes on the Backend side of things(What is Featured in the image is just the testing Page.), Yay 🎉🎉. The next few hours will bring the authentication pages, and all of the cool UI side of stuff, And from there, we Cruise on.

As Someone who didn’t know a lick of Databases and their technicalities prior to this, Really Learning a lot. That’s why to the seasoned people, I probably look slow 🐌🐌(I asked around, and getting to where I currently am in the project, should normally take 10–>15 hours. It’s taken me 26 ☠☠). Anyways, Catch you Guys Later.

So, yeah. Started the project 😅