Git Product home page Git Product logo

entel's Introduction

Logo

entel - Share Your Needs

Overview

Replace the unnecessary walk to the next supermarket by a new shoppinglist in entel. If you are going to the store, help others close to you by accepting their shopping list and bring them the products they need!

entel is a modern web app that is built with Blitz.js, a full-stack React framework, made to boost productivity. A hosted version can be found at entel.me

Features

โœจ Feature
โœ… Create an account
๐Ÿ“† Create a new shoppinglist
๐Ÿค Accept and complete shoppinglists from others
๐Ÿ“ฒ Chat with the owners to organize shopping
โœ‰๏ธ Email confirmations and reminders
Many thanks to Roman for creating the cute logo ๐Ÿ’–

This project follows the all-contributors specification. Contributions of any kind welcome!

Setup entel locally

To run entel locally, you need to install NodeJS and npm. Additionally, you should be able to run PostgreSQL on your machine. You can achieve this by

  • installing it natively on your computer or
  • via docker.

First steps โœจ

But first of all, you have to clone and open this repository.

git clone https://github.com/entel-me/entel.git
cd entel

After that, you should be able to install the dependencies with npm.

npm i

Great! Let's start with setting up environment variables. ๐Ÿ”ฅ

Setup enviroment variables ๐Ÿ“

First, you have to create two empty files.env.local and env.test.local. You can specify environment variables in these files. Afterward, you call them with process.env..

DATABASE_URL is an important variable that connects the PostgreSQL database with our application. If you're running PostgreSQL in docker, you set

  • username,
  • password,
  • the name of the database on your own and include them in a URL. Here is an example:
POSTGRES_USER=entel
POSTGRES_PASSWORD=crazypassword
POSTGRES_DB=enteldb
DATABASE_URL=postgresql://entel:crazypassword@localhost:5432/enteldb

If you're running PostgreSQL natively on your computer, you have to enter the URL of your database in each .local file. Please be aware that you have to remove the predev script from package.json to run entel without errors.

DATABASE_URL=postgresql://entel:crazypassword@localhost:5432/enteldb

If you want to test the mailer in mailers/, you have to add your

  • mail,
  • password,
  • and mail host to the .local files too:
MAIL_HOST=mail.privateemail.com
[email protected]
MAIL_PASSWORD=crazypassword

Great! After that, we take care of the database itself.

Run the database ๐Ÿ“‹

The last thing we have to do is migrating the database with prisma. For the following step, the database should already be running. You can achieve this with docker with the command:

docker-compose up -d

Now you can set up the database by entering:

blitz prisma migrate dev --preview-feature

Btw, if you change something in schema.prisma you have to re-run the last command. Now we can try out our application. ๐Ÿฅณ

Run the application

To run entel you execute

blitz dev

and view your new app at http://localhost:3000/! Perfect ๐ŸŽ‰

Have fun with the app :)

How to run entel "in production"

We use a second environment called "entel-dev" to test entel under real-world conditions. If you want, you can run your version of the application on this environment before merging it into develop. Just write to @Till-B or @antonykamp ๐Ÿ’ป.

For security reasons, these "review apps" are using the same database as "entel-dev" but not as the public environment entel.me. Also, if you send emails, they will land at the ethereal mailbox of Carolina ๐Ÿ˜‰. Therefore, use the following email and password:

email: [email protected]
password: 3jqaynkSquQv5Pra1u

entel's People

Contributors

antonykamp avatar depfu[bot] avatar hng63 avatar malckier avatar till-b avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

entel's Issues

Initial DB Issues

  • npm run predev failed to run at first because there was no ./.env.local file. I copied the .env over to ./.env.local and it did set up docker it seemed.

  • Had this error trying to signup:
    Invalid prisma.user.create() invocation:

    error: Environment variable not found: DATABASE_URL.

Thanks for your time.

Push notifications

Ask user/make it possible in settings to accept push notifications.
Implement push notifications

Polish mails

At the moment, the mailer sends pretty plain mails to our users. For Eg centering the text, adding our logo could polish these up. Give free rein to your creativity ;)

Sending pictures in chats

Feature that makes it possible for chat users to send pictures (if both parties agree to it).

This feature simplifies the specification of brands etc., however the "both-party-handshake" insures a lower chance of missuse

Adding more unittests

Describe the improvement you'd like
It would be great to use more unittests. At the moment, we use the blitzjs default tests only. Additional tests testing

  • mailer
  • mutations
  • queues
  • the entire process XD

would help the project ๐Ÿ™ƒ

Additional context
Blitzjs uses @testing-library/react with jest. This is certainly worth a look ๐Ÿ˜…

Photos to specify items

Pictures (attached to items) to specify the needed items.
Maybe we can discuss the feature, that the visibility is optional for users until they accept a list (in that case the pictures would be visible until job is done??)

Ordering archived lists by time stamps

Currently archived lists is sorted by which list has been archived the longest to the latest archived list. It should be sorted the other way around (latest list to oldes list)

Fix warnings

Running a linter or unittests doesn't show any error, but ~170 warning we should take care of.

Add logging

Debugging #39 showed me, that we have to add a logger like tslog to understand what's going wrong in production.

Uniform naming of variables and folder structure

The naming of some variables isn't uniform. For example, The names of a comment on a list are "comment" and "specialWish". The pages' name with the lists accepted by a user is "accepted list" and "active list". Please take care of other doppelgangers too :)

It would be great if somebody could rearrange the folder structure too. Take the folder "auth" as an example (auth/components, auth/pages, auth/queries, auth/mutations). (done by #52 )

Additionally, it would be great if somebody could change the file-type from "*.tsx" to "*ts" of mutations and queries <3

AND (:D) if it would be awesome if we would use number instead of Number...at the moment, we don't use them uniformly.

Improve query calls

Is your feature request related to a problem? Please describe.
When I remove a list from "archived lists", it takes some time until it's removed from the page.

Describe the solution you'd like
Some queries have unnecessary refetch intervals (eg. active lists: this page only has to refetch if a list was completed or canceled).

Describe alternatives you've considered
Removing some refetch intervals and adding .refetch() to functions buttons ยฏ\(ใƒ„)/ยฏ.

What do we do, when an email does not arrive

Is your feature request related to a problem? Please describe.
Somebody could signup multiple times with a non-existing email. The senders' mailbox will overflow because we don't handle non-existing email at the moment.

Describe the solution you'd like
Maybe it's possible to verify an email and send it afterward.

Describe alternatives you've considered
/

Additional context
/

Replace message status by something meaningful in the code

Is your feature request related to a problem? Please describe.
The status of a shopping list (pending, accepted, archived) equals a simple number. Without knowing the meaning behind it, the code is hard to understand.

Describe the solution you'd like
It would be great, if we could handle the status as strings (pending, accepted, archived) in the code and as numbers in the database (1, 2, 3). That sounds like enums to me :)

Describe alternatives you've considered
Mentioning it in the README or CONTRIBUTING is another idea, but it isn't a consistent solution.

Replace chakra-UI with Sass

Describe the solution you'd like
It would be awesome if we could remove chakra-UI completely and replace it with Sass.

Describe alternatives you've considered
Other possibilities were tailwind or bootstrap. But I'm not sure whether we should change it, because of the principle "never touch a running system".

Additional context
If we use Sass, we could move the look and feel from your web app to emails (see #76 )

Higher precision of location

To achieve a higher precision of location there is the possibility to (voluntarly) specify your location on GoogleMaps to use for us. This way we could be much more precise

Encrypt User information

Is your feature request related to a problem? Please describe.
At the moment, our users information aren't secured. They are plain at a server.

Describe the solution you'd like
By using asynchronous encryption we could secure our users data.

Chat jumps

chat jumps down every few seconds if you scroll up (probably because of the refetch)

Login Mail Verification

Adding a mail verification in the login process would ban fake mails. You could achieve this by using tokens and adding a new attribute isVerified to users and a mailer.

Emails at google account are classified as spam

Describe the bug
If somebody signs up with a Gmail address, every mails lands in her/his spam folder.

Proposed changes
A hint would be helpful with a proposition to take a look into the spam folder. This solution ISN'T great, because mails about new messages are still classified as spam.

Expected behavior
It shouldn't land in the spam folder :D

Additional context
See nodemailer doc or stackoverflow

E-Mail notification settings

Make it possible for user to decide if they want an E-Mail notification as soon as they receive a messageetc. or if they want receive an E-Mail once a day (e.g.)

After logout queries starts one last time

After the logout mutation, queried queries start one last time. This leads to an authentication error.

At the moment, entel bypass this bug by reloading the page.

Add Admin Mail

Is your feature request related to a problem? Please describe.
Sending emails about updates of a shopping-list-status as a newMessage from admin isn't a good solution.

Describe the solution you'd like
It would be great to have a new mailer newAdminMessage, and a new template adminMessage, which will be used in this case.

Add CI

Adding a CI to entel would improve the PR workflow

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.