React Js Dashboard - Responsive

ReactJs Dashboard with Google Auth Sign-in/Sign-up feature.

Project Description

I have developed this dashboard as part of an internship hiring assignment for Listed (https://listed.fans/). The dashboard is built using React.js along with a sign-in page that implements basic authentication using Google for user login and signup. To enhance my productivity and streamline my CSS workflow, I utilized SCSS, a CSS compiler engine.

The project is designed to be responsive across various devices; however, as we all know, achieving perfection in code is a constant process of iteration and improvement. Despite our best efforts, bugs can occasionally creep in, and as programmers, we embrace the task of identifying and resolving them.

To enhance the visual appeal of the dashboard, I incorporated some basic @keyframes animations. Although the initial UI design was provided exclusively for desktop screens, I used my creative imagination to design and adapt it for the rest of the screen sizes.

One of the standout features of this project is the dynamic linear chat and pie chart, which are constructed using data fetched from the API: .

Screenshots

Directory Structure

Project Demo

Live Link

• Project Live Link 1: Live Demo - onrender.com

• Project Live Link 3: Live Demo - vercel.app

• Project Live Link 2: Live Demo - netlify.app

Installation

To install and run this React project, follow the steps below:

• git clone https://github.com/03prashantpk/listedAssignment.git
• Go to the folder and install dependencies with: yarn install or npm install
• Run the app with yarn start or npm start

Features

• Google sign-in authentication
• Responsive design
• @keyframes animations
• Dynamic charts from API
• Logout functionality

Troubleshooting

Common issues users might encounter and their solutions are:

Issue: API Key or Data Mismatch in Google authentication?

• Solution: Verify the API Key configuration and data consistency.

Issue: Application crashes/show no data when your are offline.

• Solution: Check your internet connection and try restarting the application.

Issue: User Profile Picure do not appear.

• Solution: This usually happend due to limit exceed. Wait for sometimes or try reloading through different IP.

Contributing

Thank you for considering contributing to this project! Here are some basic guidelines for contributing:

• Bug Reports: Submit detailed bug reports.

• Feature Requests: Submit feature requests or improvement suggestions.

• Pull Requests: Fork the repository and submit a pull request.

• Code Style: Follow the existing code style.

• Testing: Include appropriate tests.

• Documentation: Update project documentation if necessary.

Acknowledgements

• This project utilizes the SCSS engine for CSS compilation.
• The deployment links provided are directly connected and set to public for every successful commit.
• Ensure that your commits are free of bugs before pushing them to the main GitHub repository.

Thank you for your attention to detail and commitment to maintaining a bug-free codebase.

References and Inspirations

• Developed as an internship hiring assignment for "Listed- https://listed.fans/"
• Based on React.js framework with Google authentication
• Utilized SCSS for CSS compilation
• Designed to be responsive for various screen sizes

I would like to express my gratitude to "Listed- https://listed.fans/" for providing the opportunity to work on this project and the inspiration it has provided for its development.

Quotes/Testimonials

Wagerly waiting for this 😃

Authors

• Prashant Kumar Website

Check More Project By Me

Contributors names and contact info

• Prashant Kumar LinkedIn | Instagram | Email |