FoldCheck

FINALLY!! FoldCheck is ready to ship!!! After so much time coding, fixing errors, testing stuff and adding new features, I’ve finally got FoldCheck to a stage where im happy with it! Since my last devlog, I’ve added a bunch of new things, including interactive 3D protein models, AlphaFold confidence analysis, PAE heatmaps, amino acid and atom information, functional regions and even comparisons with experimental protein structures! One of the hardest parts was definitely getting the 3D models to work properly, especially linking the scientific data with the actual protein structures. There were so many errors along the way, and sometimes fixing one thing would break another 😭 But I’ve learnt so much about proteins, AlphaFold, coding and how scientific software actually works! I also used AI throughout development to help with coding, debugging and understanding concepts I wasn’t familiar with, which was really useful! I did have plans for mutation analysis too, but I’ve decided to leave that for a future personal project rather than rushing it into FoldCheck. The whole point of FoldCheck was to show that just because a predicted protein structure looks accurate, it doesnt mean we should automatically trust every part of it! And now I’ve finally got a working tool that lets people actually investigate that!! I’ve also successfully uploaded the entire project to GitHub, which took a surprising amount of troubleshooting itself 😭 Anyways, im really happy with how far this project has come, and I can’t believe im finally saying this, but FOLDCHECK IS READY TO SHIP!!! 🧬🚀

Devlog 7: Since Devlog 6, I’ve made a lot of progress in expanding FoldCheck’s biological information and making the Region Explorer much more detailed. I started by integrating more data from UniProt, allowing users to explore annotated functional regions of a protein, including their names, residue positions, lengths and biological roles. One major addition was the ability to investigate protein interactions, where FoldCheck retrieves information about interaction partners, their functions, UniProt accessions and available experimental evidence. I also added supporting research references, including PubMed publications, and developed a system that connects biological findings to the protein being explored. A challenge I faced was making this information work dynamically across different proteins, rather than hardcoding information specifically for p53. I also had to fix several issues involving matching interaction partners, retrieving the correct biological information and preventing empty or repetitive sections from appearing. FoldCheck can now provide much more detailed explanations of functional regions and protein interactions, helping users understand not just the 3D structure, but also the biological evidence behind it. Next, I’m working on a dedicated PAE analysis page to help users investigate uncertainty in the relative positions of different parts of a protein! I know I said PAE last time but I got distracted.. MB!

Devlog 6: since Devlog 5, I’ve made a lot of progress into turning FoldCheck into a more advanced and detailed tool. I’ve started by extracting the pLDDT confidence scores for p53 and linking them, so they display in the details panel on the right, adding confidence classifications and explanations of what different confidence meanings. I also expanded the information to include amino acid properties, chemical composition and the function of the region. another major addition was the Atom Explorer, which provides information about individual atoms, including their chemical elements, bonds and roles, within a selected part. a challenge i faced was building a search system, where typing a specific residue/atom actually finds it for you in the Mol*, takes you to it and clearly highlights it for you. i devloped a 3-level autocomplete system that suggests amino acids, real residue positions and actual atom names (for example: ARG 158 CA) extracted from the loaded structure. Along the way, several bugs were encountered, like atom extraction and resetting selections. I also added a Reset View button and improved how the panel responds to selections. Foldcheck now allows users to explore p53 from the whole-protein level down to individual atoms while connecting the 3d structure to scientific explanations and confidence data. Next step, PAE!

Devlog 5: FoldCheck can finally interact with real AlphaFold structures. Today I worked on connecting FoldCheck’s interface to the actual molecular structure inside Mol*.I first changed the 3D viewer so it can load a real AlphaFold prediction for p53 (UniProt P04637) while keeping the original 1CRN structure as the homepage demo. The bigger challenge was getting clicks inside Mol* back into React. After working through Mol*’s interaction events, FoldCheck can now detect which part of the protein I click and identify the real residue, for example MET 384, PHE 270 or SER 269 on Chain A.I then connected that data to the FoldCheck workspace, so the Selection Details panel updates automatically when a different residue is selected. I also found an important UX problem while testing: clicking individual atoms can expose Mol* labels like CG [idx 1946] | LEU 252 | A, which aren’t beginner-friendly at all. I’m going to replace these raw labels with structured information and build a dedicated The Basics section that explains the scientific concepts used throughout FoldCheck. Next Ill be extracting the actual pLDDT confidence value for the selected residue and turning the selection panel into an actual evidence based analysis

FoldCheck has real 3D proteins now. Today I started building the actual interactive side of FoldCheck. I installed Mol* into the project and created a separate React component for the molecular viewer. I then connected that component to FoldCheck and built the first version of the 3D protein workspace. There were a few problems getting Mol* working with the project, mainly incorrect import paths and getting the package to work properly with Vite. After debugging those, I managed to load 1CRN, a real protein structure from the Protein Data Bank, directly inside FoldCheck. The structure is now fully interactive, I can rotate it, zoom in and explore it in 3D. The current Mol* controls are only temporary. I also decided that the finished FoldCheck won’t just be one massive scrolling page. Searching for a protein will eventually open a dedicated analysis workspace with separate sections for the 3D structure, confidence, PAE, geometry and experimental comparison. Next I’m going to turn this basic viewer into that proper workspace and start connecting FoldCheck to real AlphaFold prediction data.

Today I worked on one of the parts of FoldCheck I’ve been looking forward to building which is the opening cinematic. I wanted someone opening FoldCheck to understand why protein structure matters before being thrown straight into scientific data, so the intro now follows the story from the human body → cell → amino acids → folded protein → AlphaFold prediction → uncertainty → FoldCheck. The first few scenes use detailed scientific-style visuals with animated labels and transitions, and I built the whole sequence to automatically move between stages while still letting users skip it or replay it later. I also added progress indicators, subtle movement, responsive layouts and a final FoldCheck scene that introduces the different types of evidence the project will eventually bring together. I also learnt a slightly painful lesson about CSS today 😭. While rebuilding the cinematic styling I accidentally wiped the original homepage styles, which turned the entire landing page into basically raw HTML. After a lot of debugging, I reconstructed the stylesheet section by section, fixed several syntax issues, and finally got both the cinematic and the original homepage working together again with no errors. The cinematic isn’t completely finished yet. Some labels still need to be positioned more accurately, and the AlphaFold and uncertainty scenes currently use temporary protein graphics that I want to replace with much better molecular visuals. But the full journey now works from beginning to end, and FoldCheck finally has the opening story I imagined when I planned the project .Next: polish those last cinematic visuals, then start the big part which is loading real AlphaFold protein data and building the interactive 3D analysis workspace.

DEVLOG 2: Most of this session went into turning the rough interface from my first devlog into the actual visual direction I had in mind for the project. I built out the main landing experience with a much more deliberate scientific/workstation style. The hero now introduces the main idea behind FoldCheck that a protein prediction is only the beginning of an investigation and I added an animated molecular visual with orbiting elements, a scanning effect and subtle movement to make the page feel alive without turning it into a generic science website. I also built the protein exploration section, including the search interface and example proteins, and added a section explaining the main idea behind the project. Eventually I want every interesting region to be something you can actually investigate and understand. A surprisingly large amount of time went into CSS 😭. I worked on the typography, spacing, dark interface, responsive behaviour, animations, buttons, search components and all the smaller details that make the different sections feel like one product rather than separate pieces. I also cleaned up the React structure and fixed some mismatches between my JSX and CSS that were stopping parts of the design from displaying properly. The interface is still only the shell though. The next part I’m working on is an opening cinematic that goes from the human body → cell → amino-acid sequence → folded protein → AlphaFold prediction, which should explain why FoldCheck exists before someone starts using it. After that comes the part I’m most excited about: an interactive 3D molecular viewer.

Devlog FC 1: New project!! And this one might be slightly crazy I started FoldCheck today. The idea came from something I found really interesting while looking into AlphaFold (an AI that predicts how proteins look): a predicted protein can look incredibly convincing in 3D, but that doesn’t necessarily mean every part of the prediction has the same level of confidence/is biologically accurate. That gave me the idea for FoldCheck. Instead of just showing someone a cool-looking protein model or giving it some random “accuracy score”, I want to build a tool where you can actually investigate the prediction. My goal is to eventually combine things like pLDDT, PAE, structural checks and experimental structures, then let you click into suspicious regions and understand why they deserve attention.A lot of today was honestly figuring out how I could turn that idea into something I can actually build. I planned out the main features and the science I’ll need, then set up the React project and started the website itself. I built the navigation, introduction, protein search area, example proteins and started designing the dark scientific interface. I also spent way longer than expected getting Hackatime working because it originally thought FoldCheck was my other project!. I eventually figured out how to give this workspace its own FoldCheck project, and seeing it finally appear separately was strangely satisfying. There’s still a lot left. Right now I’ve basically built the foundation. Next I want to get a real protein into the site, retrieve actual AlphaFold data, display the structure in interactive 3D and start analysing real pLDDT confidence values. This is definitely the hardest project I’ve attempted so far, which is also why I’m really excited about it. Hopefully the difference between this first screenshot and the finished FoldCheck is crazy!