Kognit Flashcards: Memory That Lasts

Fast forward with help of AI (total about 20% now I’d say)
time to ship or else…

Plethora of things and low time so…

This is the commit message and yes it was written using AI:

Completed Library UI Polish, Global Card Workflow, and Layout Refinements

[Feature] Centralized AddCard Modal into Library.tsx

Refactored AddCard from an autonomous component into a controlled modal matching AddShelf and AddDeck

Linked all three modals to Library.tsx which now manages visibility, edit state, and API calls

Wired the FloatingReviewPalette’s “New → Card” button to emit open_add_card via DeviceEventEmitter

[Feature] Uncategorized Card Support

Cards can now be created without assigning a deck (deck_ids sent as empty array)

Added Uncategorized Cards section to Library with horizontal scroll

Removed Image card type from AddCard modal (Basic and Reversed only)

[Feature] Library Sticky Header & Scroll Architecture

Converted MainContentContainer from ScrollView to static View wrapper

Moved scrolling into inner ScrollView within Library for sticky header behavior

Added bottom padding to clear FloatingReviewPalette on all devices

[UI] Library Section Containers

Each section (Shelves, Uncategorized Decks, Uncategorized Cards) wrapped in its own container

Desktop uses activePalette.bg background, Mobile uses activePalette.bg2

Mobile grid boxes reduced in size (140px vs 220px desktop)

[UI] FloatingReviewPalette Glassmorphism

Added frosted glass blur layer (activePalette.lightest 50% opacity) to Review and New pills

Added matching blur and stroke to the New menu dropdown

Mobile header row forced to single-line layout with reduced vertical padding

[UI] Dark Mode Icon Contrast

ShelfCard icon backgrounds use 40% opacity in dark mode vs 20% in light mode

DeckCard customBg prop added for context-specific background overrides (e.g. inside ShelfDetail)

[Fix] Resolved phantom gray rectangle behind Library

Re-applied TransparentTheme to NavigationContainer in AdaptiveRouter.tsx

Loading spinner centered with paddingBottom offset to account for FloatingReviewPalette

[Fix] Library data reactivity

DeviceEventEmitter ‘library_updated’ event pattern for cross-component data refresh

DeckDetail listens for library_updated to refresh cards when changes occur elsewhere

• Updated icons to add shelf
• Fixed name rendering in TopBar
• Add deck, bug fixes, UI improvements
• Added missing setsession update in AuthContext to ensure API calls trigger successfully after login.
• Added isSubmitting visual feedback to AddShelf and AddDeck modals.
• Fixed React duplicate key and ionic icon name bugs in Deck modal.
• Wired global DeviceEventEmitter to FloatingReviewPalette for seamless Deck/Shelf creation overlays.

Multiple images attached

This devlog message is an understatement to how much I’ve done but okay…

• Implemented fully working shelf modal, confirm modal with put and delete operations and fixed shelf and deck serializers
• Saving currentScreen to remove the default dashboard to ensure smooth window resizing experience

MainContentContainer and multiple minor updates

• Added animation to splash screen for better ux
• Removed “Do this later” button in RegisterProfile for now
• Implemented scrollable, reusable, responsive MainContentContainer and embedded it into BottomBar/Sidebar for Mobile/Desktop Layout

Added profile completion guard logic using AI
Added modal for more menu in bottom bar to render on top of top-level element floatingReviewPalette
Implemented AdaptiveRouter, code cleanup
minor fix for content area center alignment of floatingreviewPalette

Dashboard collapses on small desktop layout

this was very hard to implement without disturbing other elements.

see commit history for changelog

because I’m extremely low on time

Implemented Desktop Sidebar

Low on time so shorter devlog, shorter commit, etc.
Check devlogs on github.

Bottom bar, responsiveness improvements & more!

• Added most icons I’ll need
• Improved mobile reponsiveness and layout of TopBar and FloatingReviewPanel
• Implemented Bottom Bar and More menu in bottom bar (for mobile only – cuz that’s the plan)

Changelog

• https://github.com/aishwaryarana819/KognitFlashcards/commit/cb07add3344f1d3a794dc3d120b1c06d9fe772fc
• https://github.com/aishwaryarana819/KognitFlashcards/commit/967db0440172c8c205cfb609c534b9f21cc702ae
• https://github.com/aishwaryarana819/KognitFlashcards/commit/9b94e26d0a665a6d3715c3c75a6ba3a8d11d3454
• https://github.com/aishwaryarana819/KognitFlashcards/commit/967db0440172c8c205cfb609c534b9f21cc702ae
• https://github.com/aishwaryarana819/KognitFlashcards/commit/cb07add3344f1d3a794dc3d120b1c06d9fe772fc

Implemented the beautiful, universal floating review palette and necesary shadow utilities.

Changelog

https://github.com/aishwaryarana819/KognitFlashcards/commit/b94a42ee857e5b38026f4958e597d186774c0868

Reusable Coming Soon Page, Beautifully perfect TopBar, Shadows, Variable Additions

• Implemented a reusable coming soon page for screens which won’t be released in version 1
• Added a color and multiple fontWeight variables
• Implemented NavigationTypes with React Navigation parameter list
• Updated routes
• Implemented shadows file with inner shadow and icon shadow. It’ll be applied to everywhere as per my UI designs
• Completed the entire beautifully replicated TopBar
  – It is completely responsive and actually looks cool (at least to me)
  – The dark/light mode toggle works flawlessly

And yeah people, it takes time….

• to match every pixel, shadow, offset, padding and whatnot as per the UI design.
• It took me a significant amount of time to figure out shadow
• and it still isn’t exactly as per my UI design but nobody will notice that.
• It’s already been a long devlog and yeah,… I’m short on time… only 2days to go :panic:

Changelog

• https://github.com/aishwaryarana819/KognitFlashcards/commit/90b818ec2889537a747e53402ad9f89370667a98
• https://github.com/aishwaryarana819/KognitFlashcards/commit/864fed174c16e4075b2632cf3bf6e889dd6aa101
• https://github.com/aishwaryarana819/KognitFlashcards/commit/f5cd70c042864da103bb1745300204bcc3b43ae7
• https://github.com/aishwaryarana819/KognitFlashcards/commit/eb2f2febd50771f78676526bb340432de8545ca5

Flashcards schema, profile sync & login via password ++

Very short on time to make every devlog detailed… sorry!!!!!

Changelog

• https://github.com/aishwaryarana819/KognitFlashcards/commit/ccc89aae22550dd526ef8e0f3daf1d1d213714e3
• https://github.com/aishwaryarana819/KognitFlashcards/commit/5a485b4775d17ece62ff39b8d252c1a28d977869
• https://github.com/aishwaryarana819/KognitFlashcards/commit/f457a6432f12ef0460e879eefbbb227106e21eba
• https://github.com/aishwaryarana819/KognitFlashcards/commit/7e90f8cc02c065d3c0c4935d161b8f536b6f6a69

A plethora of changes here

Fixed several bugs, see all in the commit (link attached below)

Backend Debugging, see all in the commit (link attached below)

Implementations

• I’ve finished setting up the login and signup pages so you can just use a quick code sent to your email to get in.
• I built a “forgot password” flow that lets you use a recovery code to verify who you are and set a new password if you get locked out.
• The “Save Profile” button is officially working, so it now sends all your info to our server and makes sure your login stays updated.
• I made the username box a bit smarter by having it check if a name is taken while you type, but it waits a split second so it doesn’t feel jumpy.
• You can now log in using HackClub—it works just like a Google login where you click a button, confirm it’s you, and it drops you right back into the app.
• I added a way to skip the profile setup for later, so you can just head straight to the dashboard if you aren’t ready to fill everything out yet.

Changelog https://github.com/aishwaryarana819/KognitFlashcards/commit/a0e7dfd9a42b8f79ba8f501916bdaff07262dd96

Implemented identity and auth handshake.

• Establish middleware to locally decode and validate Supabase auth tokens using PyJWT, safely projecting to the request object.
• Define a custom Django model mapped one-to-one with the native and explicitly tracking the 128-bit Supabase generic , Region, and Domain.
• Expose for <10ms real-time frontend availability validation (regex + db query).
• Build idempotent syncing engine that safely creates or updates local User/Profile records from the React Native Page 3 registration payload.
• Architect custom HackClub OIDC Bridge : exchanges auth code for id_token, provisions an ephemeral secure password, maps identity via Supabase Admin API, and dynamically mints a client-ready session token to circumvent the lack of native Supabase OIDC UI toggles.

Changelog

https://github.com/aishwaryarana819/KognitFlashcards/commit/e2204a2437e0fc452c783247cc489484893f98f7

Routing, Fixes, OAuth updates & Google Login Delay

• Google Login will not come for this version (will not come for ft reviewers) because I am unable to proceed with google console’s payment no matter what.
• Fixed email validation across components.
• Added password match guard in account recovery
• Added alerts to inform users that Google Login is coming soon. This happened because I’m unable to proceed with google console’s payment no matter which payment method I try.
• Implemented auth screen states in App.tsx for basic routing (can be seen in video)
• Updated HackClub’s OAuth App and updated credentials
• Setup OTP Expirations, Rate Limits & email OTP Templates.

~30m untracked time here (just mentioning)

Changelog:

• https://github.com/aishwaryarana819/KognitFlashcards/commit/e48e1c7af10feada0f437dbae9de4bafcba87449
• https://github.com/aishwaryarana819/KognitFlashcards/commit/e2c5f9122692f93083c90e5c6035046f4a9512c9
• https://github.com/aishwaryarana819/KognitFlashcards/commit/4c02e9dc0b5cc0336196de1cb91c8ec3b71fc1c2

Implemented Account Recovery component

Changelog Here: https://github.com/aishwaryarana819/KognitFlashcards/commit/b091e073207009a12cc86aa77b74faa4f01b1c89

• I copy-pasted a lot of things from existing files.
• Yet it took me a decent amount of time because it takes a lot of consideration & effort to make everything perfect for the user.

My intention of developing this is not to ship in ft but to make it a full-fledged genuine product for learners to use & improve their memorization experience.

Implemented LoginOptions.tsx & Minor improvements in Register…

Changelog:

• https://github.com/aishwaryarana819/KognitFlashcards/commit/0fbe689eba0d3676bec9b26ed998bc0c93dec228
• https://github.com/aishwaryarana819/KognitFlashcards/commit/aac56c8198513b1a1c4da1b7bbd474e0dcfa8542

This was quick?

• I copy pasted RegisterOptions.tsx content into LoginOptions.tsx, updated what was needed and added what was lacking.
• I also fixed browser focus ring in registeroptions
• Removed centralized AuthHeader (in App.tsx) and added it to all components for a customized, accurate view.
• Other small fixes here & there.

Profile Details page complete. Fixed bugs. Made UX good. Paid attention to minor details

Changelog Here: https://github.com/aishwaryarana819/KognitFlashcards/commit/e131ca72df05dd7a57e09a2658821f863e5ec1e7

Nearly built the user details section (register page 2/3 – whichever you wanna consider it).
I don’t like the modal; gonna switch to traditional dropdown; will need more time.

Implemented register using email’s email & otp states in a flawless manner while maintaining, if not enhancing the UI beauty.

Completed Registration Page 1 & Updated TabTitle

• Updated TabTitle to KognitFlashcards in App.json from default “frontend”
• Theme toggle
• Used custom svgs for google & hackclub icons (built using AI)
• Implemented awesome responsiveness.
• Minor updates in breakpoints and typography.

Registration Page; Changes will be made.

Built theme toggle, branding, auth header and more! Details below:

Initialized Supabase with AsyncStorage for Auth

• Installed @supabase/supabase-js, @react-native-async-storage/async-storage, and react-native-url-polyfill.
• Created lib/supabase.ts
• Configured auth to use AsyncStorage
• Enabled autoRefreshToken and persistSession

Implemented Global AuthContext and session expiry logic

Icon Update, Branding & AuthHeader

• Updated icon files: favicon, icon, etc.
• Minor update in typography variables.
• Built a reusable, scalable Branding component and svg support
• Built the AuthHeader component with branding, theme toggle and an action button.

Implemented Splash Screen & Theme Context

• Minor updates in darkPalette in colors
• ThemeContext for handling isDark and activePalette
• useColorScheme for system preference
• Updated Branding & AuthHeader to use useTheme context

I have 10 days to built this massive project (massive for my level and time left for ft)

I have made 3 commits covering the initial basics:

• Initialized and setup project for backend using python django and frontend using react native. Setup env files to use supabase from cli in ide.
• Installed fonts, setup typography, color & breakpoints variables.
• Installed navigation dependencies, setup routing structure and babel plugins.

I’m ashamed of this devlog
But an update was due so here we go:

I used a plan from Antigravity to follow and code but that did not work out at all.
I have decided to cut my losses and not waste any more time
and thus, discard the code & restart.
However, I’m on a break atm and will be back soon.
I’ll try my best to make the most out of this project and keep sending detailed updates here.

The UI is still great and will be valid. I have attached the UI’s image again because it’s mandatory to attach something and I didn’t know what else to attach…

Next Step: Coding

Designed Library Section to an extent.
Since I have designed enough to understand the design language of my app msyelf and get an overall idea about how & where things should be, I’m halting the design process for now to save time as I must ship before 31st march… not much time left to code.
At the very least, I’ll code the back end logic for card creation, review & dashboard elements and ship a partial but in a way, complete & good project.

I’ll come back at times when needed.

Multiple things this time.

• Made refinements to the dark mode styles.
  Designed:
• card drop down
• card review (front)
• card review (back)
• create card (front)
• create card (back)
• create deck
• create shelf
• scratchpad
• tested these designs’ modified version for mobile layout
• added flow to try, test & get feedback from friends

IMP NOTE for Reviewers: The next devlogs will only be major ones to avoid devlog clutter.

In this Devlog:

I designed Dark Mode by learning more about variables, setting up new values & making a few manual modifications
Don’t mind the cut-off search bar in the attachment. I’ll fix those things when I’m coding and make it responsive.

Mini Milestone: Completed Dashboard for Mobile

These are for light mode only, dark mode is yet to design.
Also, the designs are not responsive. I don’t find the need, for now at least.
I’ll most likely add responsiveness when I code.

Milestone: Dashboard Design Complete

• Improved streaks
• Improve mini-analytics
• Added “today at a glance”
  – The round progress display took me over an hour to figure out (I tried a couple of things – all complex to design at my level)
• Added Scratchpad
• Changed the overall Dashboard layout

Major Leap on the Dashboard

• Updated Views (Today, Week, Month, All Time -> 7 Days, 30 Days, All Time)
• Updated color for selection on views
• Revamped mini-analytics so that it feels like the dashboard
• Completed streaks panel
• Changed Search Text
• Added red & green color variables
• Minor changes in alignments in some places

Completed Mini-Analytics on the Dashboard & Started Building the next: Streak

Minor Update

• Updated font variable & re-aligned what was needed.
• Centered Search with the dashboard screen. Shifted views accordingly
• Further refined action buttons

This devlog contains ~2hrs of time which should have been added in the last devlog; it couldn’t due to a lapse error I was facing.

Anyways, so in the rest ~2h18m, in ~60% of the time, I added the two action buttons which are one of the most important and will be consistent across multiple sections of the app. I completely redesigned the buttons twice and tampered a lot with it to make it look good. It’s still not up to the mark imo tbh but it’ll do for now. I spent the rest of the time enhancing some icon effects for the sidebar & updating variables.

Updated top navbar & completed sidebar (Missing 2hr to be added in next devlog due to lapse error)

• Added & updated color, font & size variables
• Refined layout
• Added feedback for buttons & current selections
• Added shadows & blurs for better aesthetics
• Updated colors across typography, subtle but powerful (imo)
• Separated branding area
• Have created three variants of icons for theme selection (system, dark, light)
• Planned sidebar content in detail
• Have created two variants for every menu option except theme, one variant to display while it is selected (active) and another while it’s not selected (inactive)

Feedback is welcome.

Attachments: Some Planning + Paper Wireframe + Hi-Fi Figma Prototype (so far)
Don’t mind my handwriting :melting_emoji:

After abandoning the last design structure and pivoting to a new one, I have made some progress with this.

This time, before beginning, I did some paper prototyping (wireframing).
So far, I have:

• Completed wireframing
• Started in figma
• Completed the top nav bar (common for all app sections)
• Completed the view options (common for analytics & most likely dashboard)

Next Step: Making the sidebar

The last dashboard style (as in attachment) wasn’t exactly what I was looking for.
Designing this gave me a lot of design insights and helped me learn more in Figma.
….
I’m pivoting towards a slightly different concept, inspired by insights from the last one & feedback from friends & cousins. – which you will see in the NEXT DEVLOG.

I’ve been progressing with the designing – wireframing + some colours for less strain on my imagination.
I’m currently wireframing the dashboard (homepage) of the app. – So far so good.
..
It’s been slow because I’m still learning Figma. There’s a landslide of a difference between my first & this (3rd) project but it’s still not fast or efficient or where I want it to be.
..
Anyways, I’ve added some attachments for anyone who wants to check it out.
Feedback/Critic is always welcome & appreciated!

Since voting resumed, my first published project has received repeated feedback for more frequent & more detailed devlogs so I’ll be following that now.

I have now:

• created wireframes (with some detailing & images as well) for onboarding pages – though it’ll need refining at later stages
• have been simultaneously creating one for desktop size (macbook air) and one for phone (iPhone 17)
• created some images using gemini for an onboarding page – have mentioned in the main AI Usage part of the project as well.

Honestly, I myself feel this work is kinda sloppy.. idk… let’s see.
Feedback is always welcome, of course.

NOTE: The attachments are widely zoomed out to not reveal too much and also, save myself from embarrassment :melting-emoji:

I have:

• created more exportable & usable logo, icon sizes with transparent & non-transparent options.
• created typography variables.
• written down a release plan (thus, the development plan).
• created the promotional website sitemap.
• created the app userflow map (for first release).
• written down some architectural points (based on my limited knowledge).

I did all of this in Figma, while also learning it.

I have now moved to wireframing and have created designs for registration page, login page & account recovery page for both desktop and mobile.

The feedback I received from people around me was not as good as I was expecting.
Made some tweaks to the design.

Feedback is welcome!!!

I have completed making the logos, icons in different export sizes (16x16, 32x32, 64x64, 256x256, 1024x1024 – for now).

This is the third app I’m working on and I can see that my design is improving.
This time I took care of the minute details too; I have learnt that the little tweaks matter more than I thought.

I’m open to suggestions, critics & applaud!

I am finally starting work on the first project I created on flavortown.
I have created the favicon and created exportable for different dimensions.

Next Steps are creating the complete logo and adjusting for a dark icon.