r/reactjs

Hey devs,

I’m building a PWA and most chart libraries I’ve tried feel… very “web-ish” (heavy, laggy, or just not matching native UI vibes).

I’m looking for something:

• lightweight (fast load on mobile)
• smooth animations / interactions
• looks clean + modern (not dashboard-y)
• ideally React-friendly

I’ve tried Chart.js but it still feels a bit generic.

Anyone using a chart lib that actually feels close to native apps?

Would love suggestions + real experiences 🙏

We built a terminal UI framework on React that diffs individual cells instead of repainting the screen. 97% of cells skipped per frame.

98 components, 19 AI widgets, 85 hooks, optional WASM acceleration.

GitHub: https://github.com/orchetron/storm

Website: https://storm.orchetron.com

Would love feedback.

How do I properly send the request for my code on sending the request to chatgpt?

                    <button onClick={() => {
                        
                        const APIBody = {
                            model: "gpt-image-1",
                            input: "Create a full-body studio fashion photograph of the person in this image. White background, professional lighting, high detail.",
                            images: [
                                personalPhotoBase64,
                                fashionPhotoBase64
                            ]
                        };



                        const fetchImage = async () => {
                            try {
                                const response = await axios.post("https://api.openai.com/v1/responses", APIBody, {
                                    headers: {
                                        "Content-Type": "application/json",
                                        Authorization: `Bearer ${API_KEY}`,
                                    }
                                }
                                );
                                //console.log(response.data)
                                if (response.status >= 200 && response.status <= 300) {
                                    
                                    setGeneratedImage(response.data.output[0].image.url)
                                    setGeneratedImages(prev => [...prev, response.data.output[0].image.url])
                                    setShowImage(true)
                                } 
                                
                                



                            } catch (error) {
                                console.error(error)
                                setStatusCode(error.status)
                                /*
                                    When Axios returns an HTTP error (4xx/5xx), it rejects the request and goes into the catch block, not the try block.
                                    You do get the status code inside the error.response object there.
                                */
                            }
                        };


                        if(personalPhotoBase64 && fashionPhotoBase64){
                            setIsClicked(true)
                            fetchImage();
                        } else {
                            setIsClicked(false)
                        }
                        
                    }} >UPLOAD & GENERATE</button>

                    <button onClick={() => {
                        
                        const APIBody = {
                            model: "gpt-image-1",
                            input: "Create a full-body studio fashion photograph of the person in this image. White background, professional lighting, high detail.",
                            images: [
                                personalPhotoBase64,
                                fashionPhotoBase64
                            ]
                        };



                        const fetchImage = async () => {
                            try {
                                const response = await axios.post("https://api.openai.com/v1/responses", APIBody, {
                                    headers: {
                                        "Content-Type": "application/json",
                                        Authorization: `Bearer ${API_KEY}`,
                                    }
                                }
                                );
                                //console.log(response.data)
                                if (response.status >= 200 && response.status <= 300) {
                                    
                                    setGeneratedImage(response.data.output[0].image.url)
                                    setGeneratedImages(prev => [...prev, response.data.output[0].image.url])
                                    setShowImage(true)
                                } 
                                
                                



                            } catch (error) {
                                console.error(error)
                                setStatusCode(error.status)
                                /*
                                    When Axios returns an HTTP error (4xx/5xx), it rejects the request and goes into the catch block, not the try block.
                                    You do get the status code inside the error.response object there.
                                */
                            }
                        };


                        if(personalPhotoBase64 && fashionPhotoBase64){
                            setIsClicked(true)
                            fetchImage();
                        } else {
                            setIsClicked(false)
                        }
                        
                    }} >UPLOAD & GENERATE</button>

How do I properly send the request for my code on sending the request to chatgpt?

                    <button onClick={() => {
                        
                        const APIBody = {
                            model: "gpt-image-1",
                            input: "Create a full-body studio fashion photograph of the person in this image. White background, professional lighting, high detail.",
                            images: [
                                personalPhotoBase64,
                                fashionPhotoBase64
                            ]
                        };



                        const fetchImage = async () => {
                            try {
                                const response = await axios.post("https://api.openai.com/v1/responses", APIBody, {
                                    headers: {
                                        "Content-Type": "application/json",
                                        Authorization: `Bearer ${API_KEY}`,
                                    }
                                }
                                );
                                //console.log(response.data)
                                if (response.status >= 200 && response.status <= 300) {
                                    
                                    setGeneratedImage(response.data.output[0].image.url)
                                    setGeneratedImages(prev => [...prev, response.data.output[0].image.url])
                                    setShowImage(true)
                                } 
                                
                                



                            } catch (error) {
                                console.error(error)
                                setStatusCode(error.status)
                                /*
                                    When Axios returns an HTTP error (4xx/5xx), it rejects the request and goes into the catch block, not the try block.
                                    You do get the status code inside the error.response object there.
                                */
                            }
                        };


                        if(personalPhotoBase64 && fashionPhotoBase64){
                            setIsClicked(true)
                            fetchImage();
                        } else {
                            setIsClicked(false)
                        }
                        
                    }} >UPLOAD & GENERATE</button>

                    <button onClick={() => {
                        
                        const APIBody = {
                            model: "gpt-image-1",
                            input: "Create a full-body studio fashion photograph of the person in this image. White background, professional lighting, high detail.",
                            images: [
                                personalPhotoBase64,
                                fashionPhotoBase64
                            ]
                        };



                        const fetchImage = async () => {
                            try {
                                const response = await axios.post("https://api.openai.com/v1/responses", APIBody, {
                                    headers: {
                                        "Content-Type": "application/json",
                                        Authorization: `Bearer ${API_KEY}`,
                                    }
                                }
                                );
                                //console.log(response.data)
                                if (response.status >= 200 && response.status <= 300) {
                                    
                                    setGeneratedImage(response.data.output[0].image.url)
                                    setGeneratedImages(prev => [...prev, response.data.output[0].image.url])
                                    setShowImage(true)
                                } 
                                
                                



                            } catch (error) {
                                console.error(error)
                                setStatusCode(error.status)
                                /*
                                    When Axios returns an HTTP error (4xx/5xx), it rejects the request and goes into the catch block, not the try block.
                                    You do get the status code inside the error.response object there.
                                */
                            }
                        };


                        if(personalPhotoBase64 && fashionPhotoBase64){
                            setIsClicked(true)
                            fetchImage();
                        } else {
                            setIsClicked(false)
                        }
                        
                    }} >UPLOAD & GENERATE</button>

If you ship React + Flutter, you probably have the same design tokens defined twice. Once as CSS custom properties, once as Dart constants. And no way to know they match until a designer screenshots both apps side by side.

I got burned by this enough times that I built something. You define tokens once in a standard JSON file, run one command, and get:

- tokens.css — CSS custom properties with :root light and [data-theme="dark"] dark blocks

- app_theme.dart — full Flutter ThemeData, ColorScheme, TextTheme

- tokens.ts — typed TypeScript constants

Then it runs a parity check that numerically compares every token between the CSS and Dart outputs. Catches the #5C6BC0 vs #5B6BC0 type of drift before it ships. Can block CI on a mismatch.

npx tokensync init

npx tokensync build

npx tokensync check --ci # exits 1 if CSS and Dart diverge

Mainly curious — how do people here handle token sync between web and mobile? Separate files maintained by hand? Some other tool? Is this even a problem at your company or do you just accept the drift?

A few days ago, I posted about a React calendar I was building.

Got some solid feedback here — and honestly, it confirmed something I was already feeling:

👉 Most calendar libraries break the moment you try to use them in real products.

So I took that feedback seriously and rebuilt a big part of it.

The reality I ran into (and many of you called out too): Drag & drop? → janky or hacky Recurring events? → missing or overly complex Timezones? → absolute pain DatePickers? → don’t scale beyond basic use “Customizable”? → until you need something slightly different

At some point it feels like: 👉 you’re not building your product 👉 you’re fighting the calendar library

Based on your feedback, I pushed a major update:

This is no longer just a calendar component.

👉 It’s turning into a scheduling engine

What changed: 🖱️ Proper drag & drop + resize (one of the most requested features) 🔁 Recurring events support (kept as simple as possible) 📆 Unified Date / Range / DateTime pickers 🔗 Works cleanly with react-hook-form / Formik 🌍 Timezone handling that doesn’t explode 🧩 Plugin-style architecture (so it doesn’t box you in) The core idea

Most libs force you to pick:

simple but limited or powerful but painful

I’m trying to build something that doesn’t force that tradeoff.

Need honest feedback again

The last post helped a lot — so doing it again.

If you’ve built scheduling systems:

👉 What’s still missing? 👉 What would make you actually switch to a new library? 👉 Or what’s the most painful thing you’ve dealt with?

Links npm: https://www.npmjs.com/package/schedultron demo: https://schedultron-live.vercel.app

If it’s bad, tell me why. If it’s useful, tell me what breaks.

I am so confused right now I don’t know what to learn next after mern, my top 2 choices are python and c++

python cause I thing i can learn AI DEVELOPMENT but i think the ai bubble may burst so I don’t want to waste time learning ai/ml if I doesn’t have a future

C++ cause i think it can be really useful in robotics,games and software making but still think it is difficult to learn

What should i learn??????!

A friend of mine has been complaining for a while about how repetitive starting a MERN project feels, and honestly, I didn’t think much of it at first.

I meaaan every time you start something new, you go through the same flow. Auth, folder structure, models, routes, controllers… by the time you’re done setting everything up, a few hours are gone and you haven’t actually built anything specific to your idea yet.

You either copy from an old project or rewrite everything again because it feels faster than digging through past code. Either way, it’s the same process every time.

So he built a small tool that basically generates a backend structure for you based on what you describe. Auth, models, routes, all wired up so you can just start building from there.

I tried it, and it does what it says, but I’m a bit conflicted. On one hand, it genuinely saves time and removes the boring part.

On the other hand, part of me feels like setting things up manually is just part of the process, especially if you want full control.

Curious how other people see this. Do you prefer starting from scratch every time, or would you actually use something that skips the setup phase?

If anyone wants to check it out, I have attached the link.

Mostro no meu canal do youtube como funciona. canal: MuriLoMenDonç4

Bonjour à tous ! Je viens de commencer à créer un projet avec ReactJs qui consiste à manipuler des fichiers PDF. L'idée est simple, l'utilisateur qui ce sont inscrit au site pourra import des fichiers sous format PDF et puis ces fichier seront afficher dans la page d'accueil de celle-ci avec le nom du fichier comme titre. Et on pourra télécharger ces fichiers si l'on veut.

Par où commencer ?

Merci beaucoup !

trying to connect to google oAuth but its not working

trying to connect to google oAuth but its not working