[Docs] Improve README with setup instructions for new contributors

[sarika-03]

Current State

The README lacks clear setup and installation instructions for new contributors. Key missing information includes:

• No prerequisites section (Node.js, npm, Git versions)
• No step-by-step installation guide
• Missing information about project structure (that code is in site/ directory)
• No available npm scripts documentation
• No troubleshooting section for common setup issues
• Limited contribution workflow guidance for first-time contributors

This makes it difficult for newcomers to:

• Set up the project locally (many try npm install in root instead of site/)
• Understand which commands to run
• Debug common issues like port conflicts or cache problems
• Follow proper contribution workflow

Desired State

README should include comprehensive documentation with:

1. 🚀 Getting Started Section

• Prerequisites with version requirements (Node.js v16+, npm v8+, Git)
• Clear installation steps showing cd site directory navigation
• Commands to run: npm install → npm start
• Local server URL: http://localhost:8000

2. 📂 Project Structure

• Visual folder tree showing organization
• Highlighting key directories (site/src/components/ShapeBuilder/)
• Clear indication where beginners should start

3. 🛠️ Available Scripts

• Table format with all npm commands and descriptions
• npm start - Start development server
• npm run build - Production build
• npm run lint - Code quality checks
• npm run clean - Clear cache

4. 🐛 Troubleshooting Section

• Port 8000 already in use solution
• Gatsby cache issues fix
• Node version mismatch resolution
• Common error messages with solutions

5. 💡 Enhanced Usage Instructions

• Step-by-step guide to create custom shapes
• Keyboard shortcuts table (Ctrl+Click, Ctrl+Z, Enter, etc.)
• How to export and use coordinates in Meshery

6. 🤝 Improved Contributing Section

• Complete fork → clone → branch workflow
• Commit message format with examples
• Sign-off requirements (git commit -s)
• Branch naming conventions
• PR creation process

Benefits:

• Faster onboarding for new contributors
• Reduced setup-related questions in community channels
• Better alignment with CNCF project documentation standards
• Improved first-time contributor experience

---

Contributor [Guides](https://docs.meshery.io/project/contributing) and [Handbook](https://layer5.io/community/handbook)

• 📚 [Instructions for contributing to documentation](https://docs.meshery.io/project/contributing/contributing-docs)
  • Meshery documentation [site](https://docs.meshery.io/) and [source](https://github.com/meshery/meshery/tree/master/docs)
• 🛠 [Meshery Build & Release Strategy](https://docs.meshery.io/project/contributing/build-and-release)
• 🎨 Wireframes and [designs for Meshery UI](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)
• 🙋🏾🙋🏼 Questions: [Discussion Forum](https://meshery.io/community#community-forums) and [Community Slack](https://slack.meshery.io)

[sarika-03]

@saurabhraghuvanshii
can you assign this to me ?

[saurabhraghuvanshii]

Thanks @sarika-03

[sarika-03]

@saurabhraghuvanshii
As you told me, I have added the make file commands. Now this README file is completely correct to guide a beginner .