Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nadim-nion/product-analysis-website
Created a React + Vite app for product analysis, gathering user opinions on 'Recharge Your Down Battery' by Jhankar Mahbub. Features a Single Page App with Home displaying book details and 3 reviews (expandable to 6), along with a Dashboard Route showcasing 4 charts. Styled using Plain CSS for a clean design.
https://github.com/nadim-nion/product-analysis-website
css3 react-router reactjs
Last synced: about 1 month ago
JSON representation
Created a React + Vite app for product analysis, gathering user opinions on 'Recharge Your Down Battery' by Jhankar Mahbub. Features a Single Page App with Home displaying book details and 3 reviews (expandable to 6), along with a Dashboard Route showcasing 4 charts. Styled using Plain CSS for a clean design.
- Host: GitHub
- URL: https://github.com/nadim-nion/product-analysis-website
- Owner: Nadim-Nion
- Created: 2023-11-16T18:05:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-18T12:57:56.000Z (over 1 year ago)
- Last Synced: 2024-11-11T04:19:10.821Z (3 months ago)
- Topics: css3, react-router, reactjs
- Language: JavaScript
- Homepage: https://product-analysis-website-nion.netlify.app/
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product Analysis Website - React + Vite App
## Book Analysis Website (Assignment 9)
Welcome to the Product Analysis Website, a React + Vite application designed to provide insightful analysis and user opinions on the book 'Reacharge Your Down Battery' by Jhankar Mahbub.
## Key Features:
### 1. Comprehensive Book Opinions
Explore user-generated opinions and comments on the book from a diverse set of readers. The dataset includes crucial information such as usernames, comments, and ratings. The Home page displays a snapshot of the book details and showcases three customer reviews. Click the 'See All Reviews' button or navigate to the 'Reviews' route to access all six reviews.
### 2. Single Page Application with React Router
Utilizing React Router, this website operates as a Single Page Application (SPA) with distinct routes for a seamless and intuitive user experience. The five main routes are:
- Home
- Reviews
- Dashboard
- Blogs
- About
### 3. Interactive Home Page
The Home page not only provides an overview of the book but also offers an interactive interface to explore customer opinions. With the ability to showcase a limited set of reviews initially, users can effortlessly access the complete list by clicking the 'See All Reviews' button or navigating to the 'Reviews' route.
### 4. Insightful Dashboard
Navigate to the Dashboard route to access four visually engaging charts that present key metrics related to the book, including sales, investment, and revenue for the publisher. These charts offer a quick and informative overview of the book's performance.
### 5. Stylish Design with Plain CSS
The website's aesthetics are crafted using Plain CSS, ensuring a clean and visually appealing interface. The use of CSS enhances the user experience and provides a polished look to the entire application.
## How to Use:
1. Clone the repository.
2. Install dependencies using `npm install`.
3. Run the development server with `npm run dev`.
4. Explore the different routes and features of the application.
## Live Website
Netlify: https://product-analysis-website-nion.netlify.app/
Surge: https://odd-fold.surge.sh/
## Deployment
To deploy this project run
```bash
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Nadim-Nion/product-analysis-website.git
git push -u origin main
```
## Screenshots
* Home Page Part-1:
* Home Page Part-2:
* Review Page
* Dashboard Page Part-1
* Dashboard Page Part-2
## Tech Stack
**Client:** React, React Router, Plain CSS
## FAQ
#### Is this website reponsible?
Answer : No
#### Is this website store data to the database?
Answer : I won't store it in the regular storage platform like MongoDB.
## 🚀 About Me
Hi, I am Nadim Mahmud Nion. I have recently concluded my graduation from the department of Computer Science and Engineering (CSE) at the Daffodil International University (DIU). I have been learning MERN Stack Web Development since 2022. I am expertise in the following skills:
* React
* JavaScript
* Advanced JavaScript
* Bootstrap
* Tailwind
* HTML5
* CSS3
* Media Query
I have built multiple projects using these skills. You are invited to my GitHub profile to know about my projects and don't forget to give a star to my projects.
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh