** Project Overview**

I built a computer tool to help people keep track of their money.
**
Security & Authentication**

I spent my time making sure the “locked door” of the app works perfectly. This means when you sign up or log in, your information stays very safe. I used special codes called tokens to make sure only you can see your data.

** Challenges Faced**

At first, I had some trouble because some of the secret keys didn’t match, and the code was a bit messy. I had to go back and fix it so that everything was organized and strong.

** Key Learning **

I learned that being careful with details is the most important part of building something.

** Current Status**

Now, the backend is ready and solid.

** Next Steps**

Next, I am going to add the parts where you can actually type in how much money you spent on snacks or toys, and I will make cool charts to show where the money goes!

Today I worked on setting up the backend foundation for my expense tracker application, which aims to help users track expenses, manage income, categorize transactions, and analyze spending through interactive charts. I created a dedicated backend folder and organized it into a structured architecture including config, controllers, models, routes, middleware, and utils to ensure scalability and maintainability. Within this setup, I implemented the initial database configuration by creating a db.js file and worked on integrating MongoDB with Node.js. I also defined a user model to structure user data and built a corresponding user controller to handle user-related logic. This setup establishes the base for handling data and API operations going forward. During the process, I encountered a module resolution issue related to ES module imports, which highlighted the importance of using correct file extensions in Node.js. Overall, today’s progress was focused on laying a clean and functional backend structure that will support future development of core features like authentication and transaction management.

Expense Tracker (v0.1.0-alpha)

• Day 1: Foundation & The “Digital Paper”* Aesthetic
  The focus for Day 1 was primarily on establishing a rock-solid architectural foundation and nailing the initial visual identity. I initialized the Next.js project and immediately integrated Tailwind CSS to handle the styling. To keep the project lightweight yet powerful, I configured the Drizzle ORM for database management and added the necessary dependencies for a full-stack environment. Instead of the typical generic SaaS look, I’ve started implementing a warmer, more tactile UI—moving away from neon highlights toward high-contrast typography and raw, functional textures. The Landing Page is now fully shipped, featuring a hero section that feels intentional and premium rather than cluttered.

Changelog
(v0.1.0-alpha) Landing Page: Completed the hero and feature sections with a focus on clean, brutalist-inspired layouts.

(v0.0.5-alpha) Dependency Injection: Integrated Lucide React for iconography and set up Drizzle ORM with the database schema.

(v0.0.1-alpha) Project Initialization: Scaffolding the Next.js app and configuring the directory structure for optimal routing.

Next Steps
Authentication Flow: Integrate Clerk on Day 2 to handle secure user onboarding and session management.

Database Sync: Connect the Drizzle schema to the live database to begin persisting expense data.

Micro-interactions: Start exploring subtle animations for the dashboard navigation to give it that “premium” feel.
**
Notes**
I’m really leaning into the raw, “ink-on-paper” style for this one. The goal is to make a financial tool that doesn’t feel like a spreadsheet, but more like a well-designed journal. Next up: getting Clerk to play nice with the layout!

Goal: Improve the overall experience and finalize the site.

Problems: No input validation and weak flow between input and result.
Work Done: Added validation, improved text, and made the results feel more impactful. Tested different scenarios.
Things Learned: Even a simple static site needs good flow and clear messaging to leave an impact.

11:00 IST-Thursday-02/04/26

Goal: Design the UI using HTML and CSS.

Problems: The design looked too basic in the beginning. Faced issues with alignment and mobile responsiveness.
Work Done: Simplified the layout, used bold text for key results, and improved spacing. Made sure it works on different screen sizes.
Things Learned: Clean design makes a big difference, especially in simple projects.

17:27 IST - Sunday - 29/03/26

Day 2

Goal: Build the calculation logic using JavaScript.

Problems: The numbers didn’t feel realistic at first. Also had to handle cases like empty input or very large values.
Work Done: Created functions to convert daily scroll time into yearly and lifetime values. Added simple comparisons like books, skills, and languages.
Things Learned: Even simple logic needs to be accurate. Users quickly lose trust if results feel wrong.

19:32 IST-24/03/26

Day 1

Goal: Define a clear idea for a static website called “Time Cost of Scrolling.”

Problems: The idea felt too common at first and similar to basic screen-time calculators. I was also unsure whether to focus more on features or the message.
Work Done: I decided to keep it a simple one-page static site using HTML, CSS, and JavaScript. I focused on showing “life lost” instead of just time spent. This made the concept stronger and more meaningful.
Things Learned: For a static website, the idea and message matter more than complexity. If the core idea is weak, the project won’t stand out.
13:17 IST -Saturday-21/03/26

The core worked, but cracks showed up in the UI and styling. Some parts felt unfinished, almost rushed. Instead of ignoring it, I’m now revisiting those weak spots, refining the design, and pushing it closer to the standard I actually expect from my work.

N.B: This mockup is built from an external website which is mainly for the decoration purpose(Please ignore this)

Wrapped up the final stage of the project today.the main UI, including the landing page,library view,course deatil view,and study mode structure,is now fully implemented. Completed the remaininbg styling,layout adjustments, and small interface fixes to keep everything consistent with the light mode design system.The core features for tracking courses, organizing videos, and adding course details are all working,With the structure ,styling,and interface ccomplete,the first full version of StudyTrack is now Finished.
21:23 IST,Saturday,14-03-26

Completed the full HTML structure for the entire website today, setting up the base layout for all major sections of the app. Along with that, I finished writing the CSS for the main landing page and the library page where users will see the courses or videos they have scheduled to study. I focused on keeping the layout clean, readable, and consistent with the light-mode design system. I also implemented a popup form where users can add course details such as category, title, and description. With this done, the main UI structure and core styling of the platform are now ready.
15:56 IST, Saturday, 13-03-26

Finished styling the navigation bar today. Added the CSS for the header layout, logo, and navigation buttons. Focused on alignment, spacing, and making sure the active state for buttons is clear. The navbar now matches the overall light-mode design and works as the main navigation for Library and Study Mode

Started building the main structure for the CourseShelf interface today. Set up the base HTML layout including the header, navigation, home view, course detail view, and video list sections. Also defined the root color variables and typography system to keep the design consistent across the UI. The basic app structure is now ready.
11:13 IST, Saturday, 14-03-26

Completed the FAQ section today. Built the full HTML structure and added the CSS styling to keep it consistent with the light-mode design used across the page. Focused on clear layout, readable text, and proper spacing so users can quickly find answers.
21:28 IST ,Friday,13-03-26

After finishing the hero section, I moved straight to the testimonials section. Built the full HTML structure and completed the CSS styling for it. Focused on keeping the layout consistent with the light-mode design and maintaining clean spacing and readability. The section structure and styling are now done.
20:32 IST,Friday,13-03-26

Finished building the hero section. Adjusted the layout, spacing, and typography to match the new light-mode color preference. Removed the older neon/SaaS style elements and kept the design minimal and clean. Focused mainly on readability and structure so the first section of the page looks simple, and clear
17:46 IST, Friday, 13-03-26

Refactored the UI today. I removed the previous styling and rebuilt the interface around a light-mode color preference to create a cleaner, more refined look. Instead of the usual SaaS neon palette, I focused on softer tones, better contrast, and consistency.
also my previous CSS was embedded in a single file as per my previous vote feedback today i moved that to different file.
17:08 IST,Friday,13-03-26

Finished the html structures, now i worked on the CSS and finished my navbar! worked on the background mainly to give it a polished look with a gradient background, worked on the left side and finished that upto some part,but yeah the right side is still left for styling.Actually i am a bit perfectionist so might be i need to work more hard on the ui to make it look more polished ,in mean time i watched a tutorial on YT to learn about the gradient background in CSS and some other elements!!
20:55 IST,Thursday,12/03/26,

Day 1
Finished some parts of the landing page html and going to start styling with css

Finally finished the whole project and added the final polishing hope athletes are gonna love it!

Integrated clerk in my application for the auth purposes by removing my previous auth system

Today I worked on the SearchExercises component using React + MUI. I implemented state handling with useState, built a clean search UI using Stack, TextField, and Button, and connected user input to live state updates. I also set up a basic handleSearch function to prepare for fetching exercise data next. Still rough, but the structure is getting real and professional.

Finally finished designing the landing page! it took a lit bit more than usual for some bugs that appeared out of no where and I had to use chatgpt for solving the bugs.

I’ve been working on building the authentication flow from scratch. The focus so far has been on setting up a clean and flexible Login / Signup UI using React state management.

Updated css logics as it was causing some bugs

finished most part of our website and landing look something like this

Finished the landing page styling