CodeAtlas

Guyss My code was rejected as I did not update my rewritten code on Netlify, and the old code was still showing. Therefore I have pushed my Rewritten code to Github, and Requesting for re certification!! AnD I had written the README BY HAND!!!! (Pls see the Hackatime attachments.) I had Spent more than 11 hours coding this just to be marked as AI!!, I only used it for debugging and now I had rewritten A MAJORITY OF MY CODE!

Hey Guys! I have Re-written and modified a majority of my Code which looked AI, I added a new Style, Inspiration From Coke and another Tech website. This one Has a better Functionality and UI than Previous Web apps!
I HAD MODIFIED MY CODE AS PER THE PREVIOUS CHANGES REQUESTED. PLEASE APPROVE THIS TIME! 😭🙏
#stardance #build#webapp #frictionless

Heyy Guyss, I have Finally inspected for what looks “AI” in my Code, and the AI I used for debugging majorly affected my style, therefore After two reports I thoroughly inspected my code and Changed The CSS and little bit of the JS acc to my style. Now I am going to Ship my project. P.S I never used AI to type/engineer my project. I only used references from Reddit, and GeeksforGeeks.

🗺️ CodeAtlas — 14 Days Later
😭🗿🥳 After 10.5 hours of grind… CodeAtlas is gonna be SHIPPED!!
For the last 14 days, I’ve been building CodeAtlas — a tool that helps developers understand unfamiliar GitHub repositories without having to manually dig through hundreds of files.
The idea is simple: give developers a map before they explore the territory.
🔥 What did I build?
CodeAtlas takes a GitHub repository and turns it into an interactive view of the codebase.
📂 1. Better Codebase Explorer
I started with a basic file tree and turned it into something much more useful liikee…..

*Expandable folders

*File-type indicators

*File selection

*Dependency counts

*Codebase search

*Entry-point detection

🕸️ 2. Dependency Graph
CodeAtlas analyzes imports between source files and turns them into an interactive graph.
Instead of opening files one-by-one to figure out what depends on what, you can actually see the relationships.
I also connected the Explorer and Graph, so selecting a file highlights its relevant connections.
🧭 3. Architecture Insights
CodeAtlas can identify things like:

🚪 Entry point

🔗 Most connected file
📁 File/folder counts

🕸️ Dependency count

Nothing overly complicated — just useful information to help you figure out where to start.
🧩 The QoL improvements
A lot of the work wasn’t flashy new features. It was making the experience actually feel usable.
Search → select a file → see its connections.
Select something in the Explorer → understand where it sits in the architecture.
File types → easier scanning.
Dependency numbers → quickly spot highly connected files.
Those small things made a surprisingly big difference.
😭 The 14-day journey
This definitely wasn’t:
code → works → ship
It was more like:
code → break → stare at error for 12 mins → debug → fix → break something else → repeat.
I ran into TypeScript errors, React issues, Git problems, dependency-resolution bugs, UI problems and plenty of things that made absollllutely no sense at first!! 💀
And honestly, I solved a lot of those problems myself.
That’s probably what I’m happiest about.
I didn’t just learn how to write code.
I learned how to debug, rethink, and keep going when the code doesn’t cooperate.
Okayy..🤔 Is the idea completely new?
Nope.
There are already tools and projects exploring codebase visualization and dependency analysis.
And that’s okay.
For me, the goal wasn’t to invent an entirely new category.
It was to take an idea I found interesting, build my own version from scratch, understand the underlying concepts, and actually ship it.
And I am GOing to!!
🚀 What’s next?
There’s still a lot I’d love to explore like :-
Better dependency analysis
Circular dependency detection
More languages
Git history visualization
Smarter architecture analysis
AI-assisted codebase explanations

But for now…
14 days. 10.5 hours of grind. Countless bugs. A ridiculous amount of debugging. And one shipped project.
😭🗿🥳 CodeAtlas — Gonna get SHIPPED. 🚀 (P.s It was a pain to find and put all these emojis, especially those arrows!)

Guys I Just Completed A bit more before wrapping up for today, Now The Individual files Of a Repository Can be Selected and Display info about them, and how they are interconnected!! The File Explorer got much Advanced!! #Build #Frictionless #stardance

Day 11 – The Day I Had to Restart 💀

Day 11 was going to be pretty straightforward.

It ended up not being that easy.

I set out to implement the Codebase Search feature in CodeAtlas, but somehow it turned into an experience where errors occurred and I had to delete the whole code written in Day 11, to build it all again from scratch.

That’s what I did.

I deleted everything, went back to the previous day’s code, and rebuilt Day 11 again by adding one feature at a time and testing it after each major update.

This time around, it worked like a charm.

What I actually built today
*Implemented Codebase Search to allow searching of repository files.
*Implemented searchable file results that filter live.
*Linked search results to dependency graph.
🕸️ Clicking a file highlights the selected node and its dependencies.
Updated architecture insights integration,
*🧹 Cleaned up App.tsx code and fixed multiple state/integration bugs. AAAnndd,
*✅ Preserved existing repository explorer, dependency analysis and atlas graph functionalities.

The most important lesson that I learned today, did not concern React or TypeScript, But the fact that,

“Sometimes, it’s better to start coding a certain feature from scratch instead of wasting hours on fixing an incorrect implementation of it.”

Today, my progress took longer than I thought, but I think that CodeAtlas became a more robust app thanks to that experience.

11/14 days donee Yoooo!!!! 🥳

CodeAtlas — Devlog
Day 8–9: From dependency data to an actual Atlas. 🕸️
Yoooo!! Today was honestly a crazy journey.
I started by turning CodeAtlas’s dependency data into a visual graph using React Flow. Soon, the files weren’t just a list anymore — they were nodes connected by actual relationships!! Then I added interaction: clicking a file highlights its connections and fades unrelated files…
Everything was working… until GitHub suddenly started throwing 403 Forbidden errors. 💀
After debugging, I found the culprit: I’d exhausted GitHub’s 60-request unauthenticated API limit during testing. That forced me to rethink how CodeAtlas fetches files and taught me a pretty important lesson about API efficiency.
And there’s a funny side story: I had actually started coding part of this in another editor before realizing my Hackatime wasn’t tracking it properly. By the time I noticed, some of my coding time hadn’t been recorded. 😭
Lesson learned:

“Always check Hackatime before starting a session.”

Despite the chaos, CodeAtlas now has:
📁 Repository Explorer → Dependency Analysis → 🕸️ Interactive Architecture Graph
The Atlas is getting real. See Ya Soon!!
#CodeAtlas #Devlog #BuildInPublic #Stardance #HackClub #React #TypeScript #GitHub #WebDevelopment

CodeAtlas — Devlog #4
🥳 Days 6 & 7 — CodeAtlas learned “ How files connect.”
Heyyy Guyss !! Today I moved CodeAtlas Beyonnd simply exploring a repository.
It can now analyze source code, detect imports, resolve them to actual files, and map their dependencies!!
For my own CodeAtlas repo, it detected 7 real dependency relationships — including how App.tsx connects to the GitHub API, parser, explorer, and file-tree logic.
Next Plann : turning these relationships into an interactive architecture graph.
The Atlas is starting to take shape Guyss!! 😭👌
#CodeAtlas #BuildInPublic #Devlog #Stardance #HackClub #TypeScript #React #GitHub

CodeAtlas — Devlog #3
Days 4 & 5 — From files to a map.
Heyy Guyss! CodeAtlas just got a lot smarter..
Over the last couple of sessions, I connected it to GitHub’s Tree API and built an interactive codebase explorer.
Now CodeAtlas can legit do some crazy stuff like:

📂 Retrieve thousands of files from a repository

🌳 Turn the raw file tree into a structured hierarchy

📁 Expand & collapse folders

🔍 Explore the actual structure of any public repository

🗿🗿
I even tested it on CodeAtlas itself.
Next plan: understanding how the files actually connect.

• Dependency mapping*

#CodeAtlas #BuildInPublic #Devlog #Stardance #HackClub #React #TypeScript #GitHub

🗺️ CodeAtlas — Devlog #2
Day 2(According to my Schedule 😜) — Heyyy Guys!! CodeAtlas can finally talk to GitHub.
The UI looked pretty decent when I started off, But with more improvements I am actually going somewhere!
Today I started making CodeAtlas actually work.
I added:

🔗 GitHub repository URL parsing

🐙 GitHub API integration
📊 Repository metadata
⚡ Loading states
❌ Invalid URL & repository error handling
⌨️ Enter-to-analyze support

Now I can paste a public GitHub repository and CodeAtlas can retrieve and display its information!! Yayy!!!
The next step is much more interesting:
Instead of just knowing the repository exists, CodeAtlas needs to understand what’s inside it.
Next up → mapping the repository’s file structure. 🗺️ And Good Luck TO ALL Reading this!
#CodeAtlas #Devlog #BuildInPublic #Stardance #HackClub #GitHub #WebDevelopment #TypeScript #React

🚀 CodeAtlas — Devlog #1
Day 1 — The Beginning
Heyy Guyss!! I’m starting a new project called CodeAtlas 🗺️
The idea is simple: understanding an unfamiliar codebase can be painful ! You open a GitHub repository and suddenly you’re staring at hundreds of files, folders, imports, and dependencies with no idea where to start.
Sooo I’m building CodeAtlas to turn a codebase into an interactive map — helping developers understand how different parts of a project connect, where important logic lives, and how the whole system works.
Today, I set up the project with React + TypeScript, initialized the GitHub repository, and started laying the foundation.
The goal:

GitHub repository >Codebase analysis > Interactive architecture map

This is Day 1. Let’s see how far I can take it. 🚀
#CodeAtlas #BuildInPublic #Stardance #HackClub #Devlog #WebDevelopment