TVMaze ShowList

A modern React application for searching and exploring TV shows using the TVMaze API. Features a clean, card-based UI with TikTok Sans typography and responsive design.

✨ Features

• 🔍 Search for TV shows using the TVMaze API
• 📺 View detailed information about each show (rating, genres, episodes, synopsis)
• 🎨 Modern, card-based UI design with hover effects
• 📱 Responsive layout for mobile and desktop
• 🔤 TikTok Sans typography for a modern look
• 🔒 Secure API calls with HTTPS
• ✅ Input validation and error handling
• 🎯 CSS Variables for consistent theming

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14.0.0 or higher) - Download here
• npm (v6.0.0 or higher) - Comes with Node.js

To check your versions:

node --version
npm --version

🚀 Installation

1. Clone the repository:

   git clone https://github.com/ashawkat/TVMaze-ShowList.git
   cd TVMaze-ShowList

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to:

   http://localhost:3000
   

📦 Dependencies

This project uses the following main dependencies:

Package	Version	Description
react	^18.2.0	Core React library
react-dom	^18.2.0	React DOM rendering
react-router-dom	^5.3.4	Routing for React
react-scripts	^5.0.1	Create React App scripts
dompurify	^3.3.0	XSS sanitizer for HTML
whatwg-fetch	^3.6.2	Fetch API polyfill

Dev Dependencies

Package	Version	Description
@testing-library/jest-dom	^5.16.5	Jest DOM matchers
@testing-library/react	^13.4.0	React testing utilities
@testing-library/user-event	^14.4.3	User event simulation

🏗️ Building for Production

1. Create an optimized build:

   npm run build

2. The build files will be in the build directory.

3. To serve the production build locally:

   npx serve -s build

📜 Available Scripts

Command	Description
npm start	Runs the app in development mode
npm test	Launches the test runner
npm run build	Builds the app for production
npm run eject	Ejects from Create React App (one-way operation)

📁 Project Structure

TVMaze-ShowList/
├── public/                 # Static files
│   ├── index.html         # HTML template
│   ├── manifest.json      # PWA manifest
│   └── favicon.ico        # App icon
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── app/          # Main app component
│   │   ├── intro/        # Intro text component
│   │   ├── loader/       # Loading indicator
│   │   ├── main/         # Main routing component
│   │   └── serieslist/   # Series list component
│   ├── container/         # Page-level components
│   │   ├── series/       # Series search page
│   │   └── singleseries/ # Series detail page
│   ├── styles/           # Global styles
│   │   └── variables.css # CSS custom properties
│   ├── assets/           # Static assets (images, etc.)
│   ├── index.js          # App entry point
│   └── index.css         # Global styles
├── package.json           # Project dependencies
├── .gitignore            # Git ignore rules
├── LICENSE               # GPL-3.0 License
└── README.md             # This file

🛠️ Technologies Used

• React 18 - UI library
• React Router DOM v5 - Client-side routing
• CSS Custom Properties - Theming and variables
• TikTok Sans Font - Typography (via Google Fonts)
• TVMaze API - TV show data
• Create React App - Build tooling

🔒 Security Features

• ✅ HTTPS API calls to TVMaze
• ✅ Input validation and sanitization
• ✅ Content Security Policy headers
• ✅ Error handling for API failures
• ✅ XSS prevention through React's built-in escaping

🔧 Troubleshooting

Common Issues

1. Port 3000 already in use:

   # Kill the process using port 3000
   npx kill-port 3000
   # Or run on a different port
   PORT=3001 npm start

2. Node modules issues:

   # Remove node_modules and reinstall
   rm -rf node_modules package-lock.json
   npm install

3. Build fails:

   # Clear npm cache and reinstall
   npm cache clean --force
   npm install

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a 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

📄 License

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.

👤 Author

Ashawkat

• GitHub: @ashawkat
• Repository: TVMaze-ShowList

🙏 Acknowledgments

• TVMaze for providing the free TV show API
• Create React App for the project scaffolding
• Google Fonts for TikTok Sans typography

---

⭐ If you found this project helpful, please give it a star on GitHub!