Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bhavya-dang/d3movie
A simple movie app that uses D3.js to visualize movie data.
https://github.com/bhavya-dang/d3movie
d3js hacktoberfest react tailwindcss
Last synced: 30 days ago
JSON representation
A simple movie app that uses D3.js to visualize movie data.
- Host: GitHub
- URL: https://github.com/bhavya-dang/d3movie
- Owner: bhavya-dang
- Created: 2023-06-19T18:13:38.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-16T10:15:07.000Z (9 months ago)
- Last Synced: 2024-03-17T01:28:36.131Z (9 months ago)
- Topics: d3js, hacktoberfest, react, tailwindcss
- Language: JavaScript
- Homepage: https://d3-movie.vercel.app
- Size: 325 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# D3Movie
A simple movie app that uses D3.js to visualize movie data.
> This app is still in development.
> Live demo is [_here_](https://d3movie.vercel.app/)
## Objective
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.
## Tech Stack
- React.js (frontend)
- TailwindCSS and Daisy UI (design)
- D3.js (data visualization)
## Directory Structure
```
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
```
## Features
✅ 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
## Todo
- [x] Add error handlers, 404 page and toast message
- [x] Add theme switcher
- [ ] Finish responsive design
- [x] Finish styling for light theme
- [x] Add more visualizations (metascore, imdb rating, etc.)
- [x] Add bar chart for box office revenue
- [x] Add trending page with pagination
- [x] Add tooltip for bar chart
## References
[IMDB Website](https://imdb.com/)
[daisyUI](https://daisyui.com/)