Free Community Frontend

in HiveDevs2 months ago (edited)

Context

When we started building the frontend for https://skatehive.app/, one of the ideas was to make it open source and easy to replicate, so that other communities could use it as well. As time went by, skatehive frontend started to get more complex with things very specific to this community and making it harder to duplicate. So we decided to start over, with a basic community frontend, that can be easily replicated for free, and I mean totally free, including hosting.

The code for skatehive.app is opensource and available at https://github.com/SkateHive/nextskateapp.

MyCommunity frontend

Image

This frontend is being built (it's mostly done) using NextJS, and can be deployed for free in just a few minutes.
All you need to do is:

  1. Fork the repo
  2. Open a free account with https://vercel.com/, link the fork
  3. Set the environment variables.

It can be done in 10 minutes. I know it might need a little knowledge to do this, but we will still make a very simple tutorial to make this process easy for anyone, even those with no programming skills. You can add your own domain, or Vercel will give you one for free using your-project.vercel.app.

The repo is located here:
https://github.com/bgrana75/mycommunity

And here you can see a couple of examples of it running in 2 different communities:

There is still work being done, as we try to adjust a few things. One of the problems we are still trying fix is the threads part in the home page as we weren't able to paginate. (Any help here is appreciated)

Short content is trending now on Hive with a few frontends implementing it, and the solution found to not create a Hive post for short content is to use the comments section of a post. But the only function on Hive API that returns comments paginated is database_api.list_comments, but this function only returns the comments sorted from older to newer and we needed to sort the comments from newer to older. Maybe I missed something here, but if I didn't, this is something that could be added to the API in the future?? @blocktrades

Some work is also needed to make the design more customizable too, even though we already separated in themes. The 2 examples above are using just a different theme file that is chosen in one environmental variable. New themes can be easily added.

We used @aioha for authentication, and it's really helpful. Thanks to @techcoderx

Feel free to test it, and give some feedback.

Here are some screenshots:

image.png

image.png

image.png

Image

Ideas in development

  • You can set it to be a business or a community, if you set it as a business a Store page appears in the menu. We are preparing it to be a e-commerce with Hive, HBD and BTC payments and use distriator as feedback/reviews/rewarding tool

Shout out to @xvlad, @vaipraonde, @devferri , @r4topunk , @web-gnar, @louzado and all the hive builders helping to build this frontend, skatehive, tools like aioha, v2v, distriator, hive keychain that enable the community to build on top of hive.

If you want to connect and code with us, feel free to join the voice chat on skatehive discord server: https://discord.gg/skateboard

Thanks for stopping by!

Hey! By the way, I'm running a witness node. So if you are not using all your votes, or maybe you are voting for a witness that is not online anymore, please consider voting for our witness. You can use these links to vote:

Sort:  

Great Mengão! This is so exciting! You are doing a great job...

Creating a free community frontend that can be easily replicated is a game-changer for Hive..

Built with NextJS and can be deployed for free make it accessible to a wide range of communities.

I'm also impressed by the ongoing work on the features and the authentication with @aioha proves that the Hive Ecosystem is alive and working great!

Integrate e-commerce capabilities with Hive, HBD payments is a huge plus.

Keep up the amazing work! And i`m loving work with you guys, learning a lot from you!!!!

#skatehive for life!


🎉 Upvoted 🎉
👏 Keep Up the good work on Hive ♦️ 👏
❤️ @gwajnberg suggested sagarkothari88 to upvote your post ❤️

Bzzz-rrr! That's super cool, @mengao! A free, open-source frontend for all communities? Laggg-bzzz! Thanks for making it easy to replicate and deploy! #hivebr

This is really cool. I love seeing projects like this being created.

Ficou da hora mano, valeu por todo esse trabalho e esforço! Vamos começar a lapidar esse frontend da hivebr para ficar melhor ainda!

!HIQVOTE !BBH !LOLZ

How many egomaniacs does it take to screw in a light bulb?
One, they hold the bulb while the world revolves around them.

Credit: marshmellowman
@mengao, I sent you an $LOLZ on behalf of shiftrox

(3/10)
Farm LOLZ tokens when you Delegate Hive or Hive Tokens.
Click to delegate: 10 - 20 - 50 - 100 HP

@mengao! @shiftrox likes your content! so I just sent 1 BBH to your account on behalf of @shiftrox. (3/20)

(html comment removed: )

Congratulations @mengao! You received a personal badge!

Happy Hive Birthday! You are on the Hive blockchain for 3 years!

You can view your badges on your board and compare yourself to others in the Ranking

Congratulations @mengao! You received a personal badge!

You powered-up at least 10 HIVE on Hive Power Up Day!
Wait until the end of Power Up Day to find out the size of your Power-Bee.
May the Hive Power be with you!

You can view your badges on your board and compare yourself to others in the Ranking

Check out our last posts:

Hive Power Up Month Challenge - September 2024 Winners List
Be ready for the October edition of the Hive Power Up Month!
Hive Power Up Day - October 1st 2024

Congratulations @mengao! You received a personal badge!

You powered-up at least 100 HP on Hive Power Up Day! This entitles you to a level 3 badge
Participate in the next Power Up Day and try to power-up more HIVE to get a bigger Power-Bee.
May the Hive Power be with you!

You can view your badges on your board and compare yourself to others in the Ranking

Check out our last posts:

Hive Power Up Month Challenge - September 2024 Winners List
Be ready for the October edition of the Hive Power Up Month!
Hive Power Up Day - October 1st 2024