Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codestun/FlickPick-React-client
FlickPick is a concert movie-themed application developed using React.
https://github.com/codestun/FlickPick-React-client
css html javacsript react redux rest-api-client
Last synced: 3 months ago
JSON representation
FlickPick is a concert movie-themed application developed using React.
- Host: GitHub
- URL: https://github.com/codestun/FlickPick-React-client
- Owner: codestun
- Created: 2023-07-24T18:57:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-19T10:58:48.000Z (over 1 year ago)
- Last Synced: 2024-11-09T23:14:55.240Z (3 months ago)
- Topics: css, html, javacsript, react, redux, rest-api-client
- Language: JavaScript
- Homepage: https://myflickpick.netlify.app/login
- Size: 2.31 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# flickpick-client
[flickpick Live App](https://myflickpick.netlify.app/login)
## Objective
`flickpick` is a concert movie-themed application developed using React.
The app serves as a client-side interface, enabling concert movie enthusiasts to browse movies,
access detailed information, and manage their profiles.
Users can also save data about their favorite films. The client communicates seamlessly with the
[existing server-side (REST API and database)](https://github.com/codestun/flickpick),
ensuring a consistent and enriched user experience.
## Features
### Essential Views & Features:
- **User Registration and Login**: New users can register, and existing users can log in.
- **Movie Browsing**: View a list of movies with their posters, titles, and descriptions.
- **Detailed Movie Info**: Clicking on a movie provides detailed information.
- **Profile Management**: Users can update their profiles, view favorite movies, and even deregister their account.
They also have the option to delete their account and can add or remove movies from their list of favorites.
- **Search and Filter**: Users can search for movies and filter results based on criteria.
### Optional Features:
- **Actors View**: Information about different actors.
- **Genre View**: Data about a genre with example movies.
- **Director View**: Data about a director with example movies.
- **Related Movies**: Display a list of related or similar movies in the Single Movie view.
## Tech Stack
- **React**: A JavaScript library for building user interfaces.
- **JSX**: Syntax extension for JavaScript recommended by React.
- **Redux**: A predictable state container for JavaScript apps.
- **Bootstrap**: A popular CSS framework for creating responsive layouts.
- **Parcel**: A fast, zero configuration web application bundler.
## Development Environment
Ensure you have Node.js and npm installed on your machine before setting up the app.
### Setup Application
1. Install Parcel globally:
```
npm install -g parcel
```
2. Install necessary packages:
```
npm install -save react react-dom
```
3. Create a `src` folder in the project directory. Inside this folder, create three files:
- `index.jsx`: Entry point for your React application.
- `index.scss`: Global styles for your app.
- `index.html`: Main HTML file.
4. To run the application in development mode:
```
parcel src/index.html --no-cache
```
Navigate to `http://localhost:1234` if the app doesn't automatically open in a new browser tab/window.