This content originally appeared on Level Up Coding - Medium and was authored by Yogesh Chavan
In this 1+ hour video tutorial, you will learn to build a library management system application from scratch using React, Supabase, Shadcn/ui, and React Query.
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 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/
Learn How To Build Library Management System With Charts From Scratch Using React (Video Tutorial) was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Yogesh Chavan
Yogesh Chavan | Sciencx (2024-07-11T01:10:02+00:00) Learn How To Build Library Management System With Charts From Scratch Using React (Video Tutorial). Retrieved from https://www.scien.cx/2024/07/11/learn-how-to-build-library-management-system-with-charts-from-scratch-using-react-video-tutorial-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.