Hello, Dev.to community!

I'm working on a Pokémon 3D Model Viewer project, and I want to make the Pokémon data more dynamic by creating a simple API. The project started as a fun way to explore 3D models of Pokémon and display them interactively on a webpage. Currently, I’m storing all the data in a static JSON file, but I’d like to make it more flexible and scalable by building an API that will serve the data dynamically.

You can view the demo of the project here.

The Idea Behind the Project:

The goal of this project is to create an interactive Pokémon 3D model viewer that allows users to explore different Pokémon in 3D, and switch between different forms (like Gigantamax, shiny, etc.). I want to build an API that serves the Pokémon data, including model URLs, names, and other details, so it can be easily fetched and displayed on the front end.

Why I Need Help:
I’m relatively new to backend development specially when it is at complex level and api is totally diff, I don't know anything related about it, so I need help with creating the API. Here’s what I need assistance with:

API Basics: I don’t know how to create an API from scratch. Can someone guide me through the process of setting up a simple API using Node.js (or another language that’s beginner-friendly)?

JSON Data Structure: I already have a JSON file with Pokémon data (name, model URL, type, etc.). What’s the best way to structure this data in an API?

Database Integration: Should I use a database for storing the Pokémon data, especially as the project grows? Currently, I'm using a static JSON file to pass the data, stored in a folder within the project. However, I want to ensure scalability and efficient data retrieval as I expand the project, so I'd appreciate advice on what kind of database would work well for handling dynamic content at scale.

Serving Static Files: The Pokémon 3D models are in GLB format. Everyone knows that it is hard to store and serve GLB files due to their large file sizes and the rendering time. The system can hang or slow down significantly when the number of models increases, especially with a collection of 1025+ Pokémon models. I’m unsure how to efficiently serve such large files through an API. Any advice on best practices would be very helpful!

Handling Requests: How can I fetch this data dynamically on the frontend and display it in the app? What’s the best way to manage API requests?

Current State and Future Plans: Currently, I have 721 glb format models of regular Pokémon, but I want to expand the project to include all the Pokémon from each region and type, as well as additional forms like Galarian, Gigantamax, and Mega Evolutions. Essentially, I want to include more models to cover all Pokémon available in the games.

Why This Project Matters:
This project is an exciting way for me to dive into backend development, while also combining my love for Pokémon with learning new skills. I’d love to make it more robust and dynamic, so that other people can use the data and explore Pokémon in 3D, similar to how websites like Pokémon Showdown display detailed Pokémon stats and models.

If you’re interested, I’d be happy to share more details about my project or my code. Any advice or help is greatly appreciated!

Clones: 15
Views: 77

Thanks so much in advance!