🔮 TopicSearch – Frontend Developer Intern Assignment

Built by ⚡ Diwakar Reddy

A React-based interactive Topic Browser inspired by TOTLE’s Catalogue Management System.
This project allows users to explore topics, filter by category, search instantly, toggle between themes, and enjoy a modern animated UI.

---

🚀 Features

✅ Search Topics (Real-time Filtering)

• Case-insensitive search
• Highlights matched text
• Handles empty input gracefully

Multi-Color Topic Cards

• Category-based gradients
• 3D hover tilt animation
• Smooth fade-in entrance

🎛 Category Filters

• Filter topics by category
• “All” category resets the list

🌙 Dark Mode / 🌞 Light Mode

• Theme toggle button
• Beautiful color palettes for both themes

🔮 Modern UI Enhancements

• Animated gradient background
• Neon search bar
• Glassmorphism container
• Responsive grid layout
• Attractive fonts & icons for all topics
• Custom neon signature under the title: ⚡ Diwakar Reddy

---

🛠️ Tech Stack

• React.js
• JavaScript (ES6+)
• Inline CSS / Custom styling
• React Hooks (useState, useMemo)

---

📁 Project Structure

topic-search/
│
├── src/
│   ├── App.js
│   ├── TopicSearch.js
│   ├── index.js
│   ├── App.css
│   └── index.css
│
├── public/
│   └── index.html
│
├── package.json
└── README.md

---

🧪 How to Run the Project

1. Navigate to the project folder:

cd topic-search

2. Install dependencies:

npm install

3. Start the development server:

npm start

Your app will run at:
👉 http://localhost:3000

---

🎥 Video Explanation (2 Minutes)

Add your uploaded video link here (YouTube or Google Drive):
Video Link: <Add your video link here>

---

🔗 GitHub Repository

Add the GitHub link after you push the project:
GitHub Repo: https://github.com/Diwakarreddie/Topic-Browser.git

---

📸 Screenshots (Optional)

You can add screenshots of your UI here.

---

📝 Assignment Checklist (Completed)

• TopicSearch component ✔
• Search bar ✔
• Topic cards ✔
• Real-time filtering ✔
• Category filters ✔
• “No topics found” message ✔
• 24 topics with icons ✔
• Dark/Light mode ✔
• Modern UI enhancements ✔
• README added ✔
• Video (to be added) ✔

---

🙌 Credits

Developed with ❤️ by ⚡ Diwakar Reddy