Welcome to PokeBudz! This is an adoption-style app where users are matched with a Pokémon based on a set of personality and preference-based questions. After you’ve completed the quiz, you’ll be paired with your new Pokémon buddy.
Adoption Certificate Generation: Instead of an interactive dashboard, create a feature that generates a certificate of adoption. This certificate could include detailed information about the Pokémon—its name, type, personality traits, and even a fun adoption message.
Digital Keepsake: The certificate could be available as a downloadable PDF or a dynamically rendered web page, serving as a digital proof of adoption and a fun memento for users.
Happiness Score Management: You can use a default value or use the PokeAPI’s base_happiness as a starting point and update it dynamically based on user actions.
The app is currently focused on matching users to their Pokémon buddy. As the project evolves, the backend and frontend will need to support features such as user authentication (for returning users), persistent Pokémon data, and more interactive features (like feeding and playing).
For the interactive dashboard, consider using additional React state management (like Context API or Redux) to track the Pokémon’s current state and happiness over time.
Run npm install in the project folder to install dependencies related to Express (the server).
cd client and run npm install install dependencies related to React (the client).
PokeBudz uses React Typed to animate dialogue across various components. Make sure to install it in the client directory:
npm install react-typed
** Example Usage ** Below is an example of how React Typed is implemented to create engaging dialogue:
import ReactTyped from 'react-typed';
<ReactTyped
startWhenVisible
typeSpeed={0}
backSpeed={0}
loop={false}
showCursor={false}
strings={[
`<p>Doot doot.. beep beep...</p>`
]}
onComplete={() => setShowForm(true)}
/>
Create .env file in project directory and add
DB_NAME=pokebudz
DB_PASS=YOUR_PASSWORD
(Make sure to replace YOUR_PASSWORD with your actual MySQL password)
Alternatively, you can rename the provided .env.example file to .env.
Access the mySQL CLI:
mysql -u root -p into your terminal, enter your password when prompted.In the MySQL CLI, type create database pokebudz; to create a database in MySQL.
Run npm run migrate in your TERMINAL, in the project folder (not your MySQL CLI! Open a new terminal window for this). This will create a tables called ‘users’ and ‘user_pokemon’ in your database. These are the table descriptions (also found in model > init_db.sql
users (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);
user_pokemon (
id INT NOT NULL AUTO_INCREMENT,
user_id INT NOT NULL,
pokemon_id INT NOT NULL,
pokemon_name VARCHAR(100),
nickname VARCHAR(100),
adopted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
last_fed TIMESTAMP NULL,
last_played TIMESTAMP NULL,
last_awake TIMESTAMP NULL,
happiness_score INT DEFAULT 0,
status VARCHAR(100),
PRIMARY KEY (id),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
The playable app lives in client/ and talks to PokéAPI from the browser (no Express required for the main flow).
cd client && npm install && npm run dev
Then open http://localhost:5173.
Optional: the repo root still has an Express API (npm start in the project root) if you extend the project with a backend later; the current Vite client does not call it.
Use http://localhost:5173 — complete the quiz or use “Pick for me!” / “Choose like Ash,” pick a buddy, then Continue with my buddy to open Care (data in localStorage).