Restructure project into multi page architecture

[BhumikaYeole]

ReadmeForge Migration to React Multi-Page Architecture

Closes #88

Overview

This PR migrates ReadmeForge from a vanilla HTML/CSS/JavaScript single-page application into a scalable multi-page React application using Vite and React Router DOM.

Changes Implemented

React + Vite Migration

• Migrated the project to React with Vite
• Configured the project for GitHub Pages deployment
• Added React Router DOM for route-based navigation

Multi-Page Architecture

Implemented dedicated pages for:

• Landing Page (/)
• README Maker (/readme-maker)
• How To Use (/how-to-use)

Component Refactor

Extracted reusable shared components including:

• Navbar
• Footer
• Logo
• Toast

Refactored the README Maker into modular components:

• Sidebar
• EditorPanel
• PreviewPanel

Hooks and State Management

Replaced DOM-based state handling with reusable React hooks:

• useReadmeState
• useLocalStorage
• useTheme

Utility Refactor

Separated markdown and formatting logic into reusable utility functions:

• generateMarkdown
• md2html
• shieldToBadge
• convertStructure

UI and Styling

• Preserved the existing visual design and theme system
• Added responsive multi-page layouts
• Improved navigation structure and organization

Additional Improvements

• Improved folder structure
• Added reusable layout architecture
• Added SPA routing support for deployment
• Prepared the project for future scalability and feature additions

Build Verification

Verified successfully using:

npm install
npm run build

The production build completes successfully without errors.

Local Development

npm install
npm run dev

Screen Recording

Screen.Recording.2026-05-13.104934.1.mp4

[netlify]

✅ Deploy Preview for makeareadme ready!

Name	Link
🔨 Latest commit	397ea9a
🔍 Latest deploy log	https://app.netlify.com/projects/makeareadme/deploys/6a041019e956d600078d65fd
😎 Deploy Preview	https://deploy-preview-92--makeareadme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.