Helft-Lokalen.de

July 5th, 2020

During the Corona / COVID-19 contact closure, local stores were closed for several weeks and later opened with and with great constraints. The idea came to a work colleague: a directory of local retailers and service providers who have changed their distribution channel due to the situation to shipping or takeaway. Each city should be able to support their beloved retailers and service providers. After the project was completed, however, the measures were relaxed again, which also made the project less attractive. What I will do with it in the future remains to be seen.

Project details

Helft-Lokalen is set up for new cities with just a few clicks and can be reached as a subdomain via abbreviation (alá ac.hilft-lokalen.de). The list entries can be searched at a central place by free text search or sorted by filters. New entries are accepted via a dynamic form. Each entry is manually checked and verified, making the entry publicly available afterwards.

Furthermore, Helft-Lokalen has an admin interface for authorized logins. Verifications, final deletions or category management can be done comfortably in the admin area.

Verification process

Unverified entries are listed chronologically. Each entry is displayed exactly as it will be seen later on the page. This allows easy verification of the content. After successful verification the entry becomes public.

Deleted objects

On Helft-Lokalen entries can be "deleted" for a short time. This means that these ads are temporarily no longer visible to the public. In the admin area you can find this dan under "trash". Here you can delete the entries or set them back to "public".

Municipality

Adjustments to the individual city directory can also be made conveniently in the admin interface. This currently includes:

  • City name

  • City abbreviation

  • Accent color

  • City logo

Category management

In the category management, predefined categories can be edited or deleted. New categories are created via separate input fields.

Tech Stack

  • Create React App (★ 76k) for development and test infrastructure (see user guide)

  • Material UI (★ 54k) to reduce development time by integrating Google's Material Design

  • React Dashboard (★ 2k) Free React Dashboard made with Material UI’s components

  • Reach Router (★ 6k) for declarative routing and client-side navigation

  • React Dropzone (★ 7k) Simple React hook to create a HTML5-compliant drag'n'drop zone for files.

  • TypeScript (★ 58k) TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • Google Cloud & Firebase for serverless architecture - Cloud SQL, Cloud Functions, CDN hosting, file storage (docs)