Welcome to the Chai and Buy project.
When building e-commerce applications or any system that requires real-time updates, it's crucial to provide instant feedback to users.
In a traditional React application, you might use client-side state management to update the cart count immediately.
However, with Next.js Server Components and Server Actions, we can achieve the same result with server-side rendering, ensuring that the data is always fresh and consistent. Especially for things like cart counts, users expect that when they click Add to Cart, it updates right away.
Inspiration for this project
For this project, we’re pulling in products from one of my favorite online stores I Hate Copy . Fun fact: I actually own the "Hot Chai Cold Revenge" print from them, I just really love their stuff 😄.
Here's how the demo looks like:
Working Demo
Try it out:
- Try adding items to the cart and see the magic happen.
- Cart count updates immediately
- No page refresh required
- Feels fast, real, and satisfying
Products
Hot Chai Cold Revenge
Wake up Didi
Want to JEE and be FREEThis demo uses real Server Actions to update the cart count.
The cart count is stored on the server and updated instantly.
This is what you'll be building in this project.
Exercise: Your App Right Now
Try it out:
Products
Hot Chai Cold RevengeWake up DidiWant to JEE and be FREEThis demo uses real Server Actions to update the cart count.
The cart count is stored on the server and updated instantly.
Challenge 1: Make the cart count update instantly
Your goal: Make the cart count update instantly without needing a page refresh. You don’t need client-side state to do this.
Challenge 2: Fix Server Actions Best Practices
Once you've got the cart updates working, you'll notice we're not following best practices in our server actions file.
Your challenge is to identify and fix these issues:
What to look for:
- Functions that shouldn't be in a server actions file
- Cart count being stored in a local variable instead of persistent storage
- Consider moving the cart count to a local JSON file for better data persistence
This will give you a more realistic approach to data persistence.
Good luck!