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:

1. Dashboard - To see a list of all books with filter and pagination functionality

2. Add Book - A way to add a new book

3. Students List - To see a list of all students with filter and pagination functionality

4. Add Student - A way to add a new student

5. Issue Book - A way to assign a new book to a student (a maximum of 10 books can be issued to each student)

6. Return Book - A way to return an already issued book from a student

7. Student Analytics - A way to see a list of all books assigned to students searchable by student ID

8. 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

9. Forgot password. - A way to reset the password if ever forgotten

Technologies Used

For this application, we're using:

1. React for building Frontend

2. Supabase is a database for storage and authentication - available for free

3. Shadcn/ui library which is the most popular and highly customizable component library that uses Tailwind CSS for styling

4. 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/