Scribd
Upload
5 views4 pages

Responsive Dashboard Assignment

The assignment involves creating a responsive dashboard with user authentication, news integration, filtering, and payout calculation features. Key functionalities include a dashboard overview, news analytics, export options, and error handling, utilizing modern frameworks like Next.js and state management tools. Additional tasks include setting up the project structure, installing dependencies, and ensuring all functionalities are tested.

Uploaded by

rohit1202.be21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views4 pages

Responsive Dashboard Assignment

The assignment involves creating a responsive dashboard with user authentication, news integration, filtering, and payout calculation features. Key functionalities include a dashboard overview, news analytics, export options, and error handling, utilizing modern frameworks like Next.js and state management tools. Additional tasks include setting up the project structure, installing dependencies, and ensuring all functionalities are tested.

Uploaded by

rohit1202.be21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Responsive Dashboard Assignment

Assignment: Responsive Dashboard with News and Payout Features

Responsibilities:

1. User Authentication:
- Implement secure login functionality using email-password
authentication or third-party tools (e.g., Google, GitHub OAuth).

2. News and Blog Data Integration:


- Fetch data from free third-party news APIs (e.g., News API,
Guardian API).
- Display article/blog counts with details like author, date, and type.

3. Filtering and Search:


- Implement filters to allow users to search by:
- Author
- Date range
- Type (e.g., news, blogs)
- Add a global search bar for quick keyword searches.

4. Responsive Design:
- Build a fully responsive UI compatible with both mobile and
desktop devices.
5. Payout Calculator:
- Allow admins to set a payout per article/blog value.
- Store payout data in local storage.
- Automatically calculate total payouts based on the number of
articles/blogs and their rates.

6. Export Functionality:
- Enable users to export payout reports as:
- PDF
- CSV
- Google Sheets integration.

7. Frontend Frameworks & Tools:


- Use modern frameworks like NextJs for development.
- Ensure proper state management using tools like Redux, Pinia, or
Context API.

Key Features to Implement:

1. Dashboard:
- Overview of total articles/blogs fetched from the API.
- Visual representation of payouts and filters.

2. News Analytics:
- Graphical charts (e.g., bar, pie, or line charts) showing article
trends by author or type.
3. Payout Details:
- A simple table listing authors, articles, and calculated payouts.
- Inline editing for payout rates.

4. Export Options:
- Export filtered or complete data in PDF/CSV/Google Sheets format.

5. Error Handling:
- Graceful fallback for API failures (e.g., display a message if the
news API is unreachable).

Technical Skills Required:


- Frontend Frameworks: React.js, Next.js.
- APIs and Integration: Fetching and handling data from third-party
REST APIs.
- Responsive Design: Expertise in building mobile-first, responsive
UIs using CSS or frameworks like Tailwind CSS.
- State Management: Redux, Recoil or Context API.

Bonus Points:
- Implementing offline mode with IndexedDB or localStorage.
- Incorporating dark mode for the dashboard.
- Ensuring high Lighthouse scores for performance, accessibility, and
SEO.

Development Instructions:
1. Create a new Next.js project:
- Use the command: npx create-next-app@latest project-name

2. Folder structure:
- /pages: Contains Next.js pages (e.g., index.js, _app.js).
- /public: Static assets like images/icons.
- /src: Custom components, services, store, and utilities.
- .env.local: Environment variables for API keys and configurations.

3. Install necessary dependencies:


- npm install bootstrap react-redux @reduxjs/toolkit axios chart.js
html2pdf.js file-saver firebase

4. Run the project:


- Start the server: npm run dev

5. Test all functionalities:


- Authentication, filtering, news fetching, responsive design, payout
calculations, and exports.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy