Skip to content

Migrate Content & Data Pages to TypeScript and Tailwind (Sandhya Task)

✨ Feature Request

What feature would you like to see added to viswam.ai?

A structured modernization of the following pages and components:

Pages:

  • Projects
  • LLM Projects
  • Roadmap
  • News
  • News Detail

Components:

  • RoadmapSection
  • SummerCard
  • BlockCard

The feature includes:

  • TypeScript migration with strict typing
  • Tailwind CSS-based UI improvements
  • Responsive layout fixes
  • Linting cleanup
  • Unit test coverage

📖 Describe the feature in detail

This feature upgrades the Content & Data section to improve maintainability, scalability, and UI consistency.

1️⃣ TypeScript Migration

Define strong interfaces for:

  • Project
  • News
  • Roadmap Item

Enable strict type checking to:

  • Reduce runtime errors
  • Improve autocomplete & DX
  • Improve long-term maintainability

2️⃣ Tailwind CSS Migration

Replace custom CSS with Tailwind utility classes to:

  • Improve visual consistency
  • Fix responsive grid issues
  • Standardize spacing and alignment
  • Improve hover effects and card design

Example grid improvement:

grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6

3️⃣ Code Quality Improvements

  • Remove unused variables
  • Fix missing dependency warnings
  • Improve formatting consistency
  • Improve component structure

4️⃣ Unit Test Coverage

Add test cases to verify:

  • Project list renders correctly
  • News cards render with props
  • Roadmap sections render properly
  • News detail page loads content correctly

👥 Who does this help?

  • Developers contributing to the project
  • New contributors onboarding
  • Future maintainers
  • End users (better UI & responsiveness)

🎯 Why is this feature important?

  • Improves long-term maintainability
  • Reduces runtime bugs
  • Enhances UI consistency
  • Makes project production-ready
  • Encourages good engineering practices
  • Prepares project for scaling

💡 Suggested UI Improvements

  • Clean card design with rounded corners
  • Subtle shadows and hover transitions
  • Consistent padding system (p-6, mb-8, gap-6)
  • Better mobile responsiveness
  • Improved visual hierarchy

📊 Example Layout Improvement (Conceptual)

Before:

  • Fixed-width cards
  • Inconsistent spacing
  • Limited responsiveness

After:

  • Responsive grid layout
  • Balanced spacing
  • Modern Tailwind-based design
  • Smooth hover transitions

Additional Notes

The migration will be done incrementally to ensure:

  • No breaking changes
  • Stable builds
  • Safe testing after each file conversion

This enhancement will modernize the Content & Data section and align it with modern React + TypeScript best practices.