Ciao Giovanni,
starting from why you can't access the routes
if you insert
https://coffeeroaster-giuva88.netlify.app/create-plan
directly in the browser.
From an A.I:
React app is deployed to production.
It's typically a problem with the server configuration.
In a development environment,
the development server is aware
of your React routes and knows how to handle them.
However, in a production environment, this isn't always the case.
The issue occurs because when
you access
https://coffeeroaster-giuva88.netlify.app/create-plan directly
in the browser or refresh the page,
the server is trying to find a physical
file or route at that location, which
doesn't exist – because the `/create-plan` route
is defined in your React application.
In other words, the server is trying to find a file at the location *create-plan*
and when it doesn't find one, it returns a 404 not found error.
What the server should do instead is to serve
the main index.html file,
which loads your React application, and then let React handle the routing.
The issue is fixed by configuring the
server to handle 404s by falling back to the index.html.
At the root of your project, you should set a netlify.json with the following:
{
"routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/index.html" }]
}
I can't guarantee 100% that it resolves, but it did for me.
Regarding accessibility, the headings should always
increase one by one.
You did h1, h2, and h4 at the coffee names (e.g. Gran Espresso).
It should have been h3.
You can install Wave Evaluation Tool in your browser
to help you with that, it helps a lot.
Regarding the architecture as a whole:
There are only three components in the src/components,
so most are inside the pages.
A page component, the About.jsx you did:
return (
<main className={styles.main}>
<HeroAbout />
<Commitment />
<Quality />
<Headquarters />
</main>
);
The components inside it (HeroAbout, Commitment, [...]) should all be inside the components folder.
And also,
the main could be a component itself
as you repeated the same code several times.
Further than that, you used the max-width
directly on the top div, which is far from ideal
as the footer does not stretch to the edges,
I've forked your project and pulled a merge request. Please check it.
There's also a format script
now that formats the whole project with prettier.
And I add the react-wrap-balancer
API to better format
typography. Play with it to see how it works.
Last but not least:
Inside the accordion, the input radio tag has display: none.
This line makes it as if they weren't there at all,
so it's not possible for users to user
the keyboard at it.
Try it and see it yourself.
The result will be better using a
visually hidden component wrapping the
input around so the tag remains on the DOM.
Keep up the great hustle, Giovanni
Best regards from Brazil, :)
