Archalley Frontend

A modern, responsive frontend application for Archalley - a platform dedicated to architecture, design, and the built environment. Built with Next.js 15, React 19, and TypeScript.

🏗️ Features

• Modern Architecture: Built with Next.js 15 App Router and React 19
• Responsive Design: Mobile-first design with Tailwind CSS
• Content Management: Dynamic content fetching from WordPress backend
• Admin Dashboard: Content management interface for administrators
• Instagram Integration: Social media feed integration
• Advertisement System: Flexible ad banner management
• Authentication: Secure user authentication system
• SEO Optimized: Built-in SEO features and metadata management

🚀 Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI + shadcn/ui
• Icons: Lucide React
• Authentication: Custom auth system
• Image Optimization: Next.js Image component
• Fonts: Inter from Google Fonts

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd archalley-frontend

2. Install dependencies

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Set up environment variables Create a .env.local file in the root directory and add your environment variables:

   # Add your environment variables here

4. Run the development server

   npm run dev
   # or
   pnpm dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000 to see the application.

🏃‍♂️ Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint to check for code quality issues

📁 Project Structure

archalley-frontend/
├── app/                    # Next.js App Router pages
│   ├── admin/             # Admin dashboard pages
│   ├── api/               # API routes
│   ├── category/          # Category pages
│   ├── post/              # Individual post pages
│   ├── search/            # Search functionality
│   └── globals.css        # Global styles
├── components/            # Reusable React components
│   ├── ui/               # shadcn/ui components
│   └── ...               # Custom components
├── contexts/             # React contexts
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and configurations
├── public/               # Static assets
├── styles/               # Additional stylesheets
└── types.d.ts            # TypeScript type definitions

🎨 Key Components

• TopBar: Site header with branding and navigation
• NavigationBar: Main navigation menu with categories
• BlogCarousel: Featured posts carousel
• ProjectsSection: Architecture projects showcase
• ArticlesSection: Article content display
• NewsSection: Latest news and updates
• InstagramSlider: Instagram feed integration
• AdBanner: Advertisement management system

🔧 Configuration

Next.js Configuration

The application is configured in next.config.mjs with:

• ESLint and TypeScript error handling
• Image optimization settings
• Remote image patterns for archalley.com

Tailwind CSS

Custom styling is handled through Tailwind CSS with:

• Custom color schemes
• Responsive breakpoints
• Component-specific utilities

🔐 Authentication

The application includes a custom authentication system with:

• Protected routes for admin access
• User context management
• Login/logout functionality

📱 Admin Dashboard

The admin dashboard (/admin) provides:

• Ad Banners: Manage advertisement banners and URLs
• Instagram: Configure Instagram integration
• Content: Post and page management (coming soon)
• Users: User account management (coming soon)
• Settings: Website configuration (coming soon)

🌐 API Integration

The frontend integrates with a WordPress backend to fetch:

• Posts and articles
• Categories
• Featured content
• Instagram feed data

🎯 SEO Features

• Dynamic metadata generation
• Structured data markup
• Optimized images
• Fast loading times
• Mobile-responsive design

🚀 Deployment

Production Build

npm run build
npm run start

Environment Variables

Ensure all required environment variables are set in your production environment.

🤝 Contributing

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

📄 License

This project is private and proprietary.

🆘 Support

For support and questions, please contact the development team.

---

Built with ❤️ for the architecture and design community.