📸 Adasa - عدسة

A modern photography blog platform built with React and Vite, showcasing beautiful photo galleries, articles, and photography insights.

🌟 Overview

Adasa (عدسة, meaning "lens" in Arabic) is a photography-focused blogging platform that celebrates the art of visual storytelling. The project demonstrates modern React development practices, including routing, component architecture, and responsive design.

✨ Features

Core Functionality

• 🏠 Home Page - Engaging landing page with featured content
• 📝 Blog Listing - Browse through photography articles and stories
• 🔍 Search - Find specific blog posts quickly
• 🏷️ Category Filtering - Filter posts by photography categories
• 📄 Blog Details - Detailed view of individual blog posts
• 📱 Responsive Design - Optimized for all device sizes
• 🎨 Grid/List Views - Toggle between different layout styles
• 📖 Pagination - Navigate through multiple pages of content
• 🚫 404 Page - Custom error page for invalid routes

Additional Pages

• 👥 About Us - Team information and mission
• 📋 Terms of Service - Usage terms and conditions
• 🔒 Privacy Policy - Data protection information

🚀 Live Demo

Check out the live application: https://adasa-route.netlify.app/

🛠️ Technologies Used

• React 19 - UI library
• React Router DOM - Client-side routing
• Vite - Build tool and dev server
• CSS3 - Styling and animations
• JSON - Data management

📦 Installation

1. Clone the repository

git clone https://github.com/Abdelrahman968/adasa-route.git
cd adasa-route

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Build for production

npm run build

5. Preview production build

npm run preview

📁 Project Structure

adasa/
├── public/              # Static assets
├── src/
│   ├── assets/          # Images and media
│   ├── components/      # Reusable components
│   │   ├── AboutUs/     # About page sections
│   │   ├── Blog/        # Blog-related components
│   │   ├── Footer/      # Footer component
│   │   ├── Home/        # Home page sections
│   │   ├── Layout/      # Layout wrapper
│   │   ├── NavBar/      # Navigation component
│   │   └── ScrollToTop/ # Scroll utility
│   ├── data/            # JSON data files
│   ├── pages/           # Page components
│   ├── App.jsx          # Main app component
│   └── main.jsx         # Entry point
├── index.html           # HTML template
├── package.json         # Dependencies
└── vite.config.js       # Vite configuration

🎯 Key Components

Navigation & Layout

• Navbar - Responsive navigation with mobile menu
• Layout - Consistent page wrapper with header and footer
• ScrollToTop - Automatic scroll to top on route change

Home Page Sections

• HeroSection - Eye-catching hero banner
• FeaturedArticlesSection - Highlighted blog posts
• CategoriesSection - Photography category showcase
• BlogSection - Recent blog posts preview
• NewsletterSection - Email subscription component

Blog Features

• BlogList - Paginated blog post listing with search and filtering
• BlogPost - Individual blog post card component

🎨 Design Features

• Clean and modern UI design
• Smooth transitions and animations
• Image-focused layout
• Typography optimized for readability
• Accessible color contrast
• Mobile-first responsive design

🔗 Routes

• / - Home page
• /blog - Blog listing page
• /blog/:id - Individual blog post
• /about - About us page
• /terms - Terms of service
• /privacy - Privacy policy
• * - 404 error page

📊 Data Structure

Blog posts are stored in JSON format with the following structure:

{
  "id": "unique-id",
  "title": "Post title",
  "category": "Category name",
  "author": "Author name",
  "date": "Publication date",
  "content": "Post content",
  "image": "image-url",
  "excerpt": "Brief description"
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Assignment Context

This project was created as Assignment 14 for a React framework course, focusing on:

• React Router implementation
• Component architecture
• State management
• Data fetching and handling
• Responsive design principles
• User interface design

Learning Objectives Achieved

✅ Routing with React Router DOM
✅ Component composition and reusability
✅ Search functionality implementation
✅ Category filtering without nav tabs
✅ Pagination logic
✅ Grid/List view toggling
✅ 404 error handling
✅ JSON data manipulation

👨‍💻 Author

Abdelrahman Ayman

• GitHub: @Abdelrahman968
• Project: Adasa Route

📄 License

This project is open source and available for educational purposes.

🙏 Acknowledgments

• Inspired by modern photography blogs and portfolios
• Built as part of a web development learning journey
• Special thanks to the React and Vite communities

---

Made with ❤️ and 📷