Menu

Menu

012025LiveCapstone

APIdeas

Generate creative app ideas by combining APIs in a Pokemon-style card game.

An API combination card game. Users spend coins to generate 'cards' that represent creative app ideas combining exactly 2 APIs, presented in a Pokemon-style trading card format.

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/common.png

/images/apideas/uncommon.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

/images/apideas/rare.png

/images/apideas/epic.png

/images/apideas/legendary.png

Details

Organization

Altcademy

Duration

2 weeks

Role

Full Stack Developer

Team

Solo

Skills

UX/UI DesignFront EndBack EndDeploymentDatabase

Technologies

ReactTypeScriptHerokuPostGresRuby on RailsClaude CodeStripe API

Overview

Challenge

For my capstone project at Altcademy (Coding Bootcamp, Full Stack Web Development), I was having trouble coming up with a project idea. I had the idea to pair together some free APIs in a unique way, but did not want to do this manually.

Solution

The results from my prototype were very interesting! After seeing a few generated app ideas, I thought that a completed version of this prototype would be a better idea for my capstone project.

Process

1

Course Completion & Project Inception

After completing all courses from Altcademy, I was tasked with building a final capstone project, applying all the skills learned from the full-stack bootcamp classes.

2

Initial Prototyping & Brainstorming

I built a prototype of an app idea generator that randomly paired 2 APIs from a curated list. An AI tool, Claude, would then generate an app idea, a problem statement, a proposed solution, an implementation method, market potential, and an overall score.

3

Pivoting the Project Idea

After running the prototype a few times, I realized that creating a completed, polished version of the generator itself would be a more compelling and suitable capstone project.

4

Planning & Feature Definition

I began planning the project requirements for the full application, defining the necessary pages, the details for each idea card, and the overall scope of the project.

5

Design & User Experience

Developed wireframes and mockups to visualize the application's structure and create an intuitive user experience for the final design.

6

Development & Implementation

Wrote the code, integrated the features, and built the core functionality of the application, transforming the initial prototype into a fully-featured project.

7

Testing & Deployment

Performed quality assurance to fix bugs, optimized performance, and launched the project in a live environment at apideas.fun.

8

Final Submission & Outcome

I submitted the completed project as my final capstone. The project was successful, and I passed the class, effectively demonstrating the skills acquired during the bootcamp.

Video Preview

Results & Impact

0card combinations
0selectable APIs
0version attempts

Lessons Learned

What Worked Well

  • Rapid Prototyping: The initial prototype was essential for validating the concept and inspiring the final project direction.
  • AI-Powered Content: Using AI to generate ideas automated a core feature, allowing focus to shift to development and design.
  • "Gacha" Game Mechanics: Applying game concepts from casinos, slot machines, and gachapon style games added to the fun of generating new cards each time.
  • Easy Login: Users commented that enabling demo account access was a nice touch, so that users who wanted to try did not need to make a new accound

Areas for Improvement

  • Larger API List: The static API list could be replaced with a dynamic database or user submissions to increase idea variety.
  • Dynamically Generated Content: The card content and details are pre-generated in a json file. Connecting the app to an LLM to generate card data on the fly would give each card generation a more unique result.
  • Finalize Planning Stage: Using Claude Code to help build this project, I had to start over a few times because I was too excited to get started with the coding process and see immediate results. When starting a new project, I learned that it's more important to spend the maximum amount of time planning to address any edge cases or issues that need to be considered.

Next Steps

I've already started working and planning on version 2 of APIdeas. The main upgrades include:

  • API List Management: New admin dashboard allows for bulk upload of API list, along with deleting and updating individual APIs.
  • Gemini API Implementation: Each newly generated card will be unique to the time of generation and its user. Generating a card will send a request to Gemini API to generate card data automatically.
  • Up to 8 API Combinations: Instead of only 2 APIs, card combinations can have up to 8 APIs.

Screenshots

Preview image
Landing page
Preview image
User dashboard
Preview image
Success: Card generated
Preview image
My collection section
Preview image
Settings page
Preview image
Purchase history
Preview image
Coin purchase screen

See another project