Pokémon TCG

Table of Contents

• Overview
• Features
• Technologies
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• Running the Application
• WebSite Preview
• Test Yourself

Overview

This frontend is built using Next.js with TypeScript for creating a performant and scalable web application. Tailwind CSS is used for styling, and shadcn/ui provides accessible and customizable UI components. Axios is integrated for API requests, making data fetching seamless and efficient.
WARNING: This app is not otimized to mobile devices yet!!

Features

• Modern and clean Ui design.
• Fully responsive layout.
• API integration using Axios.
• Reusable and accessible components with shadcn.
• Tailwind CSS for rapid styling and responsiveness.

Technologies

• Next.js
• TypeScript
• Tailwind CSS
• Axios

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (>= 16.x)
• npm (or yarn)

Installation

1. Clone the repository:

   git clone https://github.com/falcao11/pokemon-tcg-frontend.git
   cd pokemon-tcg-frontend
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

Environment Variables

Create a .env file in the root directory and add the following variables.

NEXT_PUBLIC_API_URL="http://localhost:3333/api/v1"

Running the Application

1. Run the application:

   npm run dev
   # or
   yarn dev
   

2. Open your browser and visit:

   http://localhost:3000
   

Website Preview

1. My Collections
   
   

2. My Cards by Collection
   
   

Test Yourself

You can try it there if you want!