DEV Community

Cover image for RowySync: A React App which syncs text, images and styles from Rowy Tables.
Jasmin Virdi
Jasmin Virdi

Posted on • Edited on

8 1 1 1 1

RowySync: A React App which syncs text, images and styles from Rowy Tables.

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.

Screenshot of the Rowy Table containing website details

2.Screenshot of the React Application.

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.

text change

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.

Happy Coding!👩‍💻

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay