Inspiration
Thinking about elementary school teachers and children, I asked myself: "Can a web application be created to teach a little about dinosaurs and add some gamification to make it more interactive?" With that in mind, I decided to create a small, interactive website that presents organized information about dinosaurs.
This is how DinosaurLab came about.
What it does
DinosaurLab presents an interactive way to show dinosaurs and explain to children what they looked like when they lived on Earth billions of years ago. It consists of a series of different 3D dinosaur models that the user can select from a menu and view, including their skeletons.
As a complementary feature, the user has the option to assemble a puzzle from the different 3D models displayed. The puzzle takes approximately two and a half minutes to complete. A progress bar in the upper right corner of the interface indicates how many pieces have been correctly assembled.
As a guide, there is a rendered model that acts as a kind of shaded area where the user must place each piece using a drag-and-drop motion. The trick to solving the puzzle correctly is to constantly rotate the model, as the perspective can mislead the user into thinking they have already placed the piece correctly.
Some models are more complex to assemble than others due to the number of pieces that need to be put together.
How we built it
Using ChatGPT 5.6, different prompts were generated for the user to design dinosaur models in 2D images as a reference.
Then, using Codex within ChatGPT 5.6, different prompts were written to guide the user on how to develop the project, sharing the generated images so they could visualize and conceptualize the idea within a better context.
Several skills were activated to achieve a better result inside Codex.
Within Codex, different plugins were installed and configured for deployment purposes. For example, among the plugins installed were: GitHub, Vercel, and Supabase. GitHub was necessary to host all the code generated by Codex, Vercel to allow testing from different types of devices by sharing the final generated URL so the link could be shared, and Supabase to store user information and generate the leaderboard to obtain and display information about who is the fastest at assembling puzzles.
Challenges we ran into
The 3D models were not fully displayed in the designated area, so the prompt had to be improved so that the rendering matched the size of the model being displayed.
The texture color was incorrect, so the prompt was improved so that Codex would handle the lighting using Phong's model and apply it when the user wanted better visualization.
The file upload time to the GitHub repository was slow, so the prompt was improved to compress the files and extend the active session in the repository while the entire project was uploaded.
In the Vercel case, there was some confusion with the server because it was interpreting the app.js file as a serverless application, resulting in a "This serverless function has crashed" error. Therefore, the prompt had to be reworked so that Codex could make the necessary adjustments. After the execution task finished, an HTTP 200 confirmation was obtained, and the problem with Vercel was resolved.
Accomplishments that we're proud of
Developing a website that can be used to show in class and have fun assembling puzzles from prompts is very satisfying since many interactive projects can be created for different classes, providing a better learning environment for students and the general public.
What we learned
Install plugins within Codex to improve workflow and automate tasks.
Connect different development platforms by logging in via the command line and letting Codex handle file transfers.
Generate high-quality prompts so Codex can understand the user's needs.
Learn about the different skills that can be used to achieve better results.
Generate 3D models from a prompt and using reference images.
Design and connect a database based on an assigned task provided in Codex
What's next for DinasourLab
Add an option for users to download dinosaur models for 3D printers and assemble them in real life to add as collectibles.
Add an interactive video for each dinosaur featured.
Add new dinosaur models to the site.
Use Codex to enable the 3D dinosaur models and puzzle option to be viewed using Augmented Reality.
Add new gamification elements.
Show animated 3D models
Log in or sign up for Devpost to join the conversation.