![image](https://private-user-images.githubusercontent.com/56342160/346378066-4703e9f5-f517-4475-b794-1d44d422e112.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTI1OTQsIm5iZiI6MTcyNDg1MjI5NCwicGF0aCI6Ii81NjM0MjE2MC8zNDYzNzgwNjYtNDcwM2U5ZjUtZjUxNy00NDc1LWI3OTQtMWQ0NGQ0MjJlMTEyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI4VDEzMzgxNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE3NWIyMTllZTYyYzZjNjExMzk5MGIzYTAxMzAxNjc2YzBjYzdjZDEwZGJkMjM5OWVhMjRlN2ZlYmU3NmFjYmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Zaa7R3-YffwBHbutufOQxN-7aIELqVF5Bzl9gAYotEY)
Live at https://analytics-clone.vercel.app/
- project has been built using nextjs (reactjs framework).
- used css preprocessor sass for styling purpose.
- redux-toolkit for handling global states.
- used google charting library to draw required charts.
- a dockerfile and docker-compose.yml has been provided to up and run the app in container.
- use of react-icon package for icons.
- use of typscript for type safety.
You need node version >= 18 to run this web app.
From your command line:
# Clone this repository
git clone https://github.com/neeleshio/analytics-clone.git
# Go into the repository
$ cd analytics-clone
docker compose up
# Install dependencies
npm install
# Run the frontend
npm run dev
VSCode is highly preferred. Please ensure you have installed these extensions:
- Prettier
- eslint
This folder includes stateless components meaning no state has been handled inside the components.
Main components:
- Header
- Sidebar
- Toolbar
- Filter By Date
- Charts
- This foldre is actually where we are importing and using our components as required.
- In these containers, we are handling all the states and side effects.
Inludes 2 files: chartData and sidebarData.
- chartData file has an exported custom function called generateRandomChartData() which is responsible for generating fake static data for our charts.
- Line Chart
- Bar Chart
- Pie Chart