A JAM stack app for an e-commerce restaurant made with Next.js and Commerce.js.
- Create read update delete products
- Get categories and products from commerce.js BE
- 100% lighthouse scores
- Snappy UI with Optimistic Updates using React Query
Client: Next.js, React Query, SCSS, TailwindCSS
Server: Commerce.js
npm install- Add your
NEXT_PUBLIC_CHEC_PUBLIC_API_KEYto.env npm run dev
First, You'll need to create an account at Chec or use the CLI.
You can get a copy of your public API key at Chec Dashboard > Developer Settings.
It would also be useful to make a few categories with some products as well as an 'all' category for containg all the products.
note: If you don't want to create an account with Commerce.js, you can use the demo store public key pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec.
While I appreciated the notrab tutorial on commerce.js with next.js, I wasn't happy with how the data was handled. I ended up re-writing all of the code and extending it for improved performance and user experience.
In particular, I switched from SSR to SSG (with incremental static regeneration) and from reducers to react query. Using ISR improved the time to first byte while using React Query enabled me to entirely remove the store and move all the App state logic into react query where it manages syncing to server state. SSR improved the time to first byte while React Query enabled me to eliminate the store and move move all the Application wide state into react query. Using prefetched content and stale data allows a faster largest contentful byte. For instance, at build time some resources are cached for a user to view while waiting for fresh data. see:
The desktop design of the home page was inspired by a dribble design:
I Purchased the figma design from:
note: if you want use the images as well as the code you should purchase a license for both. Get the licences for the images at https://www.freepik.com/premium-photo/chicken-shish-kebab-with-vegetables-isolated-top-view-copy-space_7592271.htm
- As far as the code for the design, it was based on code I had from an earlier project in Laravel that I improved upon. In this project i greatly extended my orignal code. And did a custom design for the menu cart pages.
