Hello Everyone! 👋

Recently I came across the GitHub + DEV 2023 Hackathon on the Dev Platform and started planning to participate in the hackathon.😂
Dev community and especially Dev hackathons have played a major role in my learning journey by helping me learning about new tools and frameworks. 😇

While going through the hackathons post I came across the comment made by @harinilabs and looked into Rowy. After looking and learning about Rowy I was amazed by the idea of implementation behind Rowy and low code backend support it provides to build our applications faster.

I started digging up some ideas and came across the idea of implementing RowySync which helps to update the content, images and styles of the text quickly of a React application.

What I built 💡

I created a React Application that can be styled/customized using Rowy. Anyone who has editing access in Rowy project can easily update the text, font styles and edit images from Rowy Table.

The simple spreadsheet UI by Rowy provides an easy way to edit and manage the elements on the website.

Category Submission:

I am submitting this project under Wacky wildcards as this app is built and deployed using Github Codepsaces and Github Actions to make development and collaboration easier and helps us to understand the integration between Rowy and React Application.

App Link

Link to the deployed App

Screenshots

1. Screenshot of the Rowy Table containing website details.

2.Screenshot of the React Application.

A small video demonstrating the working of this app.

Description

Rowy Sync aka rowy web page editor built using Github Codespaces and using Github Actions provides a simple and intuitive interface for users to modify the content of the website easily. It helps to edit text, apply different font styles, such as bold, italic, and underline, etc and upload images to enhance the visual appeal of their website.

I have used GitHub Actions to build and deploy the app to Github pages.

Link to Source Code

Github Repo link

Permissive License

RowySync/ Rowy Pages editor is distributed under the MIT License — you can find the license here.

Background

Well!😅

While working on frontend applications we might have had multiple requests from the stakeholders to update the font and formatting on the website.

This often leads to increase in development and review cycles and more waiting time for the stakeholders and less flexibility to provide more visual customisations.

With the help of Rowy integration to customise the React App components from the spreadsheet it provides multiple benefits for both developers and stakeholders such as:

1. Reducing development and review cycles for minor design changes.

2. Ease to test out multiple template versions of website with different set of text and multiple images.

3.Ability to update and verify the changes on website using Github Codespaces and Rowy spreadsheet like UI.

How I built it

To build this project I used Github Codespaces where I was able to quickly setup the development environment. It also provides an excellent ability to setup the app secrets that are required for running the app on Codespaces.

This project uses Firebase database configs to sync the changes done in Rowy table which we would need to store in the secrets. The same secrets are required while running codespaces and can be easily setup using these steps.

This will be really useful for testing purpose where we don't need to create or setup database configs to verify the website changes.

Lastly using Github Actions I was able to build and deploy the website on Github Pages.

This is a good integration project which helped me to learn and implement features using Github Codespaces and Actions.

Next Steps

I am planning to spend more time on this project more and try to improvise the integration more by providing support for multiple components and more properties to edit from Rowy. Also a way to sync component changes such as add or delete of elements by updating Rowy Tables using Github Actions or Webhooks.

Additional Resources/Info

Some useful links and resources.

• https://docs.github.com/en/codespaces/developing-in-codespaces/developing-in-a-codespace
• https://docs.github.com/en/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces#adding-a-secret
• https://www.rowy.io/blog/react-database
• https://docs.rowy.io/

Happy Coding!👩‍💻