🎬 Kinoafisha

📋 Overview

Kinoafisha is a comprehensive web application designed for movie enthusiasts and cinema administrators. Built with React and TypeScript, it offers an intuitive interface for browsing movies, managing screenings, and personalizing user experiences. The project was developed as part of the SoftServe practice program.

✨ Features

👤 For Users

• Movie Browsing: Explore a vast collection of movies with filtering and search capabilities
• Detailed Movie Information: Access comprehensive details about movies, cast, and crew
• Session Management: View upcoming screenings with time and seat availability
• Ticket Booking: Reserve and purchase tickets for movie sessions
• Personalized Recommendations: Get movie suggestions based on viewing history
• User Profiles: Manage personal information and viewing preferences

🔧 For Administrators

• Content Management: Add, edit, or remove movies from the catalog
• Screening Management: Schedule and manage movie sessions across different theaters
• Analytics Dashboard: Track ticket sales, popular movies, and viewer demographics
• User Management: Handle user accounts and privileges

🛠️ Technologies Used

• Frontend Framework: React with TypeScript
• State Management: Redux/Context API
• Styling: CSS/SCSS with responsive design
• UI Components: Custom components with Material-UI
• API Integration: RESTful API consumption
• Authentication: JWT-based user authentication
• Testing: Jest and React Testing Library

🚀 Getting Started

Prerequisites

• Node.js (v14.0.0 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/amormul/React-Practice-SoftServe.git
   cd React-Practice-SoftServe

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env
   # Edit the .env file with your configuration

4. Start the development server

   npm start
   # or
   yarn start

5. Access the application

   Open http://localhost:3000 in your browser
   

📁 Project Structure

src/
├── assets/         # Static assets like images and icons
├── components/     # Reusable UI components
├── context/        # React Context API files
├── hooks/          # Custom React hooks
├── pages/          # Application pages
├── services/       # API service integrations
├── store/          # State management (Redux)
├── styles/         # Global styles and theme configurations
├── types/          # TypeScript type definitions
├── utils/          # Utility functions
└── App.tsx         # Root component

🔍 Key Concepts

• Component-Based Architecture: Modular design with reusable components
• Type Safety: Leveraging TypeScript for robust code quality
• Responsive Design: Seamless experience across all device sizes
• Progressive Web App: Installable on mobile devices with offline capabilities
• User-Centric Design: Intuitive UI/UX with accessibility features

🧪 Testing

Run the test suite with:

npm test
# or
yarn test

🚢 Deployment

Build a production-ready version:

npm run build
# or
yarn build

Deploy to GitHub Pages:

npm run deploy
# or
yarn deploy

🤝 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/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

📚 Learning Resources

• React Documentation
• TypeScript Handbook
• SoftServe Academy

📄 License

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

👏 Acknowledgments

• Thanks to SoftServe for providing the practice opportunity and mentorship
• All contributors and reviewers who helped shape this project
• The open-source community for the amazing tools and libraries

---

Developed with ❤️ — Last updated: June 8, 2025