🚀 Smart Error Assistant

A modern and interactive Custom 404 Page built with React JS. Instead of displaying a basic "Page Not Found" message, this project helps users navigate to useful sections of the website through search, suggestions, recently visited pages, and popular pages.

---

📖 Project Overview

Traditional 404 pages often leave users at a dead end. Smart Error Assistant transforms the experience by providing intelligent navigation options that help users quickly find the content they're looking for.

---

✨ Features

Core Features

• 🎯 Custom 404 Page
• 🔀 React Router Integration
• 🔍 Search Available Pages
• 💡 Suggested Pages
• 🕒 Recently Visited Pages
• ⭐ Popular Pages
• 🏠 Go Home Button
• ⬅️ Go Back Button

Additional Pages

• 📁 Portfolio Collection
• ℹ️ About
• 📞 Contact

---

🛠️ Built With

• React JS
• React Router DOM
• JavaScript (ES6+)
• HTML5
• CSS3
• Local Storage

---

📂 Project Structure

src/
│
├── components/
│   ├── PopularPages/
│   ├── RecentPages/
│   ├── SearchBar/
│   └── SuggestedPages/
│
├── data/
│   ├── pages.js
│   └── portfolioData.js
│
├── pages/
│   ├── About.jsx
│   ├── Contact.jsx
│   ├── Error404.jsx
│   ├── Home.jsx
│   └── Portfolio.jsx
│
├── App.jsx
├── main.jsx
└── index.css

---

🚀 Getting Started

Clone the Repository

git clone https://github.com/charanepuri/smart-error-assistant-react.git

Navigate to the Project

cd smart-error-assistant

Install Dependencies

npm install

Start the Development Server

npm run dev

Open your browser and visit:

http://localhost:5173

---

📌 How It Works

1. The application opens with the custom 404 page.
2. Users can search for available pages.
3. Matching pages are displayed instantly.
4. If no match is found, suggested pages are shown.
5. Recently visited pages are stored using Local Storage.
6. Popular pages help users quickly navigate to important sections.
7. The Portfolio page showcases multiple portfolio websites.

---

🌐 Portfolio Collection

• HTML • CSS • JavaScript Portfolio
• Flask Developer Dashboard Portfolio
• Django Portfolio
• React Portfolio
• JavaScript Projects Portfolio

---

🎯 Learning Outcomes

Through this project, I practiced:

• React Components
• React Router
• State Management (useState)
• Side Effects (useEffect)
• Local Storage
• Conditional Rendering
• Component-Based Architecture
• Responsive UI Design

---

👨‍💻 Author

E Charan Teja

__Aspiring FrontEnd Developer / Aspiring Full Stack Developer__

Connect & Follow

• GitHub: Profile

• LinkedIn: Profile

Explore

• Portfolio(Django): Link

• Portfolio(React): Link

• Portfolio(Flask): Link

---

⭐ Support

If you found this project useful, consider giving it a ⭐ on GitHub.