Giter VIP home page Giter VIP logo

evanigwilo / book-match Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 1.0 392 KB

Book Match is a web application equipped with the capability to match individuals' personalities with literature genres and specific books using vector algorithms.

Home Page: https://petstore.swagger.io/?url=https://raw.githubusercontent.com/evanigwilo/book-match/main/backend/docs/api-definition.yml

Shell 0.62% TypeScript 98.36% JavaScript 0.92% CSS 0.10%
algorithms chatjs docker mongodb nextjs puppeteer reactjs redux-toolkit responsive-design rest-api state-management typescript vectors web-scraping

book-match's Introduction

TypeScript

Book Match is a web application equipped with the capability to match individuals' personalities with literature genres and specific books using vector algorithms.

The API has the functionality to create students, questions, and match specific genres of books based on users' answers to the questions.

The UI boasts an easy-to-use design that offers a straightforward graphical visual representation of the matching results.

This solution uses Node.js runtime, Express.js for the API layer, MongoDB for non-relational data, Tailwind CSS for styling, Puppeteer for web scraping using Chromium over the DevTools Protocol, and Next.js for the UI

You can explore the REST API

How the web scraping tool works

The web scraping tool leverages Puppeteer and headless browsing to automate the process of navigating to a webpage, extracting book details using selective DOM queries, and returning the information in a structured format.

This approach provides a robust and controlled mechanism for scraping data from the target website.

Design Notes

  • Straightforwardness of visual representation of results
  • Effective, efficient and useful book matching system
  • Responsive web design
  • Easy-to-use UI

Screenshots

API Routes

Methods Routes Description
POST /student Creates or gets a student with a random question
PUT /student Updates a student answers

Technologies Used

  • Next.js (+SSR)
  • React
  • Tailwind CSS
  • Express.js
  • MongoDB
  • Puppeteer
  • Redux Toolkit
  • Axios
  • Others...

Requirements

Before getting started, make sure you have the following requirements:

Run The Project

Follow these steps to get your development environment set up:

  1. Clone this repository locally;
# Change to the desired directory
$ cd <desired-directory>

# Clone the repo
$ git clone https://github.com/evanigwilo/book-match.git

# Change to the project directory
$ cd book-match
  1. Change environmental variables file name in backend folder from .env.example to .env

  2. Change environmental variables file name in frontend folder from .env.local.example to .env.local

  3. Update the .env or .env.local file configuration values (optional)

  4. At the root directory, run the following command to start a mongo database in a docker container

# Create external docker volume for the mongo development database
$ docker volume create book-match_mongo-db

# Build and run mongo database in a development container environment
$ docker-compose --env-file ./backend/.env -p book-match-dev-stack -f ./backend/docker-compose.yml up --build -d
  1. At the root directory, run the following command to start the backed server
# Change to the project directory
$ cd backend

# Install dependencies
$ yarn install

#  Run app
$ yarn development
  1. At the root directory, run the following command to start the web app
# Change to the project directory
$ cd frontend

# Install dependencies
$ yarn install

#  Run app
$ yarn dev
  1. The web-app will be running at http://localhost:3000 and the api-server will be running at http://localhost:4000/v1

Note: When configuring Puppeteer, ensure that you adjust the 'executablePath' according to the actual installation path of Chrome on your system. This adjustment should be made in the environmental variable file within the backend.

Linux - /usr/bin/google-chrome
Mac - /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Windows - C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe

Useful commands

# Stops backend development containers and removes containers, networks and volumes
$ docker-compose --env-file ./backend/.env -p book-match-dev-stack -f ./backend/docker-compose.yml down --remove-orphans

# Removes the external docker volume for the mongo database
$ docker volume rm book-match_mongo-db

References

Next.js Documentation - learn about Next.js features and API.

Puppeteer

MongoDB

Redux Toolkit

Tailwind CSS

Swagger: API Documentation & Design Tools for Teams

book-match's People

Contributors

evanigwilo avatar

Watchers

 avatar

Forkers

simran212001

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.