No Sign-in, Community App w- Chat Room, Star Reviews & User Application Features from Single Row/Cell in Glide Editor

Project Showcase
1

Hi guys! I have been extending the simple workflow that I showcased last week (Star Rating Reviews & Detailed Form - Single Cell - No sign-in option) and have added 3 useful features to my app:

  1. An anonymous chat room or message board with randomly changing chat font colors, user avatars, public moderation capabilities
  2. Add business application form with user monitoring feature (to see whether applications are pending). Public display.
  3. Anonymous star review system

Here are some clips of the features in action!
NewChatvideogif
Applicationvideo
Reviewvideoedit

App link: https://hiptnt.glide.page

For more context on the app itself, it’s essentially a local business listings and events app that’s meant to foster kinship between the consumers and local small businesses, as well as increase comradery in the populace.

It was very important for me to keep the cost of development as low as possible because it’s a free public app and a budding social enterprise, which means that I want even the lowest income, small business owners to be able to afford continuous app presence. The single-row single-cell solution would keep my cost contained since I wouldn’t have to worry about row limits when managing potential growth (country population = ~1.4 million). I was really happy to accomplish this without making users sign in and without a user table.

Other resources I blended into the app:
@Himaladin 's floating button CSS was a great addition to the chat room. I used it to place a button on the top and on the bottom too.
@Joe_Gabriele 's button gradient CSS :+1:
@Joe_Gabriele 's full screen image. I extrapolated to create gradient colored full-sized containers
@Himaladin 's carousel (cardousel)
@Darren_Murphy custom search bar, which really amped up the app’s functionality and user friendliness!

Thanks guys! :blush:

5 Likes
2

Oh, I also repurposed JavaScript from @Himaladin and @Jeff_Hager 's work and used them as triggers to automatically refresh the messages in the chat room. :+1: :+1:

2 Likes
3

Congrats for you.

1 Like
4

Thanks! And thanks for all your help over the past few weeks!
Tomorrow I will give myself a holiday, lol.

5

Why is it necessary?

6

I’m not entirely sure to be honest. But before I added it I thought that the messages were taking too long to appear… don’t know if it was just due to the network connection.
Either way, it can’t hurt to have a forced refresh every 5 seconds.

7

It’s better to be prepared for something that might not happen than to be unprepared for something that does. :smile:

1 Like
8

:100: :grin:

1 Like
9

Why don’t you use a 3D slide-show to avoid the gap when transitioning from the last frame to the first frame? Another thing is you can add a clear button for quick search, it will be more convenient. I made it with the rich text component.

Screenshot 2024-06-15 at 09.01.37
Screenshot 2024-06-15 at 09.01.371220×196 2.7 KB

10

thanks! I was actually wishing I had the option to clear the text… didn’t know it was possible!
How do I add it?

With respect to the 3d slide show, I was a little concerned about how the images on the sides appear (skewed) as well as the set up because i’d want at least 3-4 images on the front face of the cube

11

Add a richtext component below the text entry component. Name the class: deleteBtn. Use richtext for clearing your column.

<!--Delete Button-->
<div class="cross" style="float: right; margin:0px 2px 0 auto; 
height: 25px;width: 25px; opacity:0.4;border-radius: 10px;
z-index: 5; filter:invert(0.1);"><img src="https://cdn-icons-png.flaticon.com/512/8867/8867452.png" alt="Cross Button" style="margin-top:-36px;"/></div>


/*delete button CSS*/
[data-testid="wire-container-deleteBtn"] {
	margin-top:0 !important;
}
[data-testid="wire-container-deleteBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
	left:auto;
	right:calc(var(--container-x-pad) + 10px);
	width:fit-content;
}
1 Like
12

hmm… can you explain how it’s tied to the text entry? I’m not getting it to work

13

hmm… did you copy the html code part to the richtext component and the css to the css part.
The way this CSS works is only to lift richtxt to the top without binding the two components.

14

ok, I’ll try this.

*It works now, thanks!
**Actually the button appears but isn’t effective… let me check that I didn’t omit something.
Maybe I also need to add an action.

It worked after I added an action. :+1:

1 Like
15

Hide the button if the search is empty.

1 Like
16

ok… i needed it to see it to customize the icon. It was too faint in dark mode.

new icon, lol
image

1 Like
17

Set with this filter code too.

8867452
8867452512×512 7.23 KB

red-cross-button-in-round-shape-png
red-cross-button-in-round-shape-png1920×1920 21.3 KB

1 Like
18

oh great. Will try this too

** the code was already in there. It doesn’t work well enough for the visibility so i’ll revert the icon I made…
image

Thanks for the icon suggestions. I wanted it to be subtle yet visible in both light and dark modes, that’s why I made it grey.

19

You can combine these two codes.

filter: brightness(100) invert(0.1);

or

filter: brightness(100) invert(0.1) grayscale(1);
20

no visible change with those either.
I suspect the X in the original image is actually transparent. Would explain why inverting does not affect it. Unless the invert was targeting the background and not the image itself… then I dunno.
But it’s ok, my new image works in both modes.