I Built A Library Management System With Charts Using React, Supabase, Shadcn/ui And React Query
Check out the video above to see a demo of the library management system application built using React.
What's Included
This application includes the following screens:
Dashboard - To see a list of all books with filter and pagination functionality
Add Book - A way to add a new book
Students List - To see a list of all students with filter and pagination functionality
Add Student - A way to add a new student
Issue Book - A way to assign a new book to a student (a maximum of 10 books can be issued to each student)
Return Book - A way to return an already issued book from a student
Student Analytics - A way to see a list of all books assigned to students searchable by student ID
Books Chart - A bar chart showing books assigned to students that are searchable by student ID. The chart shows how many books are issued per month and the list of books issued, on click on each bar from the bar chart
Forgot password. - A way to reset the password if ever forgotten
Technologies Used
For this application, we're using:
React for building Frontend
Supabase is a database for storage and authentication - available for free
Shadcn/ui library which is the most popular and highly customizable component library that uses Tailwind CSS for styling
TanStack Query ( React Query ) - The most popular React library for implementing caching to avoid fetching data on every page visit
As we're using React, we don't have to worry about hosting as we can host on any hosting provider like Netlify, Vercel, AWS or any of your favorite hosting providers.
As we're using the Shadcn/ui library, we can also easily customize the application to the theme or colors of our choice.
Thanks for Reading!
Want to learn more about the application or want to see a live demo of the application? connect me on yogesh@yogeshchavan.dev
Want to stay up to date with regular content regarding JavaScript, React, and Node.js? Follow me on LinkedIn.
My Courses: https://courses.yogeshchavan.dev/
My Blog: https://blog.yogeshchavan.dev/
My LinkedIn: https://www.linkedin.com/in/yogesh-chavan97/
My GitHub: https://github.com/myogeshchavan97/