Cinea

This is a sample application to demonstrate the use of Recoil with React and Typescript for data-initialized application state management.

You can preview this react app at: https://craco-cinea-v2.vercel.app/.

Support

• Create React App 5 powered by CRACO Configure and extend CRA webpack configuration
• Typescript usefull to validate all code statically with type safe
• Airbnb Linting style
• Testing Library
• Material Ui 5
• Recoil state management
• dbuilder repo
• react-beautiful-dnd

Start the application

Clone or download the project then run

$ yarn install
$ yarn start
# OR
$ npm install
$ npm run start

Features

• Home Movie list
  • Suggestion carousel
  • Paginate movie by query
  • Filter year of publication, genre
  • Add/remove to watchlist button
  • Card view (thumbnail, title, year, star)
• Movie detail
  • Add/remove to watchlist button
  • View: thumbnail, title, description, star
  • View: duration, 10 last reviews, complete cast
• Watch list
  • List views
  • Action to delete movie from list
  • Reorder list drag and drop

Structure

├── assets
├── components
|  ├── commons
|  |  └── WatchList
|  ├── layout
|  |  └── Nav
|  └── pages
|     ├── Home
|     |  ├── MovieList
|     |  ├── Suggestion
|     |  └── SuggestionList
|     └── Movie
├── hooks
├── interfaces
├── services
└── store