Skip to content

πŸ“š A full-stack library management application built with React, Node.js, Express.js, MongoDB, and integrated with Auth0 for secure user authentication.

License

Notifications You must be signed in to change notification settings

danwongwt/Johny-Library

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Contributors Forks Issues MIT License

Logo

Johnny Library

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

About The Project

landing page 1

landing page - mobile

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
React Frontend library
Tailwindcss Utility-first CSS framework
Node.js Backend runtime environment
Express.js Node.js web application framework
MongoDB NoSQL database
Mongoose ODM for MongoDB and Node.js
Auth0 Authentication and authorization platform
Docker Containerization platform
Firebase 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. search resource search resource - mobile

  • 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. reserve resource

  • 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. search room browse room room detail browse room - mobile

  • 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. account detail

(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

(back to top)

Acknowledgments

(back to top)

About

πŸ“š A full-stack library management application built with React, Node.js, Express.js, MongoDB, and integrated with Auth0 for secure user authentication.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.7%
  • Other 1.3%