Ignite Shop

🛍️ Overview

Ignite Shop is a modern e-commerce platform developed as part of the Rocketseat Ignite Program. This application is built with Next.js and React, delivering a seamless shopping experience while implementing modern web development practices and server-side rendering capabilities.

---

🎯 Project Motivation

Ignite Shop is designed to:

• 🧠 Master advanced concepts in Next.js, including Static Site Generation (SSG) and Server-Side Rendering (SSR)
• 💡 Implement best practices in React development with TypeScript
• 🔧 Build a scalable, production-ready e-commerce solution integrated with Stripe
• 📊 Explore state management and complex UI interactions with modern tools

---

🌟 Current Features

• 🎨 Dynamic Product Catalog with Keen Slider integration
• 🖼️ Optimized image loading with Next.js Image component
• 💳 Stripe Integration for product management
• 📱 Responsive Design with Stitches
• 🎯 Incremental Static Regeneration (ISR) for product pages
• 💰 Currency formatting and price display optimization

---

🛠️ Technology Stack

---

📂 Project Structure

ignite-shop/
├── src/
│   ├── assets/            # Static assets (images, logos)
│   ├── components/        # Reusable UI components
│   ├── pages/             # Next.js pages
│   │   ├── _app.tsx       # Global app configuration
│   │   ├── _document.tsx  # Custom document configuration
│   │   ├── index.tsx      # Home page with product listing
│   │   ├── product/       # Product pages with SSG
│   │   └── success.tsx    # Checkout success page
│   ├── styles/            # Global styles and themes
│   └── utils/            # Helper functions
├── public/                # Public assets
└── package.json          # Project metadata and dependencies

---

📈 Development Progress

Completed Features

• Project Setup and Configuration
  • File System Routing Setup
  • Custom Document Configuration
  • Font Integration
  • Styling with Stitches
• Visual Structure Implementation
  • Global Layout
  • Home Page Design
  • Product Listing Layout
  • Product Carousel with Keen Slider
• Stripe Integration
  • Product Registration
  • Image Domain Configuration
  • Server-side Product Fetching
  • Static Generation
    • ISR Implementation
    • Currency Formatting
    • Product Page Optimization
• Product & Checkout

Next Steps

• Shopping Cart Implementation
• Checkout Flow Integration
• Success Page Development
• User Authentication
• Order History

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Stripe Account for API integration

Installation

# Clone repository
git clone https://github.com/rafaumeu/ignite-shop.git

# Navigate to project
cd ignite-shop

# Install dependencies
npm install

# Configure environment variables
cp .env.example .env.local
# Add your Stripe API keys to .env.local

# Start development server
npm run dev

---

👥 Contributing

Contributions are welcome! If you'd like to improve Ignite Shop, feel free to fork the repository and submit a pull request.

---

📜 License

This project is licensed under the MIT License.

---

🚀 Built with ❤️ during Rocketseat's Ignite Program