Inspiration
My inspiration comes from my interest in religious studies, mythology, spirituality, and different traditions from around the world. I wanted to make a site that feels like the beginning of a digital grimoire, where users can interact with themes and eventually explore different symbolic or spiritual topics.
What it does
Galdralag is an interactive digital grimoire website that connects to the Gemini API. Users can type in a normal phrase and choose a style, such as soft, ancient, or ceremonial. The frontend sends the user’s phrase, selected style, and selected theme to my Express server. The server sends a prompt to Gemini, gets the response back, and returns it to the webpage as JSON so it can be displayed on the site.
How I built it
I built the frontend using HTML, CSS, and JavaScript. HTML structures the page, CSS handles the different themes, and JavaScript handles theme switching, localStorage, and the frontend request to the server. For the backend, I used Node.js with Express to create the /api/scribe route that communicates with Gemini. I also used a .env file so the Gemini API key stays server-side instead of being exposed in the browser.
Challenges I ran into
One of the biggest challenges was getting Google’s API key set up correctly and making sure it stayed secure. I had to learn why the key should not be placed directly in frontend JavaScript and why it should be stored in a .env file instead. I also had to understand how the frontend sends data to the backend, how the backend talks to Gemini, and how the response comes back as JSON.
Accomplishments that I’m proud of
I am proud that I was able to connect Google’s Gemini API to my own website and make it actually interact with user input. I also added multiple themes that users can select, and the site remembers the selected theme with localStorage. This made the project feel more interactive and more like a real web application instead of just a static page.
What I learned
I learned the foundation of using Google’s Gemini API in a full-stack web project. I also learned more about how HTML, CSS, JavaScript, Node.js, Express, API routes, JSON, environment variables, and frontend/backend communication work together. This helped me better understand how a website can move beyond a simple static page and become something more dynamic.
What’s next for Galdralag
Next, I want to improve the layout and flesh out the website design more. I would like to add more grimoire sections, such as rituals, myths, prayers, herbs, symbols, and astrology tools. Eventually, I would like the Gemini API to help generate more useful information for users, such as astrology interpretations, symbolic explanations, or customized grimoire-style entries.
Log in or sign up for Devpost to join the conversation.