BuildWithRani

A clean, content-driven platform where I document my learning and showcase projects.

Short Explanation

BuildWithRani.com is a lightweight Next.js site that shares my React learning path and a detailed e-commerce UI project. It uses MDX for structured lessons and explanations, making it easy to document what I build and how I build it.

Project Goals

The goal of BuildWithRani.com is to create a simple, organized space where I can share my learning journey, React notes, project breakdowns, and UI flows. This version focuses on clarity, readability, and documenting progress.

Tech Stack Used

  • Next.js: Used to build a fast, SEO-friendly static site.
  • MDX: Enables writing lessons and project breakdowns using Markdown + JSX.
  • Tailwind CSS: Used for a clean, responsive, and consistent UI.

Features

  • React Learning Path

    A structured set of MDX topics where I document React fundamentals, concepts, patterns, and small practice components.

  • React E-Commerce UI

    A detailed breakdown of a standalone React-based e-commerce UI system, covering navigation, reusable components, and complete user flow screens.

  • Clean Documentation Experience

    The platform is intentionally minimal, focusing on clear writing and step-by-step explanations.

Demo Previews

Click any preview to watch in full width.

Landing page
React Learning Notes
React Ecommerce Project

Video Demo

For the feature demo, watch it below:

The Problems and How I Deal With It

  • The biggest challenge was simplifying the project. Initially, I tried following a 24-hour LMS tutorial, which added unnecessary complexity like role-based dashboards and authentication. Rebuilding from scratch helped me realize that clarity matters more than features.
  • I also had to design a content structure that was easy to update. MDX allowed me to write topics without touching the core codebase, but organizing pages, routes, and components required careful planning.

Lessons Learned

  • I learned the value of building what I actually need instead of copying full-scale systems from tutorials. Simplicity leads to better focus and faster progress.
  • This project strengthened my understanding of Next.js routing, MDX content workflows, Tailwind styling, and how to create developer-friendly documentation experiences.
← Back to Projects