A simple movie app that uses D3.js to visualize movie data.
This app is still in development. Live demo is here
The objective of the app was to help users with their academic and market research by providing them with a simple and easy to use tool to visualize movie data. Some users prefer visual cues to decide between what to watch and what not to watch. This app helps them with just that only. With just a glance, a user can decide whether a movie is worth watching or not by looking at the ratings and the box office revenue and also compare it with other movies.
- React.js (frontend)
- TailwindCSS and Daisy UI (design)
- D3.js (data visualization)
movie-app-with-d3
├── index.html
├── package.json
├── postcss.config.js
├── public
| └── assets
| ├── 404_new.svg
| ├── banner.png
| ├── icon-gray.svg
| ├── icon-white.svg
├── README.md
├── src
| ├── App.jsx
| ├── components
| | ├── ChartModal.jsx
| | ├── Error.jsx
| | ├── Movie.jsx
| | ├── MovieCard.jsx
| | ├── Search.jsx
| | ├── Trending.jsx
| | ├── TrendingCard.jsx
| | └── TrendingMovies.jsx
| ├── functions.js
| ├── index.css
| └── main.jsx
└── tailwind.config.js
✅ Search for movies
✅ Trending movies with functional pagination
✅ Individual movie page with more details
✅ Similar movies recommendations
✅ Data visualization for easy comparison and analysis
✅ Simple and friendly UI
- Add error handlers, 404 page and toast message
- Add theme switcher
- Finish responsive design
- Finish styling for light theme
- Add more visualizations (metascore, imdb rating, etc.)
- Add bar chart for box office revenue
- Add trending page with pagination
- Add tooltip for bar chart