UNIVERSITY OF WEST ATTICA
SCHOOL OF ENGINEERING
DEPARTMENT OF COMPUTER ENGINEERING AND INFORMATICS

---

Special Topics in Software Engineering

Preze Cinemas Web
Front-end

Panagiotis Petropoulos
Student ID: 20390188

GitHub

Stylianos Xynos
Student ID: 171181

GitHub

---

Supervision

Supervisor: Georgios Prezerakos, Professor

UNIWA Profile · LinkedIn

Athens, February 2024

---

Preze Cinemas Web App - Front-End

Project Overview

This repository contains the front-end UI for the Preze Cinemas Web App.

The front-end is implemented using React.js and focuses exclusively on look & feel, providing a responsive and interactive interface for the cinema booking system.

Note: This repository is front-end only. All business logic, authentication, and data persistence are handled by the back-end: Preze Cinemas Web – Back-End.

---

Repository Structure

Front-end/
├── assign/ # Assignment instructions and reference PDFs
├── cinema_webapp/ # Main React application
│ ├── public/ # Static assets (favicon, manifest, images)
│ ├── src/
│ │ ├── Components/ # React components
│ │ │ ├── Style/ # CSS styling files for each component
│ │ │ ├── Delete.js
│ │ │ ├── EditInput.js
│ │ │ ├── ForgetPassword.js
│ │ │ ├── HeaderHome.js
│ │ │ ├── Home.js
│ │ │ ├── HomeSearch.js
│ │ │ ├── Information.js
│ │ │ ├── LayoutHome.js
│ │ │ ├── Login.js
│ │ │ ├── LogRegContainer.js
│ │ │ ├── MainHome.js
│ │ │ ├── modal.js
│ │ │ ├── MovieIcon.js
│ │ │ ├── Pagination.js
│ │ │ ├── Profile.js
│ │ │ ├── Register.js
│ │ │ ├── RegisterInput.js
│ │ │ ├── Reservations.js
│ │ │ ├── Ticket.js
│ │ │ ├── TicketPurchase.js
│ │ │ ├── ValidationLogin.js
│ │ │ └── ValidationRegister.js
│ │ ├── Images/ # Images used in the UI
│ │ ├── Routes/ # Protected routes and auth providers
│ │ ├── App.js # Main React app component
│ │ ├── index.js # Entry point
│ │ └── index.css # Global styles
├── package.json # NPM dependencies
└── README.md

---

Objectives

• Implement UI components for the cinema booking experience:
  • Home page, movie listing, ticket selection
  • Authentication screens (login/register)
  • Reservation views and ticket display
• Apply CSS styling for visual consistency and responsive layout
• Use React framework to structure the UI into reusable components
• No back-end logic: all components are currently static or use placeholder data
• Prepare front-end to integrate with back-end APIs in future phases

---

Installation & Usage

1. Clone the repository:

git clone https://github.com/Preze-Cinemas-Web/Front-end.git

2. Navigate into the project folder:

cd Front-end/cinema_webapp

3. Install dependencies:

npm install

4. Start the development server:

npm start

5. Open in a browser at:

http://localhost:3000

---

Development Notes

• Components are modular and styled via CSS modules located in Components/Style/.
• Routing and user authentication placeholders are implemented in Routes/.
• Images and static assets are stored in the public/ folder.
• Designed to be integrated with back-end APIs once available.

---

Team

Role	Members
Back-End	2 developers
Front-End	2 developers

---

Related Repositories

Preze Cinemas Back-End