Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozantekin/omdb-frontend-app
The OMDb Frontend App is a single-page application built with React and Redux Toolkit. It allows users to search, filter, and view movie details using the OMDb API.
https://github.com/ozantekin/omdb-frontend-app
lodash nextjs omdb-api phosphoricons reactjs redux redux-toolkit sass typescript vercel
Last synced: 8 days ago
JSON representation
The OMDb Frontend App is a single-page application built with React and Redux Toolkit. It allows users to search, filter, and view movie details using the OMDb API.
- Host: GitHub
- URL: https://github.com/ozantekin/omdb-frontend-app
- Owner: ozantekin
- Created: 2024-12-14T07:37:26.000Z (11 days ago)
- Default Branch: main
- Last Pushed: 2024-12-15T21:25:55.000Z (10 days ago)
- Last Synced: 2024-12-15T22:23:38.082Z (10 days ago)
- Topics: lodash, nextjs, omdb-api, phosphoricons, reactjs, redux, redux-toolkit, sass, typescript, vercel
- Language: TypeScript
- Homepage: https://omdb-frontend-app.vercel.app
- Size: 186 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OMDb Frontend App
## Overview
The OMDb Frontend App is a single-page application built with React and Redux Toolkit. It allows users to search, filter, and view movie details using the OMDb API.
## Features
- **Movie Listing**: Display movies with key information.
- **Pagination**: Show 10 items per page.
- **Search**: Search movies by name.
- **Filtering**: Filter by year and type (Movies, TV Series, Episodes).
- **Detailed View**: View additional movie information.
- **Custom UI**: Built without external UI libraries.
- **URL-based State Management**: Shareable links with preserved state.
## Setup
1. Clone the repository.
```bash
git clone https://github.com/yourusername/omdb-frontend-app.git
cd omdb-frontend-app
```
2. Install dependencies.
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Build the project:
```bash
npm run build
```
5. Start the production server:
```bash
npm start
```
## Dependencies
- **Core**: React, Next.js, Redux Toolkit, React-Redux, lodash.debounce, OMDb API, Phosphor Icons.
- **Development**: TypeScript, SASS, ESLint, Prettier.
## Custom Features
- **Pagination & Table Design**: Custom-built components for flexibility.
- **Debounced Search**: Prevents excessive API calls.
- **Detailed Movie View**: Comprehensive movie information.
## Design Decisions
- **No UI Libraries**: Custom solutions for UI components.
- **Custom Components**: Ensures flexibility and reusability.