Giter Club home page Giter Club logo

leihbase's Introduction

Leihbase

Web application to manage Leihladen, also known as Borrow Stores.

Important

This software is still in active development. It is being used in production for the Leihbar in Cologne, but might be lacking some (for you) critical features.

Features

  • ๐Ÿช A webshop front-end showing borrowable products
  • ๐Ÿ™๏ธ Manage multiple borrow locations
  • ๐Ÿท๏ธ Product category filtering
  • ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘ User sign-up/login
  • ๐ŸŽซ Product reservations

Screenshots

Tech

  • Back-end and API using PocketBase
  • Front-end with server-side rendering using NuxtJS

Deployment

The repository contains fly.toml files to deploy the service as fly.io applications, but can be deployed to any server where Docker containers can run.

Development

Setup

Requirements: Docker

  • $ docker compose build
  • $ docker compose up

Initial content

After starting the service using the setup steps above. Enter some initial data to be able to use the application:

  1. Browse to http://localhost:8080/\_/ to visit the Pocketbase admin interface
  2. Create an admin account
  3. Create a location in the locations collection (make sure to set the location to as 'active')
  4. Create a product in the products collection (make sure to set the product to as 'active')
  5. Now you should be able to visit http://localhost:3000 to visit the front-end

E-mail

When starting the service with docker-compose, a mailhog container starts as well. In Pocketbase (http://localhost:8080/\_/ > Settings > Mail settings) the following SMTP values can be configured:

  • SMTP server host: mailhog
  • Port: 1025
  • Username: <empty>
  • Password: <empty>

Any sent e-mail can then be viewed in the mailhog web interface at http://localhost:8025.

leihbase's People

Contributors

arcomul avatar

Watchers

 avatar

leihbase's Issues

Make reservation notification e-mail configurable per location

Instead of having one single notification e-mail, using the environment variable NOTIFY_EMAIL, it would be great to be able to configure multiple e-mail addresses per location, which should get notified of every reservation which has been made.

Progress

  • Update location collection with a new 'notifications' plain text field
  • Fetch and parse this new notifications field (split the string on comma to extract multiple entries)
  • Update pocketbase/pb_hooks/reservations.pb.js#L60 to send the reservation email to all the given email addresses

Show confirmation after signing up

After signup, go to a confirmation page which confirms a successful signup, then show some options:

  • When in a reservation flow, propose to go back to the product which the visitor was attempting to reserve
  • When signing up without being a reservation flow, show a link to the user profile, or send them to the product overview

Store product search query in URL

So that when one navigates back to the previous (search result) page, the query gets restored and the correct products view gets shown.

Add product slugs

... so that the URLs are a bit nicer and easier to recognize what it is about

Admin: location reservations page

Create an overview page of a location which only members of a location can access.

This overview can page shows:

  • Late reservations
  • Ongoing reservations
  • Upcoming reservations (today, tomorrow, coming week)

Add category slugs

... so that the URLs are a bit nicer and easier to recognize what it is about

Reservation confirmation e-mail

A person reserving a product would like to get a confirmation of that reservation, so that they know the reservation was successful and to potentially look up the details of the reservation at a later stage.

After a reservation has been created, a confirmation is already sent to the location where the reservation has been made. See pocketbase/pb_hooks/reservations.pb.js#L60

This behaviour can also be duplicated to notify the person making the reservation.

Progress

  • E-mail content
  • E-mail template
  • Implement e-mail sending logic

Improve layout and interaction of category selection

The category selection interaction currently takes up a lot of space, and especially on mobile it takes up half the screen, which can result in not realizing that the products below the categories have been updated when selecting one.

Current desktop:

grafik

Current mobile:

grafik

The recipe filter interaction of tasteatlas.com is a great alternative: https://www.tasteatlas.com/recipes

Tasteatlas desktop:

grafik

Tasteatlas.com mobile:

grafik

For Leihbase a similar setup could work well.

New desktop:

grafik

New mobile:

grafik

The categories on mobile can also be scrolled horizontally, instead of having to fold open the whole list.

After selecting a category it jumps to the front of the row so that it is always visible which category is selected.

New reservation e-mail

Add the option to enable e-mail notification of new reservations, which includes the message left by the person creating the reservation.

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.