Anime Live Countdown

A modern web application to track upcoming seasonal anime with real-time countdowns

---

📖 About The Project

Anime Live Countdown is a user-friendly web application designed to help anime fans track upcoming shows in the current season. What sets this platform apart is its unique day-of-the-week grouping system, which gives countdown timers meaningful context by showing when each anime airs throughout the week.

✨ Key Features

• 📅 Weekly Schedule View - Shows organized by day of the week for easy planning
• ⏱️ Live Countdowns - Real-time timers for upcoming episode releases
• 🔍 Advanced Search - Search and filter anime from the database
• 🎭 Detailed Media Pages - Comprehensive information about each anime
• 👤 User Authentication - Secure sign-in with user profiles
• ⭐ Favorites System - Save and track your favorite shows
• 📱 Responsive Design - Optimized for mobile, tablet, and desktop
• 🎨 Modern UI - Built with Angular Material and PrimeNG

---

🛠️ Built With

Frontend

• Angular 20.3 - Modern web framework with SSR support
• Angular Material 20.2 - Material Design components
• PrimeNG 20.4 - Rich UI component library
• RxJS 7.8 - Reactive programming library
• TypeScript 5.9 - Type-safe JavaScript

Backend

• Spring Boot 3.4 - Java backend framework
• Spring Security - Authentication & authorization
• Spring Data JPA - Database abstraction layer
• PostgreSQL - Relational database
• Maven - Dependency management

Infrastructure & Deployment

• Vercel - Frontend hosting with SSR
• AWS - Backend hosting and services
• Docker - Containerization
• Express - SSR server

---

📁 Project Structure

AnimeLiveCountdown/
├── animeCountdownApp/          # Angular Frontend Application
│   ├── src/
│   │   ├── app/
│   │   │   ├── auth/           # Authentication components
│   │   │   ├── favorites/      # User favorites page
│   │   │   ├── footer/         # Footer component
│   │   │   ├── header/         # Navigation & search
│   │   │   │   ├── searchbar/  # Search functionality
│   │   │   │   ├── sign-in/    # Sign-in modal
│   │   │   │   └── profile-dropdown/
│   │   │   ├── home/           # Main landing page
│   │   │   │   ├── weekly-schedule/
│   │   │   │   │   ├── airing-soon/    # Upcoming releases
│   │   │   │   │   ├── shows/          # Weekly schedule grid
│   │   │   │   │   └── trending/       # Trending anime section
│   │   │   │   └── shared-home/        # Shared components
│   │   │   ├── media-info/     # Detailed anime pages
│   │   │   ├── models/         # TypeScript interfaces
│   │   │   ├── services/       # API & business logic
│   │   │   └── interceptors/   # HTTP interceptors
│   │   └── public/             # Static assets
│   ├── vercel.json             # Vercel deployment config
│   ├── package.json            # Frontend dependencies
│   └── tsconfig.json           # TypeScript configuration
│
├── animeCountdownBackend/      # Spring Boot Backend API
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/           # Java source code
│   │   │   └── resources/      # Application configs
│   │   └── test/               # Backend tests
│   ├── Dockerfile              # Backend containerization
│   ├── docker-compose.yml      # Local development setup
│   └── pom.xml                 # Maven dependencies
│
├── .github/                    # GitHub workflows & configs
├── LICENSE                     # MIT License
└── README.md                   # This file

---

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Java 17+ and Maven
• PostgreSQL 14+
• Docker (optional, for containerized setup)

Frontend Setup

cd animeCountdownApp
npm install
npm start

The application will be available at http://localhost:4200/

Backend Setup

cd animeCountdownBackend
./mvnw spring-boot:run

The API will be available at http://localhost:8080/

Docker Setup (Optional)

cd animeCountdownBackend
docker-compose up

---

🗺️ Roadmap

✅ Completed Features

• Search Functionality
  • Real-time search bar with autocomplete
  • Database filtering and query optimization
  • Detailed media information pages
• User Authentication
  • Secure sign-in/sign-up system
  • JWT-based authentication
  • User profile management
• Weekly Schedule
  • Day-of-week organization
  • Live countdown timers
  • Airing soon section
• Favorites System
  • Save favorite anime
  • Personal favorites page
• Responsive Design
  • Mobile-first approach
  • Dynamic navbar (hides on scroll down, shows on scroll up)
  • Optimized layouts for all screen sizes

🚧 In Progress

• Push Notifications
  • Email notifications for new episodes
  • Browser push notification support
  • Customizable notification preferences
• English Dub Filter
  • Toggle to show/hide dubbed anime
  • Dub release tracking
• Enhanced Desktop Experience
  • Multi-column layouts for large screens
  • Sidebar with quick filters
  • Picture-in-picture countdown widgets

🔮 Future Enhancements

• Social Features
  • User reviews and ratings
  • Watch lists and episode tracking
  • Community discussion boards
• Advanced Filtering
  • Genre-based filters
  • Studio and producer filters
  • Seasonal archive browsing
• Personalization
  • Theme customization (dark/light mode)
  • Customizable dashboard layouts
  • Watch history tracking
• API Integration
  • Public API for developers
  • Third-party integrations (MAL, AniList)
  • Webhook support

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

---

Made with ❤️ for the anime community