search

suryanshsingh2001 / 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.
https://mylibrary01.vercel.app/
MIT License
21 stars 17 forks source link
auth0 font-awesome googlebooksapi hacktoberfest hacktoberfest-accepted hacktoberfest2023 hacktoberfest2024 javascript react react-autocomplete reactjs tailwindcss toastify-js

readme

MyLibrary šŸ“š

version License GitHub Issues

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/suryanshsingh2001/MyLibrary/assets/80690023/175a25aa-e719-4210-abef-6f1f119b8d11

https://github.com/user-attachments/assets/7e44b28c-73c9-4d77-916e-cb5cbb0b718f

Table of Contents

Tech Stack šŸ› ļø

Features āœ…

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! šŸ“ššŸš€