Johnny Library

An online library allows you to reserve books and book study rooms
View Demo · Report Bug · Request Feature

About The Project

Welcome to our full-stack library management application. This project is designed to showcase our capabilities in handling both front-end and back-end development. It features basic functionalities including resource reservation for library resources, and the ability to book study rooms based on date and available equipment.

We've integrated user authentication using Auth0 and opted for MongoDB to manage and store data efficiently, ensuring a robust and scalable backend architecture. The front-end is built with a responsive design using Tailwind CSS, providing a seamless experience across devices and leveraging progressive web application capabilities.

😊 We warmly welcome any feedback or suggestions as we aim to further develop our skills and improve this application. 😊

Key Features:

• User Authentication: Secure account registration and login with Auth0.
• Resource Management: Offers a catalog of 399 diverse resources, including books and DVDs etc. Users can search for items by title, view detailed descriptions, and reserve resources. Each reservation is tracked and stored in the user's profile.
• Room Booking System: Features a dynamic room booking service that allows users to view available study rooms filtered by date and equipment. Users can book rooms for specific time periods.
• Data Handling: MongoDB for robust storage and handling of resources, users, rooms, and bookings data.

(back to top)

Built With

Framework / Library	Purpose
	Frontend library
	Utility-first CSS framework
	Backend runtime environment
	Node.js web application framework
	NoSQL database
	ODM for MongoDB and Node.js
	Authentication and authorization platform
	Containerization platform
	Frontend hosting platform

(back to top)

Getting Started

To get a local copy of this project up and running, follow these steps:

1. Clone the Repository

   git clone https://github.com/Marjorieccc/Johnny-Library.git
   

2. Install Dependencies

   Navigate to the project directory:

   cd Johnny-Library
   

   Install backend dependencies:

   cd server
   npm install
   

   Install frontend dependencies:

   cd client
   npm install
   

3. Set up MongoDB

   This project uses MongoDB for data storage. For a local setup, install and start MongoDB following the official guidelines. Alternatively, you can use MongoDB Atlas for a cloud-based solution, where you can create a cluster and follow the setup instructions provided by Atlas.

4. Set up Environment Variables

   Create a .env file in the root directory of the server folder and add the following environment variables:

   MONGO_USERNAME = your-mongodb-username
   MONGO_PASSWORD = your-mongodb-password
   MONGO_DATABASE = your-mongodb-database
   MONGO_COLLECTION = your-mongodb-collection
   SERVER_PORT = 8080
   

   Create a authConfig.json file in src/component/auth0 directory of the client folder and add the following environment variables:

   {
    "domain": <your Auth0 domain>,
    "clientId": <your Auth0 client id>,
    "audience": <your Auth0 api app unique identifier>,
    "scope": "openid profile email"
   }
   

   Replace the placeholders with your actual MongoDB URI and Auth0 credentials.

5. Import Sample Data (Optional)

   This project includes sample data that you can import into your MongoDB database to explore all features fully. You can access the sample data from here (TBC: upload json)

   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database --collection resources --file resources.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection resources_audience --file resources_audience.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection resources_categories --file resource_categories.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection resources_formats --file resources_formats.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection resources_languages --file resources_languages.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection rooms --file rooms.json	
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection rooms_sizes --file rooms_sizes.json	
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection equipments --file equipments.json
   mongoimport --db your-mongodb-username:your-mongodb-password@localhost:27017/your-database  --collection reservation --file reservation.json
   
   

   Replace your-mongodb-username, your-mongodb-password, localhost:27017, and your-database-name with the appropriate values based on your local or Atlas setup and import the Data into MongoDB.

6. Start the Application

   Navigate back to the root directory:

   cd ..
   

   Start the backend server:

   cd server
   npm start
   

   Start the frontend development server in a new terminal:

   cd client
   npm start
   

   The application should now be running locally.

(back to top)

Usage

Visit Johnny Library to explore the online library. The website is designed to be intuitive, allowing users to browse resources, reserve books, and book study rooms with ease.

Features and Navigation

• Resource Browsing: Users can search for resources using the search bar or browse through categories.

• Reservations: To reserve resource, click on the item you are interested in and select the 'Reserve' option. You will need to be logged in to complete this action.

• Room Booking: Access the room booking feature from the main menu. Here, you can view available rooms, check their equipment, select a date, and book a slot.

• Account Page: The account page serves as a central hub for users to manage their personal information, view detailed records of reserved items, and review their room booking history.

(back to top)

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See here for more information.

(back to top)

Contact

• Dan WONG - Email | Github | Linkedin
• Johny CHUNG - Email | Github | Linkedin
• Ken NG - Email | Github | Linkedin
• Marjorie CHEUNG - Email | Github | Linkedin

(back to top)

Acknowledgments

• Dataset from Arthur Koch
• GitHub Pages
• Img Shields
• ImgBB

(back to top)