Devlog 1

Every great project starts with a simple idea, but turning that idea into a polished product is a completely different challenge. For this project, I decided to recreate the core experience of Airbnb—not just by copying its interface, but by understanding how a modern booking platform is designed and built from the ground up. My goal is to improve my frontend development skills, write cleaner and more maintainable code, and gain hands-on experience with building responsive, real-world web applications. Throughout this journey, I’ll be documenting my progress, the challenges I face, the decisions I make, and the lessons I learn. This devlog is a record of that journey—from the first component to a fully functional Airbnb clone.

About Planning and Reasearch, I am thinking to make it a bit different from the original one and even fixing out different bugs throught the whole content. I beleive the user must get a clear and thorough breif of what the are putting their money into like every single piece of detail attached to it. More creative thinking ideas coming on the way of other devlogs.

Challenges Faced and Things Learned through It

About the challenges section till now as I am learning express along with node as a part of backend along with it, I was getting much difficulty in writing the html code in a javascript file which runs the server and it created a whole lot of mess along the way but as the time passes I have learned how to make a separete html file and fixed wiring from that file to javascript file and making different javascript file and configuring their funtionality into one single file which is app.js so this file only handles all other js files and server port creation.

Looking back at today’s progress, every feature completed brings this project one step closer to becoming a polished Airbnb clone. While many challenges appeared during development, each one became an opportunity to learn something new—whether it was improving component structure, writing cleaner code, or solving unexpected bugs. This project is helping me understand how large-scale frontend applications are organized and how small design decisions contribute to a better user experience. There is still plenty left to build and improve, but steady progress is more valuable than rushing to the finish line. I’ll continue refining the application, adding new functionality, and documenting every major milestone along the way. Thanks for following my journey, and I’ll be back with the next update as this Airbnb clone continues to evolve. Keeping this devlog small and simple and leaving things to talk about in the next devlog, my journey again starts after a little pause. See you all soon

~SK

Devlog 1 – Finally Logging the Work

This project has been in progress for a few days now, but today I’m finally sitting down to document the work that’s gone into it so far.

I’m building a Myntra Clone using React, and these first 10 hours have been a mix of excitement, experimentation, and a lot of learning. Like most projects, it didn’t start with perfect code or a clear roadmap. It started with an idea, followed by plenty of trial and error.

So far, I’ve spent time setting up the project, organizing components, planning the structure of the application, and working on recreating parts of the Myntra experience. A surprising amount of effort went into decisions that users will never directly notice—how files are organized, how components communicate with each other, and how to keep the project manageable as it grows.

There were moments when progress felt fast and moments when I spent far too long tracking down small issues. That’s probably the most relatable part of any development journey: the work that takes the longest is often the work nobody sees.

Looking back at these first 10 hours, the biggest win isn’t a specific feature. It’s that the project now exists beyond an idea. There’s still a long road ahead, but the foundation is there, and each session makes the final vision feel a little more achievable.

Onward to the next milestone.

#Devlog 2 – Building the Foundation

Today was a long development session where I spent most of my time building the structure and creating the core user interface of my social media website. I worked on designing the layout, creating reusable React components, and making neat navigation between different sections felt smooth and intuitive.

I also focused on building the main pages of the website, including the feed, profile section, and authentication screens. Along the way, I spent time refining the styling to make the platform look clean and modern while keeping the design responsive across different screen sizes.

A significant part of the session was dedicated to debugging and improving the user experience. Bugs have taken my mind, literally they make me so irritated as some were like so hard to find out even Ai couldn’t help and one them is still alive now roaming around my code for no reason I beleive, and Several small issues appeared during development, especially while connecting components and managing state, but each problem helped improve the stability of the project.

Overall, this was a productive milestone, and the project is now in a much stronger position for implementing social features. I am currently in confusion of data gathering like to get them from dummy Api or from other sources. Lets see what time can do to the project. Also i just learned to create custom Hooks in react, not sure will they change my website into something magical but atleast make them functional though.
Ideas are always welcome

Devlog1: My Codespace go kaboom

I was editing index.css of the vite just to test out different application of things and then i went to check out another website deployment and when i returned it, the connection was lost so I reloaded the page and then everything was gone and a similar pop up that’s in the screenshot popped.

So all the files were gone and then retried installing the vite modules and bootsrap from the terminal it says command not found. I asked github chat nearby that check why vite is not getting installed so it said to install node, then i realised lets create a new repository.

Reason- Github codespace already provides environment for these things which we generally have to install on a desktop , so installing one will again create a huge mess and will also affect deployment indirectly.

All the progress is gone but its never too late to start again

Deployment Debugging and Re-Certification Journey

Today’s ship turned into a deployment debugging session rather than a coding session.

I had already completed my React + Vite calculator and deployed it on Render. After submitting it for review, I received feedback that Render free-tier links are not accepted because they may become unavailable in the future.

To solve this, I decided to migrate the project to GitHub Pages and began setting up a new deployment workflow.

The migration wasn’t smooth. Although GitHub Pages reported that the site was live, opening the link only showed a blank white screen. After checking the repository structure, deployment settings, and project configuration, I traced the issue to the Vite base path configuration.

Once the base path was corrected, I rebuilt the project, redeployed it, and tested the site again.

Success — the calculator loaded correctly and the GitHub Pages deployment worked as expected.

This experience taught me that shipping a project isn’t only about writing code. Understanding deployment, hosting platforms, project structure, and debugging production issues is just as important.

The calculator is now successfully hosted, ready for re-certification, and I’m ready to move on to building and shipping the next project.

DevLog #2 — Bringing the Archive to Life

Progress Update

This development phase focused on transforming the initial concept of Mystery Files into a fully navigable investigation archive. The core desktop environment is now complete, featuring draggable windows, a live system clock, and dedicated modules for Case Files, Suspects, Evidence, and Timeline.

Building the Investigation

The first case, The Midnight Ledger, has been established as the foundation of the project. Suspects, clues, and timeline events have been organized into separate investigation modules, allowing users to explore the mystery piece by piece rather than through a traditional linear story.

Design Direction

A major focus was creating an atmosphere that feels authentic and immersive. The dark visual theme, floating windows, and case-management layout were designed to make the experience resemble a real investigative database rather than a conventional website.

Current State

The project now functions as a complete detective-themed desktop application with a clear structure, consistent design language, and a working investigation system. While the mystery itself is only beginning to unfold, the archive is now ready for future expansion and interactive features.

Looking Ahead

The next phase will focus on deeper interactivity, stronger connections between evidence and suspects, and additional case content. With the foundation now in place, the goal is to evolve Mystery Files from a static archive into a true investigative experience.

Main charachter - JUNE MERCER

DevLog #1 — The Beginning of Mystery Files

Why I Started This Project

When I first began building my personalOS project, I considered creating a traditional portfolio-style experience. While that approach would have worked, it didn’t feel particularly memorable.

I wanted to build something that people would want to explore.

Something that felt less like a website and more like stepping into a story.

That idea eventually became Mystery Files — a fictional detective archive where users investigate clues, examine evidence, review suspects, and reconstruct events surrounding an unsolved case known as The Midnight Ledger.

The Vision

My goal is not simply to create a collection of web pages.

I want the project to feel like a real investigative system.

When someone opens the site, I want them to feel as though they have been granted access to a restricted detective database. Every window, every piece of evidence, every suspect profile, and every timeline entry should contribute to a larger mystery waiting to be solved.

Rather than telling users a story directly, I want them to uncover it themselves.

Building the Foundation

This development phase focused on creating the core structure that everything else will be built upon.

The operating-system style interface is now functional and serves as the central hub for the investigation.

Current features include:

✓ Desktop-style environment

✓ Draggable application windows

✓ Open and close window controls

✓ Investigation-themed navigation

✓ Live system clock

✓ Multi-window workflow

✓ Responsive information panels

The Midnight Ledger

To give the project a strong narrative foundation, I created the first case file: The Midnight Ledger.

The case revolves around the mysterious disappearance of an important museum ledger during a stormy night.

At first glance, the crime appears simple.

However, as evidence accumulates and timelines begin to overlap, multiple suspects emerge, each with motives, opportunities, and secrets of their own.

The truth remains hidden somewhere within the investigation.

Investigation Modules

To organize information, I introduced several dedicated sections:

📁 Case Files

The central location for case briefings, background information, and investigation summaries.

🧾 Suspects

Profiles containing motives, alibis, and relationships to the case.

🔍 Evidence

Collected clues and physical items connected to the investigation.

⏱️ Timeline

A chronological reconstruction of important events leading up to the crime.

Design Direction

A large amount of time was spent shaping the atmosphere of the project.

I wanted the interface to feel professional, mysterious, and immersive.

The dark color palette, floating windows, information cards, and investigation-focused layout were all chosen to support that goal.

Every design decision was made with one question in mind:

“Does this feel like a real detective system?”

Challenges Along the Way

One of the biggest challenges was finding the balance between storytelling and usability.

A mystery is only interesting if information is revealed gradually, but a website must still be easy to navigate.

Designing separate investigative windows proved to be an effective solution, allowing information to remain organized while preserving the feeling of exploring a case file.

Looking Ahead

Although this is only the first development log, the foundation is now in place.

For now, Mystery Files exists as the opening chapter of a much larger story.

The archive has been created.

The evidence has been collected.

The suspects have been identified.

The only thing missing is the truth.

Completed the code for project calculator

Started working on the basic project

I am currently working on the functioning of react by implementing html, js and css in it.