🚀 Credit Card Checkout Next.JS 15

🌟 Overview

This project is built with Next.js 15, TypeScript, and Tailwind CSS to provide a modern and scalable web application. It includes React Hook Form, Zod for form validation, ShadCN UI for beautiful components, and follows best coding practices with ESLint, Prettier, and Husky. CI/CD is handled by GitHub Actions with automatic deployments to Vercel.

🚀 Live Demo

🔗 Check out the deployed application here!

📖 Table of Contents

• 🚀 Credit Card Checkout Next.JS 15
  • 🌟 Overview
  • 🚀 Live Demo
  • 📖 Table of Contents
  • 🚀 Project Setup
  • 🛠 Running Tests
  • 📂 Project Structure
  • 🌍 Available Routes
  • 🤖 GitHub Actions
  • 🔮 Future Improvements
  • 👤 Author
  • 📜 License

🚀 Project Setup

To get started, make sure you have Node.js >= 22 and npm >= 10 installed.

# Clone the repository
git clone https://github.com/Hechprad/credit-card-checkout-nextjs.git
cd credit-card-checkout-nextjs

# Install dependencies
npm install

# Start the development server
npm run dev

🛠 Running Tests

# Run all tests
npm test

# Run all tests with watch mode
npm test:watch

# Run tests with coverage
npm run test:coverage

📂 Project Structure

📦 project-name
 ┣ 📂 .github             # GitHub-related workflows (e.g., Actions, issue templates)
 ┣ 📂 .husky              # Husky configuration for pre-commit and pre-push hooks
 ┣ 📂 .vscode             # VS Code settings and extensions for the project
 ┣ 📂 src                 # Main source code folder
 ┃ ┣ 📂 app               # Next.js App Router structure
 ┃ ┣ 📂 assets            # Static assets (images, icons, bgs, etc.)
 ┃ ┣ 📂 components        # Reusable UI components
 ┃ ┣ 📂 config            # Application configuration files (Jest)
 ┃ ┣ 📂 lib               # Utility functions and helpers (ShadCN)
 ┃ ┣ 📂 services          # API calls and business logic
 ┃ ┣ 📂 styles            # Global styles (Tailwind configurations, custom styles)
 ┃ ┣ 📂 types             # TypeScript type definitions
 ┣ 📜 .editorconfig       # Code style consistency across different editors
 ┣ 📜 .gitattributes      # Git configuration (e.g., line endings, file handling)
 ┣ 📜 .gitignore          # Files and folders to be ignored by Git
 ┣ 📜 .prettierignore     # Files ignored by Prettier formatting
 ┣ 📜 .prettierrc.json    # Prettier formatting rules
 ┣ 📜 components.json     # ShadCN UI component registry
 ┣ 📜 eslint.config.mjs   # ESLint configuration file
 ┣ 📜 jest.config.ts      # Jest configuration for unit testing
 ┣ 📜 next.config.ts      # Next.js configuration file
 ┣ 📜 package.json        # Project dependencies, scripts, and metadata
 ┣ 📜 postcss.config.mjs  # PostCSS configuration for Tailwind
 ┣ 📜 README.md           # Project documentation
 ┣ 📜 tsconfig.json       # TypeScript compiler settings

🌍 Available Routes

🤖 GitHub Actions

This project includes a CI/CD pipeline with GitHub Actions:

• Lint & Test: Runs ESLint and Jest tests on pull requests
• Build & Deploy: Deploys to Vercel on push to the main branch

🔮 Future Improvements

• Implement more unit tests 🧪
• Add internationalization (i18n) 🌍
• Build cart and confirmation pages 📃

👤 Author

Jorge Hecherat 💻 GitHub • 📧 Email

📜 License

This project is licensed under the MIT License. Feel free to use and modify it!