This is a very niche app and is specifically targeted for musicians who play by ear. What it does is: let bands / musicians document their songs (chords, key changes, drum rolls etc) for various instruments, set markers for different section (to repeat), and mute / solo instruments. The source material will likely be own compositions recorded on a DAW to a click track and tracks bounced (to be used as instruments on the app).

React is not the best choice but since we don't need real-time processing I think it is sufficient. Auth and backend is Supabase. Audio library is ToneJS.

A couple of demo songs are included.

https://sessionflow.nxt.rs/

made with Next js and tailwind css, I developed this landing page for my application.

https://www.snapblend.app/

When a codebase start to become very large, it is very important to make the right decisions about the architecture of the software. Unfortunately, due to the pressure to develop and the deploy new features as fast as possible, the engineers don’t have time to evaluate and improve the architecture of their apps.

With some many new developments of AI tools, shouldn’t we have a way to leverage the power of AI to help us choose and implement better architecture practices faster?

When I first thought about this question the first thing it came to my mind was: how can I upload my whole codebase to a LLM? What are the limits of it? Should I brake my entire codebase into different chunks and use a RAG approach? With the new models arriving with insane amounts of context-windows, shouldn’t I just put the content of all my files as the input?

And then I realised that I have no idea of how big my codebase is. I know it’s huge but I don’t know how many files it has. I don’t know how many chars it has. I have no idea of how many tokens my codebase would be to even understand if I should use RAG instead of the LLM context window.

Lucky I was able to find on Reddit the answer for my question:
Repomix https://github.com/yamadashy/repomix

This is as simple as it can be. You can either go to the site and put your repo url or you can run it as a cli on your terminal using npx repomix.

This will generate a single .xml file with all your repo content and files. If you run it on the terminal it will also count how many files and chars you codebase has and give you also an estimation of how many tokens your codebase will take on a LLM context-window.

For me the most important part was to know how many tokens it will be so I can understand if I can just pass it to a LLM without the need of RAG or any other technique. Now that I know how many tokens my codebase has, I can choose the right LLM to try it on.

During my research I found out that Google Gemini models are known for having huge context windows ( 1M tokens ) and I can use them for free. Nice. Now I had a xml file with the content of all my repo including the source code and the path of the files which can be used to feed it to a LLM and ask for improvements. My first try was to use the Gemini App and make a prompt asking it to examine my source and give me directions on improving the architecture, paste the content with the goold old Ctr + V / Ctrl + V and hit the button. It couldn’t be easier. Indeed, it was to good to be true.

When I tried to copy and paste directly the contents of the file on the Gemini App input, I pretty much broke the application because of the huge immense amount of information contained on that file.

Ok, fair enough. The codebase had more than 2 million chars. What did I expect? I remembered that Google has Notebook LM, which is a tool that allows you to upload a file and create an AI chat on the content of your file. It is perfect. But there was just one problem: the tool has no support for xml files. It only support PDFs and .txt files. When I opened the xml file generated by Repomix I realised that it is just a regular text file with some extra formatting. So why I just don’t change it’s mime type to .txt and upload it?

Well, it worked! Now I have an AI that can access the whole content of my codebase and give me insights on how to improve it’s performance, architecture, file-structure, anything.

I decided to give it a try with the following prompt:

the file is a representation of a github repo containing the source code of a react based web app. This app is structured in different workspaces. The objective of the app is to allow users to collect data for a given company and use this data to create esg reports. The admin user can request data to employees of the company by adding them in the company workspace and requesting information in different types. Based on the content of the repo I gave you, how can I improve the architecture of this app?

The result was incredible. In the answer the AI was capable to understand the current architecture, file structure, workspaces, separation of concerns, classes, interfaces, states and give me a comprehensive answer and insights on improvements I could make.

It was exactly what I was looking for. Mission completed!

Original post: https://saraceni.me/index.php/2025/04/07/how-to-use-ai-to-improve-the-architecture-of-your-app/

I have attempted to setup the multi language support for my app using i18n using files, however it didn't seem very scalable having to write multiple json object in files to use. I'm interested in an approach that wouldn't be a hassle to implement if the app potentially grew larger in the future.

I'm primarily a backend developer, and most of my frontend experience so far has been with Flutter. I've been thinking about adding React to my skillset, specifically React Native, and I'm looking for a good starter app to build and learn through hands-on experience, I learn best by building things myself.

Any suggestions for beginner-friendly app ideas to get started with React Native? Would be great if there is a youtube walkthrough for it as well.

https://github.com/andrewarrow/shellmates

Im a react native developer of 3 YOE and I'm planning to get hold of react js too, would love to hear from the fellow devs on how can I transition or use my rn knowledge in react? Thank you

I'm trying to learn about sessions (or session management) in Express, but I’m stuck. The tutorials on YouTube show me how to set up express-session and just pass some data into it, but they don’t explain why sessions are used or how they actually work. They just show the steps without giving any context. This is frustrating because I really want to understand the concept behind it, not just follow steps blindly.

I have a goal to finish learning Express by July, so I need to get this right. I want to know the real purpose of sessions and how they fit into web development.

Can anyone point me to a resource that explains sessions properly and not just the setup? And please don’t just tell me to 'read the documentation'—I’ve tried that already, but it feels like the docs assume I already know what sessions are.

Hi everyone,

Help needed.

I have an AI app that allows interaction with Chainlit (a Python UI), all deployed on AWS with load balancing.

Then, I have the main SaaS in React, with authentication, payments, etc. The trouble I have is that I have made my SaaS just as personalized login

(if user is registered) redirecting via a proxy to the AI app working on Chainlit. This is a problem.

- if I use the proxy just as a redirect the user sees the ip or address of the load balacing endpoint (and he can access it baypassing the login).

- if I mask the redirection, the user sees "mywebsite.com/api/proxy" but the result doesn't change, if you go to the url: [mywebsite.com/api/proxy](mywebsite.com/api/proxy) you also bypass the login.

- if I use axios, it doesn't work because the proxy using axios is a backend expecting interactions with a backend (json and not html coming from Chainlit).

Is there a way to solve this mess, without stripping off Chainlit and recreating the UI of the AI app in React?

https://reddit.com/link/1jtfbbr/video/cg7vtb724dte1/player

Looking for Help with Hierarchical Roles & Permissions Model (Postgres + Express + React)

Hey everyone, I'm currently building a project using PostgreSQL on the backend with Express.js, and I’m implementing a hierarchical roles and permissions model (e.g., Admin > Manager > User). I’m facing some design and implementation challenges and could really use a partner or some guidance from someone who's worked on a similar setup.

If you’ve done something like this before or have experience with role inheritance, permission propagation, or policy-based access control, I’d love to connect and maybe collaborate or just get some insights.

DM me or reply here if you're interested. Appreciate the help!

I’m looking for someone to help build a really solid video player component that can handle live and recorded video playback. This will be with a timeline component to navigate effortlessly through the video.

We have already built the backend that can serve video through a multitude of different methods (HLS, WebRTC, image streams, etc) and we’re looking for a front end developer to build an independent video player that can handle and switch between these playback methods and provide a great user experience.

Experience with HLSJS or similar would be good, or any 2D frameworks etc.

Would look at paying hourly or setting milestones, we have budget for this and are looking for the best developer we can find.

Hey devs! I recently faced this interesting frontend challenge in interviews - building a chessboard that shows valid queen moves. I've written a detailed guide covering:

• Complete solution with vanilla JS
• Live CodeSandbox demo
• Step-by-step implementation
• Common follow-up questions

Check it out here: https://medium.com/@rahul.dinkar/frontend-interview-challenge-solving-the-chess-queen-movement-0b4786972943?sk=88b9bb0fd1168bf30c85a2d62859108e

Perfect for interview prep or improving your DOM manipulation skills. Let me know if you have any questions!

I started programming a year ago, mostly sticking to Laravel and Blade—PHP is my comfort zone. Two weeks ago, I built a full SaaS (wasenderapi.com) using Laravel and React with Trae.ai’s help. Thing is, I’d never touched React before this. Didn’t even know what a component was—I’m a Blade guy.

AI basically dragged me through the React part, and I just vibed with it—#vibeCoding, I suppose. It’s not the ‘proper’ way to learn React, and I’ve heard some say it’s not real coding if you lean on AI like that. But here I am, a newbie with a working SaaS in a year. Shouldn’t the end result matter more than the process?

React folks, what do you think? Is vibe coding with AI a legit way to build, or am I missing the point of mastering the framework?

Hey, I’m the creator of Pillar-ui, an open-source react library that includes a set of packages (Core UI, Hooks, Icons, Utils). My goal was to build something lightweight the core components are 9x smaller than many existing UI libraries in the React ecosystem but it hasn’t gained any users yet.

I’d love to hear your thoughts! If you’re a front-end dev working on a new project, what factors influence your decision when choosing a UI library? What might stop you from trying out something like Pillar-ui? I’d really appreciate any honest feedback or suggestions.

My aim is to make it as useful as possible for devs like us, so I’m open to ideas on how to improve it. Thanks in advance!

Hey Senior developers , hope you guys are doing great , I just took a crash course of react from Bro Code(YouTuber) , I have good understanding of html , css , js and good understanding of react fundamentals.I want an internship where I can learn and grow. Need your suggestions

(suggest me a beginner level project too).

Hey devs,

I recently launched a mobile app called Vercel Manager on the Play Store. It lets you manage your Vercel projects directly from your phone — deploys, project settings, and more — all in one place.

I built it because I personally needed a way to monitor and manage my Vercel deployments while away from my laptop, and I thought others might find it useful too.

Play Store link: https://play.google.com/store/apps/details?id=com.vercelandroid

Would love it if you could check it out and share any feedback or suggestions. I’m still improving it and open to feature ideas!

Thanks!!!

Hello everyone!

I wanted to share a project I developed to improve my JavaScript and React skills.

The goal was to create something that would be useful primarily for myself. I've seen similar calculators, but I haven't found any that also calculate the cashflow generated by bond investments.

If you want to take a look at the web app, you can access it here: https://www.bondcashflow.com/

What the app does

• Calculates the complete cashflow of a bond with all coupon flows
• Displays results in both graphic and tabular format
• Supports both constant and step-up rates
• Handles different coupon frequencies (annual, semi-annual, quarterly, monthly)
• Calculates gross and net yields with tax application (12.5% or 26%)
• Automatically identifies any capital losses
• Calculates remaining duration, yields, and final capital
• Allows exporting all results to Excel
• Includes a feature: "Time to Cruise" that calculates how many cruises you can afford with the coupons from the entered bond

I'm open to feedback and suggestions to improve this little project!

Thanks everyone for your attention!

Recently i worked on a real time react project and i have seen some new things that i haven't known before, because of that project i lost my confident in my knowledge on react and i felt that i learned react the wrong way.So whenever i am starting a new app, in my mind i want to create components and styles the same way as the developer did in that app in the end i screw things up. So i want to ask if someone have experienced the same thing and if yes please tell me how you improved himself and give me some advices or maybe some youtube courses to increase my skills.

what do you think about bolt ai or lovable ai have you use it before to build a full-stalk website!!

website #webdevloper