👋 Introduction

This is a full-stack Pokemon Teambuilder I am currently building. I started this project because I was building a little teambuilder for a pokemon draft league for my friends (think fantasy football if it was pokemon). It morphed into something else entirely, when I realized that a lot of the pokemon teambuilders on the market had pretty terrible UIs and lacked the ability to actually set moves and stats, unless you are using something like Pokemon Showdown. There is also a crucial lack of a tool that can create both casual and competitive teams in the same place. I hope to build this application into a tool that can do both, and adapt to the user's preferences at any given moment.

💻 Demo

Check out the Demo, hosted on Vercel.

💪 Features:

• ✅ Infinite Scroll + Tabbing System
• ✅ Proper Responsiveness
• ✅ Stat Calculator using Pokemon's IV/EVs + Natures + Lv
• ✅ Login System via Clerk
• ✅ Smogon Breakdown
• ✅ Ability/Nature/Item/Move Select w/ included metadata
• ✅ Input Validation
• ✅ EV Limit
• ✅ Type Matchup Breakdown
• ✅ Client-Side Searching
• ✅ Multiple Team Support
• ✅ Import/Export Locally + Globally

🛣️ Roadmap

• ❌ Dark Mode Support
• ❌ Search fetches from Backend
• ❌ Custom Sign-in Page

🪲 Known Bugs

• ⚠️ Exports to Showdown may be malformed in cases where EVs are not specified.
• ⚠️ Attacks with dashes (-) are indistinguishable from ones with spaces. This is an API limitation.
• ⚠️ In certain scenarios, the API may be called more than needed after all pokemon are fetched from infinite scrolling.

⚙️ Stack

• NextJS + Typescript - An all-in-one web framework that includes inbuilt SSR among other optimizations.
• Tailwind CSS - A utility-first CSS framework that allows classes to be defined in HTML markup.
• React - A JavaScript library for building user interfaces.
• Flowbite - An extensible UI library built for Tailwind.
• Flowbite-React - React components for the Flowbite UI library.
• @clerk/nextjs - A library for adding authentication and user management to Next.js applications.
• Mongodb - A MongoDB driver for Node.js.
• Mongoose - An object data modeling (ODM) library for MongoDB and Node.js.
• Node-Fetch - A light-weight module that brings window.fetch to Node.js.
• Axios - A promise-based HTTP client for the browser and Node.js.
• Debounce - A utility function that limits the rate at which a function can be called.
• dotenv - A zero-dependency module that loads environment variables from a .env file.

🧞 Commands

All commands are run from the root of the project, from a terminal:

• next dev: Starts the development server and watches for changes.
• next build: Builds the project for production.
• next start: Previews the production build locally.
• next lint: Lints the project using ESLint.

Make sure to install the Next CLI by running npm install next. To create a new app with next, use npx create-next-app@latest instead.