This is a Next.js project bootstrapped with create-next-app.

Next.js 14 E-commerce Project

Hands-on project developed while completing the Next.js 14 Advanced Course (Platzi, 2024).
The project consists of building a fully functional online store with modern features such as authentication, state management, data fetching, checkout with Shopify, chatbots, and deployment.

👨‍💻 Author

Developed by NightDreams
Connect on LinkedIn

📌 Project Description

This project applies the main concepts of Next.js 14 to design, develop, and optimize a scalable e-commerce application. It covers static and dynamic routing, server and client components, global state management, SEO, caching strategies, and performance improvements.

The final implementation integrates Shopify APIs for product management and checkout, along with chatbots powered by Vercel AI SDK to enhance user experience.

---

🎯 Learning Objectives

• Master Next.js 14 App Router for static, dynamic, and parallel routing.
• Apply React Server Components (RSC) for performance and rendering optimizations.
• Implement authentication and authorization flows using GraphQL, tokens, and cookies.
• Integrate Shopify API for product listings, collections, and checkout.
• Improve SEO and performance with image optimization, caching, and revalidation.
• Deploy a production-ready e-commerce app on Vercel.

---

🛠 Tech Stack & Tools

• Framework: Next.js 14 (App Router, RSC, Edge Runtime)
• Language: TypeScript
• UI & Styling: CSS Modules, Sass, Next/Image
• State Management: Zustand
• Backend / APIs: Shopify API, GraphQL, Next.js API Routes
• Authentication: Tokens, Cookies, Middlewares
• AI / Chatbot: Vercel AI SDK
• Deployment: Vercel
• Dev Tools: ESLint, Prettier, Bundle Analyzer

✅Features and skills Covered

• Static & dynamic routing with params and searchParams
• Layouts & templates for global/local consistency
• React Server Components vs Client Components usage
• CSS Modules & Sass for scoped and global styling
• Image & font optimization (Next/Image, Google Fonts)
• Data fetching strategies: sequential, parallel, caching, revalidation
• Authentication & authorization with GraphQL, cookies, tokens
• Global state management with Zustand
• Error handling with Error Boundaries & custom pages (404, middleware)
• SEO techniques (dynamic & static metadata)
• Parallel routing & edge runtime deployment
• Shopify integration: products, collections, cart, checkout
• AI chatbot integration with Vercel AI SDK

---

🚀 Project Outcome

A complete e-commerce web application built with Next.js 14, integrating modern performance techniques, API connections, authentication, and AI-powered chatbots, demonstrating proficiency in advanced frontend development.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.