MyLibrary Tailwind Templates

Mylibrary

MyLibrary šŸ“š is a modern library management web app built with React.js, šŸ” Auth0 for authentication, šŸ“– Google Books API for book data, and styled with šŸŽØ Tailwind CSS for a delightful user experience.

#auth0 #font-awesome #googlebooksapi #javascript #react-autocomplete #reactjs #tailwindcss #toastify-js #hacktoberfest #hacktoberfest-accepted
Demo Download

MyLibrary šŸ“š

website

MyLibrary is a modern and user-friendly library management web application built with React.js, Vite, Tailwind CSS, and powered by the Google API for fetching book data. It also incorporates Auth0 for secure authentication and session management, Font Awesome icons for styling, Axios for API calls, React Infinite Scroll for lazy loading, Toastify for notification messages, and react-autocomplete for search suggestions.

šŸšØ Important Note:

We are currently in the process of transitioning our authentication provider to Firebase. Please refer to the firebase branch for the latest updates and instructions related to Firebase authentication.

šŸ”— Live Link

https://github.com/user-attachments/assets/725b2b4a-5b79-4c4b-bc12-24aac7006516

šŸ”— Video Link

Table of Contents

Tech Stack šŸ› ļø

  • Vite - Fast React.js build tool.
  • React.js - JavaScript library for building user interfaces.
  • Tailwind CSS - A utility-first CSS framework for fast and customizable styling.
  • Google Books API - Used as the endpoint for book data.
  • Auth0 - Authentication and session management.
  • Font Awesome - Icon library for styling.
  • Axios - Promise-based HTTP client for API calls.
  • React Infinite Scroll - Infinite scrolling component for efficient pagination.
  • Toastify - React notification library for user feedback.
  • react-autocomplete - React component for search suggestions.
  • Vercel - Deployment platform for hosting web applications.

Features āœ…

  • An aesthetically pleasing and optimized loading animation.
  • New user signup and login, using Proper authentication and sessions (Sign in with social media, Email and mobile number verification gets extra brownie points).
  • Users can see the list of books, preferably using an actual endpoint (API) as a data source for books.
  • Instead of loading all the results on the page, perform an optimized pagination (infinite scrolling with lazy loading).
  • A well-built search bar, with suggestions (like Google Search, YouTube) that suggests and searches based on all the fields like Book name, Author name, Genre, Year of publishing, etc.
  • An exclusive way of indicating the availability of the books, and the number of available copies, along with the previously mentioned fields.
  • Users can filter and sort the list of books based on Title, Author, Subject, and Publish - date.
  • Show the count of books upon every search results and upon every filtering.
  • Implement a cart feature, upon adding books to the cart, the user will be able to check out and rent them. This should reflect in the availability and number of copies fields.

Configuration - Setting Up API Keys šŸ› ļø

To use certain features of the MyLibrary project, you'll need to configure the following API keys:

  1. šŸ“š Google Books API Key: This key is required to fetch book information from Google Books API.

  2. šŸ” Auth0 Domain and Client ID: These are required for authentication and user management.

Follow these steps to set up the API keys:

1. Google Books API Key

To obtain a Google Books API Key:

  1. šŸŒ Visit the Google Cloud Console.
  2. šŸ—ļø Create a new project if you haven't already.
  3. šŸ› ļø Navigate to the "APIs & Services" > "Credentials" section.
  4. āž• Click on "Create Credentials" and select "API Key."
  5. šŸ“‹ Copy the generated API key.

2. Auth0 Domain and Client ID

To obtain Auth0 credentials:

  1. šŸŒ Visit Auth0 and sign in or create an account.
  2. šŸ—ļø Create a new application or use an existing one.
  3. āš™ļø Navigate to the "Settings" of your Auth0 application.
  4. šŸ“‹ Find and copy the "Domain" and "Client ID."

3. Create a .env File

Once you have obtained the necessary API keys, create a .env file in the project root directory (if it doesn't already exist) and add the following environment variables with your API keys:

VITE_REACT_APP_GOOGLEBOOK_API_KEY=YOUR_GOOGLEBOOK_API_KEY
VITE_REACT_APP_AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
VITE_REACT_APP_AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID

Replace YOUR_GOOGLEBOOK_API_KEY, YOUR_AUTH0_DOMAIN, and YOUR_AUTH0_CLIENT_ID with the respective values you obtained from Google and Auth0.

Make sure to keep your .env file secure and do not share your API keys publicly.

Now, you have successfully configured the required API keys for the MyLibrary project. You can start using these keys in your code to access Google Books API and authenticate with Auth0.

Project Dockerization šŸ“¦

To run RepoSavant in a Docker container, follow these steps:

  1. Clone this repository.
  2. Build the Docker image:
    docker build --pull --rm -f "Dockerfile" -t mylibrary:latest
  3. Run the Docker container:
    docker run --rm -d  -p 8080:8080/tcp mylibrary:latest

Getting Started šŸš€

Follow these steps to set up, run, and deploy MyLibrary on Vercel:

  1. Clone the repository:
git clone https://github.com/suryanshsingh2001/MyLibrary.git
cd client
  1. Install Dependencies when in client Directory
npm install
  1. Configure environment variables: Create a .env file and provide the necessary API keys and Auth0 credentials.
VITE_REACT_APP_GOOGLEBOOK_API_KEY=YOUR_GOOGLEBOOK_API_KEY

VITE_REACT_APP_AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
VITE_REACT_APP_AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID
  1. Start the development server:
npm run dev

  1. Open your browser and access http://localhost:5173.

  2. Deploy on Vercel:

  • Sign up for an account on Vercel.
  • Follow Vercel's deployment instructions to connect your GitHub repository and deploy your app.

Contributing šŸ¤

We welcome contributions from the community! Whether you are a developer, designer, writer, or enthusiast, there are many ways to get involved. Check out our Contributing Guidelines to learn more about how you can contribute.

Code of Conduct šŸ“œ

Please review our Code of Conduct to understand the expectations for behavior within our community.

Hacktoberfest Contribution šŸŽƒ

MyLibrary actively participates in Hacktoberfest, an annual celebration of open-source contributions. Here's how you can join the Hacktoberfest fun with us:

  1. Look for issues labeled as Hacktoberfest in our GitHub issue tracker. These are specially curated issues for Hacktoberfest contributors.

  2. Contribute to these issues by following the guidelines mentioned in each issue. You can work on bug fixes, features, or enhancements.

  3. Submit your pull request (PR) with your contribution. Our team will review your PR and provide feedback.

  4. Once your PR is merged, it will count towards your participation in Hacktoberfest. Plus, you'll be helping us improve MyLibrary!

Security šŸ”’

The security of MyLibrary is important to us. If you discover any security vulnerabilities, please review our Security Policy for reporting guidelines.

Feedback šŸ’¬

We value your feedback and suggestions. Whether you have ideas for new features, bug reports, or general feedback, please visit our Feedback Section to share your thoughts.

License šŸ“

MyLibrary is open-source software licensed under the MIT License.

"Let's write the next chapter together!" šŸ“šŸŒŸ Happy coding and happy reading! šŸ“ššŸš€

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes