A modern, mobile-first novel reading application built with Angular 19 and Tailwind CSS.
- 📚 Browse novels with pagination
- 🔍 Search functionality
- 📖 Chapter-by-chapter reading experience
- 🎨 Reader settings (font size, line height, dark mode)
- 🏷️ Genre-based filtering
- 📱 Mobile-first responsive design
- 🌙 Dark mode support
- ✨ Modern UI with Tailwind CSS
- Angular 19 - Latest stable version with standalone components
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Type-safe development
- Mock Data - Local data without backend dependencies
The project follows Angular's feature-based architecture:
src/app/
├── core/
│ ├── data/ # Mock data files
│ │ ├── novels.mock.ts
│ │ ├── chapters.mock.ts
│ │ └── genres.mock.ts
│ └── models/ # TypeScript interfaces
│ ├── novel.model.ts
│ ├── chapter.model.ts
│ ├── genre.model.ts
│ └── pagination.model.ts
├── home/ # Home page feature
│ ├── home.component.ts
│ ├── home.component.html
│ ├── home.component.spec.ts
│ └── home.service.ts
├── novels/ # Novel list feature
│ ├── novels.component.ts
│ ├── novels.component.html
│ ├── novels.component.spec.ts
│ └── novels.service.ts
├── novel-detail/ # Novel detail feature
│ ├── novel-detail.component.ts
│ ├── novel-detail.component.html
│ ├── novel-detail.component.spec.ts
│ └── novel-detail.service.ts
├── chapter-reader/ # Chapter reader feature
│ ├── chapter-reader.component.ts
│ ├── chapter-reader.component.html
│ └── chapter-reader.component.spec.ts
├── search/ # Search feature
│ ├── search.component.ts
│ ├── search.component.html
│ └── search.component.spec.ts
├── genres/ # Genre feature
│ ├── genre.component.ts
│ ├── genre.component.html
│ ├── genre.component.spec.ts
│ └── genres.service.ts
└── shared/ # Shared UI components
├── header/
├── footer/
├── novel-card/
├── pagination/
├── tag-badge/
├── chapter-navigation/
└── reader-settings/
/- Home page with featured and popular novels/novels- Paginated list of all novels/novels/:slug- Novel detail page with chapters/novels/:slug/chapters/:chapterNumber- Chapter reader/search?q=query- Search results/genres/:slug- Genre-specific novel list
- Node.js 18+ and npm
-
Navigate to the project directory:
cd novel-reader -
Install dependencies (already done):
npm install
-
Start the development server:
npm start
-
Open your browser and navigate to:
http://localhost:4200
npm start- Start development servernpm run build- Build for productionnpm test- Run unit testsnpm run watch- Build and watch for changes
The application uses mock data stored in TypeScript files:
- 12 novels with varying genres, statuses, and word counts
- Multiple chapters for testing pagination
- 12 genres with descriptions
- All data is type-safe with TypeScript interfaces
- Implemented using array slicing on mock data
- Page size: 9 for novels, 20 for chapters
- Smart pagination controls with ellipsis
- Adjustable font size (14-24px)
- Adjustable line height (1.5-2.5)
- Dark mode toggle
- Settings persisted in localStorage
- Full-text search across title, synopsis, and tags
- Case-insensitive matching
- Paginated results
- Mobile-first approach
- Breakpoints: sm (640px), md (768px), lg (1024px)
- Optimized for reading on all devices
All components use Angular's standalone API:
- No NgModules required
- Direct imports in component metadata
- Simplified dependency management
- Tailwind CSS for utility-first styling
- Dark mode using
dark:variant - Custom color schemes for light/dark modes
- Full TypeScript support
- Strict type checking
- Interface-based data models
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This is a display-only application. The following features are intentionally NOT included:
- User authentication
- Backend API integration
- User interactions (bookmarks, comments, ratings)
- Reading history
- Admin dashboard
- Real-time updates
This project is created for demonstration purposes.
Built with Angular 19 and Tailwind CSS following Angular's official style guide.