Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anchaldevbytes/quadb-task

Internshala task for movie screen app.
https://github.com/anchaldevbytes/quadb-task

Last synced: 16 days ago
JSON representation

Internshala task for movie screen app.

Awesome Lists containing this project

README

        

# QuadB Task - Movie Booking App

## Overview

QuadB Task is a simple Movie Booking App developed using React, Redux Toolkit, and TailwindCSS. This app fetches movie data from an external API, maintains user details in local storage, and allows users to book tickets for their favorite movies.

Deployed link : [QuadB-task Netlify](https://quadbapp.netlify.app/)

![HOME](./src/assets/home.png)

## Features

- **Movie Listings:** View a list of highlighted movies.
- **Movie Details:** Click on a movie card to view detailed information about the selected movie.
- **Book Tickets:** Book tickets for your favorite movies by providing your name and email.
- **Persistent User Details:** User details are stored in local storage for a seamless experience.

## Technologies Used

- **React:** Front-end library for building user interfaces.
- **Redux Toolkit:** State management library for React applications.
- **TailwindCSS:** Utility-first CSS framework for styling.
- **API:** Fetches data from an external movie database.

## Getting Started

1. Clone the repository:

```bash
git clone https://github.com/anchalraj31082004/quadb-task.git
```

2. Install dependencies:
```bash
cd quadb-task
npm install
```

3. Run the app
```bash
npm run dev
```
4. Open your browser and visit http://localhost:5173 to view the app.

## Project Structure

* Home: Displays a list of highlighted movies.
* MovieDetail: Displays detailed information about a selected movie and allows users to book tickets.
* Footer: Displays information about the app and navigation links.

## Other Screenshots

![MOVIE](./src/assets/movie.png)

![BOOKING](./src/assets/booking.png)

### You can check the deployed link and contact at [E-mail]([email protected]) or [Twitter](https://twitter.com/AnchalTwt)