webcrumbs-community/webcrumbs

Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work!

webcrumbs's Issues

Research /core: Evaluate available solutions for SSR of dynamic remote modules in Next.js

As we're diving into the new terrain of server-side loading with Next.js, we're also on the lookout for existing methods or libraries that could be beneficial for our issue #103.

Related to discussion #91

What Needs to Be Done?

The task is simple but crucial: compile a list of existing methods and libraries that enable server-side loading of remote modules in Next.js. Think of this as the scaffolding for our issue #103.

Why Is This Important?

Why do the legwork, you ask? Well, this research sets the stage for a more efficient and effective implementation of server-side loading in our upcoming experiments.

Skills Needed

• Research savvy
• A knack for JavaScript and Next.js
• The art of summarizing and documenting your treasure finds

Requirements

• Create a list of methods that allow for server-side loading in Next.js.
• Add in any relevant libraries or tools that catch your eye.
• Sum it all up: the good, the bad, and the "hmm, interesting."
• Include your findings as a Markdown file at /research

Here's another chance to make an impact on the future of WebCrumbs. Take a peek at our GitHub repo and let's get this research train moving!

Create a webcrumbs plugin to integrate Auth0 login

Description

We're shooting for the stars by adding Auth0 login integration as a WebCrumbs plugin. The game plan involves creating a spanking new React or Next.js project under /plugins/auth0-auth. We'll kick things off by implementing the Auth0 authentication mechanism with as little code as possible. Future vision: metamorphose this bad boy into a webpack and make it operable via the /admin control center.

Requirements

• Fire up a new React or Next.js project at /plugins/auth0-auth
• Wire up Auth0 login, keeping it lean and clean
• Blueprint the transformation into a webpack down the road
• Enable activation as a plugin from the /admin dashboard

Steps to Reproduce

1. Cruise over to /plugins
2. Conjure up a new React or Next.js project named auth0-auth
3. Add Auth0 login functionality with minimal fuss
4. Strategize for eventual webpack conversion

Additional Context

Adding Auth0 to our repertoire isn't just window dressing; it's a cornerstone for broadening the scope and adaptability of WebCrumbs.

Acceptance Criteria

• New React or Next.js project ready to rock at /plugins/auth0-auth
• Auth0 login is up and running, no frills
• Game plan set for morphing into a webpack

Ready to roll up your sleeves? Contributions from the community are not just welcome; they're coveted.

Originally suggested by @DaveKobrin in #67 (comment)

User Manual

Create a comprehensive user manual that explains how to use the platform, manage plugins, etc.

Admin Dashboard UI

Design and implement the user interface for the admin dashboard where users can manage plugins.

Make a better dashboard design

The current design does not look the best :)
I would be happy if somebody could contribute a better design that reflects the image at readme.md.
The task can have multiple assignees.

Create a webcrumbs plugin to integrate Clerk login

Create a webcrumbs plugin to integrate Clerk login

Description

This issue aims to kickstart the development of a WebCrumbs plugin for Clerk login integration. The target is to set up a new Next.js project within /plugins/clerk-auth. Initially, we'll integrate Clerk authentication with the bare minimum of code. Down the line, this will be transmuted into a webpack and made accessible via the /admin dashboard.

Requirements

• Initialize a new React or Next.js project at /plugins/clerk-auth
• Implement Clerk login with minimal content
• Plan for future webpack transformation
• Embed this as a plugin actionable from /admin

Steps to Reproduce

1. Navigate to /plugins
2. Create a new React or Next.js project titled clerk-auth
3. Implement minimal Clerk login features
4. Plan for webpack transformation

Additional Context

This is an integral part of enhancing the WebCrumbs ecosystem, making it more extensible and user-friendly.

Acceptance Criteria

• New React or Next.js project initialized at /plugins/clerk-auth
• Clerk login implemented with minimal content
• Architecture planned for future webpack transformation

We welcome contributions from the community.
Feel the pulse of open-source synergy; get involved!

Originally suggested by @Raghul18 in #67 (comment)

Frontend of WebCrumbs.org

Start the frontend of WebCrumbs.org using React and Nextjs. Begin "small and quick" and let the community grow it from there.

Investigate Plugin Architecture Best Practices

Howdy, Sherlock! Building a plugin system is no small feat. We need your eyes and ears to find the best practices for building plugin architectures in React projects.

What Needs to Be Done?

• Conduct research on existing plugin architectures in React and JavaScript.
• Summarize key takeaways and best practices in a markdown file.
• Open a pull request to add this research into our Research/ directory.

Why Is This Important?

• Guides us in structuring a robust and scalable plugin system.
• Helps prevent costly mistakes down the road.

Skills Needed

• Basic understanding of React and JavaScript.
• Research skills to evaluate architecture designs and best practices.

Ready to put that magnifying glass to good use? Dive into our WebCrumbs GitHub repo and help us lay a strong foundation!

Explore Performance Optimization Techniques for React

Hello, speed demons! WebCrumbs aims to be sleek and fast. We need your help in finding the best ways to optimize React apps for performance.

What Needs to Be Done?

• Research common performance issues in React apps.
• Investigate methods for optimizing performance.
• Summarize your findings in a markdown file.
• Open a pull request to add this research into our Research/ directory.

Why Is This Important?

• Sets us on the path to building a highly optimized product.
• Helps us educate the community on performance best practices.

Skills Needed

• Basic understanding of React and JavaScript.
• Research skills to evaluate and summarize techniques.

Ready to help WebCrumbs fly? Zoom over to our WebCrumbs GitHub repo and help us soar!

Implement Next Auth

Tasks:

1. Set up the NextAuth.js library in our project at /admin.
2. Configure at least one authentication provider (e.g., Google, GitHub, or a custom provider).
3. Implement session management to protect at least one route/page.

Acceptance Criteria:

• Users should be able to log in using the chosen authentication provider.
• After logging in, users should be able to access protected routes/pages (e.g. admin panel).
• Users should be able to log out.
• Non-authenticated users should be redirected or alerted when trying to access protected content.

Project README Update

Keep the README.md file updated as we growth.

Task /core: Create a new experiment for SSR of remote modules in Next.js

We're extending our existing setup to allow server-side loading of remote modules with Next.js.

What Needs to Be Done?

The mission here is to take /core/experiment-1 and make a new sibling: experiment-x (where 'x' is the next available number). This new experiment will enable server-side loading of dynamic remote modules in Next.js.

Related to discussion #91

Why Is This Important?

Server-side loading comes with a handful of benefits, such as improved SEO and quicker initial load times. It's worth exploring this to understand its impact on our project and potentially optimize package behavior.

Skills Needed

• JavaScript
• Next.js
• Server-Side Rendering (SSR)
• Module Federation
• Or, hey, just the curiosity to learn these skills!

Requirements

• Clone /core/experiment-1 into a new directory, /core/experiment-x.
• Modify experiment-x to enable server-side loading of remote modules in Next.js.
• Validate that the new setup works as expected.

We're about to turn the page on a new chapter of WebCrumbs. Head on over to our GitHub repo and take your seat for this exciting ride!

Initial setup at /admin using nextjs and typescript

Have a first initial admin panel UI at /admin using nextjs and typescript

User Authentication

Implement secure user authentication methods, possibly using OAuth or JWT.

Implement SSL

Implement SSL to ensure that data transfer is secure.

Plan for #hacktoberfest

Mobile Responsiveness

Ensure that the application is fully responsive and works well on mobile devices.

Generate a bundle of the admin panel at **/src** with webpack and add to the website at **/demo** with <script>

Objective 🎯

• Create a Webpack configuration to bundle the admin panel code from the /src directory.
• After bundling, add the generated script to the /demo directory of our website using a <script> tag.

Steps to accomplish this ✅

1. Navigate to the /src directory where the admin panel code resides.
2. Create or modify the existing Webpack configuration file to include the admin panel.
3. Run Webpack to generate the bundled script.
4. Move the bundled script to the /demo directory.
5. Integrate this script into the demo site using a <script> tag.

Additional context 📝

Make sure you thoroughly test the bundled admin panel in the demo site to ensure it's working as expected. Feel free to reach out if you encounter any issues or have questions.

What is going on ?

error in landing page

error in admin page

I was busy in my job lately so I was not able to follow up the repo.
When I try to contribute to it today (27 oct 2023) I am facing these issues.

@webcrumbs-community

ALL: Already a contributor? Become a maker at Product Hunt

1. Create a Product Hunt user (here)
2. Drop your @ below
3. That's it!

Do that, and I'll add you to the makers of Webcrumbs 🥂
Hold tight, because we're getting ready to blast off once that demo is locked and loaded. 🚀

Compile a List of Features for WebCrumbs

Brainiacs, assemble! We need to build a list of features that WebCrumbs should include at launch.

What Needs to Be Done?

• Engage in community discussions to gather suggestions.
• Compile these features into a markdown file.
• Open a pull request to add this list to our repository.

Why Is This Important?

• Helps us prioritize the development roadmap.
• Allows the community to have a say in the project's direction.

Skills Needed

• Good organizational skills.
• Ability to collate diverse opinions into a coherent list.

Think you can help chart our course? Zoom over to the WebCrumbs GitHub repo and help us plot the stars!

Brainstorm Ideas for Essential WebCrumbs Plugins

Alright, thinkers and tinkerers! WebCrumbs isn't just about making web development easier; it's about making it smarter. We're calling upon you, yes YOU, to brainstorm plugin ideas that could be indispensable in the WebCrumbs ecosystem.

What Needs to Be Done?

• Engage in community discussions to get the creative juices flowing.
• Think about common pain points in web development that a plugin could solve.
• Document these plugin ideas, giving each a brief description and a rationale.
• Open a pull request to add your brainstormed list to our /research directory.

Why Is This Important?

• Fuels innovation and creativity in our project.
• Offers a direct route for community members to shape the product's future.

Skills Needed

• Insight into common web development challenges.
• Creativity to imagine new solutions.
• Markdown skills to document your ideas.

Feel like channeling your inner Edison? Swing by our WebCrumbs GitHub repo and let's turn those light bulbs into a bright future!

AI-powered Plugin Recommendations

Implement an AI-driven system to recommend plugins to users based on their usage patterns.

Continue working on the demo frontend

Could continue working on the demo, making the home page a little bit like this:

Originally posted by @webcrumbs-community in #4 (comment)

Plugin API Design

Define the specifications for the Plugin API. This will include routes, request, and response formats.

Database Schema Design

We're planning to create a database architecture for WebCrumbs that closely aligns with the structure of WordPress's database. This approach will help ease the transition for users moving from WordPress to WebCrumbs.

Tasks:

• Study WordPress's database design to understand its tables, relations, and schema.
• Document key similarities and differences between WordPress's database design and what would be optimal for WebCrumbs.
• Create a draft database schema for WebCrumbs based on the findings.
• Open a discussion for community input on the proposed database schema.

This is a great opportunity to contribute to the foundational structure of WebCrumbs. Anyone interested in database design or who has experience with WordPress will find this task particularly engaging.

To contribute or learn more, check out the WebCrumbs GitHub repo.

Add Finland to the flags

Design a plan of next steps

Task /core: Create a new experiment to bundle admin package and add to demo

We've successfully built /core/experiment-1 that integrates plugins into the admin package. Now we want to create an experiment to bundle admin package and add to demo.

This is a sequence of @webcrumbs-community in #51

What Needs to Be Done?

We want to duplicate /core/experiment-1 and name it experiment-x (where x is the next available number). The goal here is to make the /admin package built with NextJS exposed as a Module Federation. Subsequently, we aim to import it into the /demo package, preferably with a script tag.

Why Is This Important?

This will give us a scalable and modular architecture for the /packages/admin package. It'll enable easier integration and updates, while allowing the /packages/demo to access admin functionalities effortlessly. This could potentially be a game-changer in how we manage dependencies and features across our packages.

Skills or Needed

• JavaScript
• NextJS
• Module Federation
• or curiosity to learn the skills needed

Requirements

• Duplicate /core/experiment-1 and name it /core/experiment-x.
• Work on /core/experiment-x to expose /packages/admin as a Module Federation.
• Import the federated module into /packages/demo via a script tag.

Help us put the gears in motion for this next phase of WebCrumbs. Come on over to our GitHub repo and be a part of this exciting chapter!

Archive? Document the architecture with a diagram

WebCrumbs is growing, and it's growing fast. That's fantastic! But let's not forget, even a jet plane needs a flight manual. We need a visual guide to our code's architecture to help both our core team and the open-source community to understand how all the pieces fit together.

What Needs to Be Done?

• Create a comprehensive diagram showcasing the structure and relationships in the WebCrumbs codebase.
• Use a tool that's easy to edit, so it can be updated as our architecture evolves.
• Add brief explanations to the major components, making it easy for anyone to grasp the overall design quickly.
• Once complete, add it to the repo and to the wiki section.

Why Is This Important?

• Simplifies onboarding for new contributors
• Facilitates more efficient code reviews
• Reduces the learning curve for understanding the codebase

Skills Needed

• Understanding of the project's existing architecture
• Basic design skills for creating clear, understandable diagrams
• Markdown and Git for adding the diagram to our docs

Help us lay down the tracks for this high-speed train we're building. Hop over to our WebCrumbs GitHub repo and be a part of the journey!

Initialize Project Structure

Set up the initial project files and folders, including package.json, and initial codebase.

Localization Support

Add support for multiple languages in the UI.

Create a basic plugin to display "Hello, Dolly"

Objective 🎯

• Develop a basic plugin in the /plugins directory.
• Utilize Webpack for building the plugin.
• The plugin should display the message "Hello, Dolly" when invoked.

Why it matters ❓

Getting a simple plugin up and running will serve as a stepping stone for more complex plugins in the future. It's all about laying the groundwork.

How to go about it ✅

1. Navigate to the /plugins directory.
2. Initialize a new plugin project if you haven't already.
3. Create a Webpack configuration for the plugin.
4. Write the code to display "Hello, Dolly."
5. Build the plugin using Webpack.
6. Test to make sure the plugin works as expected.

Additional Info 📝

Once it's done, let's all take a moment to review and test the plugin to ensure it works flawlessly. Questions or concerns? Reach out!

Optimize Plugin Loading Times

Investigate and implement ways to improve the load time of plugins.

Add contributors avatars to Readme

With automation.

Task /admin: Integrate the logic of /auth to UI of /login at /admin

Description

In our /admin dashboard, we've got a "login" page with the looks but no moves, and an "auth" page with the moves but no looks. Let's bring them together to create a unified, functional, and attractive login page. But let's not forget, this isn't just a merger—it's also a security play. The integrated login page should serve as the protector of the realm, or in this case, the /admin panel.

Requirements

• Fuse the logic from /auth into the UI of /login
• Maintain the UI integrity on /login
• Test the combined /login for functionality and visual fidelity
• Add a security layer to /login to restrict unauthorized access to /admin
• Bid farewell to the standalone /auth page upon successful integration and security implementation

Steps to Reproduce

1. Trek over to /admin on your local dev environment
2. Peek into both the login and auth pages
3. Merge the logic from auth into login
4. Confirm that login retains its visual charm while gaining new functional muscles
5. Implement a security measure that keeps the /admin panel under lock and key
6. Once all checks pass, put the /auth page out to pasture

Additional Context

We're not just pairing two lonely hearts here; we're also turning login into the security bouncer for our /admin hotspot.

Acceptance Criteria

• Logic from /auth finds a happy home in /login
• Login doesn't lose its visual sparkle after the operation
• Login adds a new line to its résumé: Security Guard for /admin
• /auth page is taken off the roster after everything checks out

Enough talk. It's showtime!

Create a Mockup image of WebCrumbs for the /landing

As per @Ashok-Kumar-dharanikota suggestion at #39:

Imagine it as , when the user opened the website.

First thing He will see like

"A no-code solution to your next react project" or "Create React Application with our no-code Tool".

As hee continue to scroll. He will see some drag-&-drop animation of components (one inside another) (we can display a relevant small code snippet, where a component contains another component)

Analyze the Top 10 React Libraries for UI Components

Greetings, information seekers! WebCrumbs aims to make UI building a breeze. Your mission is to investigate what the top React libraries are doing right.

What Needs to Be Done?

• Identify the top 10 React libraries focused on UI components.
• Analyze their pros, cons, and unique features.
• Compile your findings in a markdown file.
• Open a pull request to add this research into our Research/ directory.

Why Is This Important?

• Helps us understand what users appreciate in existing solutions.
• Informs our own approach to UI component building.

Skills Needed

• A general understanding of UI/UX principles.
• Research skills to evaluate libraries based on merit.

Eager to scope out the landscape? Navigate to our WebCrumbs GitHub repo and share your insights!

[BUG]Page is down

where are you hosting this? hostinger? 🦗
page is down

API Endpoints

Hello good people! If you're interested in helping WebCrumbs communicate seamlessly with WordPress, this task is for you. And don't worry if you're a beginner; you're more than welcome here!

The Task

1. Research WordPress API: Just a quick skim to understand the basics of how WordPress sets up its API endpoints.

2. Draft a Markdown File: Summarize your findings and create a list of potential API endpoints that WebCrumbs could implement to align with WordPress. Your list can be simple, no need for any tech jargon.

3. Save it: Place your Markdown file in the /research directory in our GitHub repository.

That's it! By doing this, you're contributing valuable information that will help shape WebCrumbs' compatibility with WordPress. We're starting fresh, and every contribution counts.

Ready to take on the task? Here's your portal to the WebCrumbs GitHub repo. Go make history.

Setup Continuous Integration

Set up a CI/CD pipeline to automate testing and deployment.

Research Existing Solutions for Quick Functionality Implementation

Hello, detectives! Ever feel like you're reinventing the wheel? Help us find existing solutions that can be integrated into WebCrumbs for quick functionality implementation.

What Needs to Be Done?

• Search for open-source libraries and tools that align with WebCrumbs' mission.
• Document your findings, mentioning the pros and cons of each.
• Open a pull request to add this research into a new Research/ directory in our repo.

Why Is This Important?

• Speeds up development by identifying reusable solutions.
• Helps us maintain a focus on innovation rather than reinventing the wheel.

Skills Needed

• Basic understanding of React and JavaScript.
• Research skills to evaluate potential tools and libraries.

Eager to put your sleuthing skills to good use? Hustle to our WebCrumbs GitHub repo and get on the case!

Create COUNTRIES.svg file at the main directory

We're looking to add a new SVG file in the main directory, specifically for country flags. The idea is to make it as easy as possible to maintain and add new flags as the community grows.

Tasks:

• Review the country list available in the README.md file.
• Check out the CONTRIBUTORS.svg file as an example of SVG layout with multiple images.
• Create a new SVG file named COUNTRIES.svg in the main directory.
• Populate the SVG file with flag images corresponding to the countries listed in README.md.

This could be an excellent task for those familiar with SVG code or looking to sharpen their SVG skills. Your contribution would make it easier for everyone to identify the countries represented in our community.

For more information and to get involved, visit the WebCrumbs GitHub repo.

Originally posted by @webcrumbs-community in #8 (comment) - with @marameref and @Blossomeze

Write Hello Dolly plugin in javascript

Objective 🎯

• Develop a basic plugin in the /plugins directory.
• Utilize Webpack for building the plugin.
• The plugin should display the message "Hello, Dolly" when invoked.

Why it matters ❓

Getting a simple plugin up and running will serve as a stepping stone for more complex plugins in the future. It's all about laying the groundwork.

How to go about it ✅

1. Navigate to the /plugins directory.
2. Create a new plugin directory if it doesn't exist already.
3. Create a Webpack configuration for the plugin.
4. Write the code in javascript to display "Hello, Dolly."
5. Build the plugin using Webpack.
6. Test to make sure the plugin works as expected.

Additional Info 📝

Once it's done, let's all take a moment to review and test the plugin to ensure it works flawlessly. Questions or concerns? Reach out!

Style Dashboard Frontend Based on Figma Design

Hey team, it's high time we make the WebCrumbs dashboard look simple - but good! We've got a solid Figma design to guide us through this endeavor. Let's get this done and knock everyone's socks off, shall we?

This issue replaces #64

Requirements:

• Align with the Figma design found here.
• Ensure the design is responsive and scales well on different screen sizes.
• Maintain accessibility standards.
• Test cross-browser compatibility.

To-Do

• Work on the /admin directory using Material UI (already installed)
• Implement color scheme, typography, spacing, roundings, etc., to mimic the figma design
• Add UI elements like buttons, cards, etc., and the same copy as the figma design

For a clearer picture, it will end up looking like this:

This isn't just beautifying; it's all about enhancing user experience and usability. Trust me, they'll thank us later!

Initial setup at /demo using react

Have a first simple website at /demo using react

React Component Library

Develop a library of reusable React components to be used throughout the project.

Task /registry: Create the UX/UI for the plugin search page on /registry

Inspirations:

• https://wordpress.org/plugins/
• https://tairo.cssninja.io/dashboards/jobs

ALL: Star the WebCrumbs repository

Hurry up! ❤️

Initial setup at /registry using nextjs

Have an initial non-functional form to upload plugins at /registry.
Suggested content for the first page:

---

Contribute Your Plugin to the WebCrumbs Ecosystem

Welcome, Developer

We're pleased you're interested in enriching the WebCrumbs community with your plugin. To ensure a smooth process, please familiarize yourself with our Guidelines and Frequently Asked Questions.

---

Plugin Submission Steps

Upload File: [dropzone]
Maximum File Size: 10 MB

[bellow are checkboxes]

• Reviewed the Frequently Asked Questions
• Complies with Developer Guidelines
• Authorized for public sharing
• Compatible license for open sharing

Upon submission, our team will carefully review your plugin for quality assurance and guideline adherence.

---

Frequently Asked Questions

What is the Review Duration?

We prioritize efficient review procedures. While the time frame can vary, our goal is to approve plugins in 1 day.

How is the Plugin URL Generated?

Your plugin URL is formulated based on your Plugin Name. For example, if your plugin is called "InnovateMe," your URL will be https://registry.webcrumbs.org/innovateme.

Made an Error in the Plugin Name?

If you notice an error in your plugin name, contact us at [email protected]. We can adjust it before your plugin becomes publicly available.

Restrictions on Plugin Names?

Certain names are restricted to avoid any potential trademark conflicts. This is a measure for your protection.

---

Support Our Mission

If you find value in what WebCrumbs is achieving, consider starring our GitHub repository.