Mycelium

Inspiration

Family stories disappear when the people who remember them are gone. Most of us have a few photos and half-remembered names scattered across phones and relatives. Spreadsheets and paper charts are hard to use, and many family tree sites feel built for experts. We wanted something warm and simple that anyone, from a teenager to a grandparent, can open and use in a minute. The name comes from mycelium, the underground network that quietly connects everything in a forest. Families work the same way: the roots are hidden, but they connect us all.

What it does

• Family tree: an interactive tree showing relatives and how they are related. Select anyone to open their profile. • Family profiles: names, birth and death dates, photos and short biographies. • Memory timeline: important events, milestones, and historical dates in order. • Story archive: a place to save family stories, traditions and personal memories. • Family globe: a 3D globe with stars. Rotate it to find family surnames from every region, such as Lin in China, Kim in Korea, and Silva in Brazil. Glowing arcs lead back to Africa, a reminder that every human family tree shares the same starting point.

How we built it

The frontend is plain HTML, CSS, and JavaScript, so it loads fast and works on phones. The globe uses globe.gl, a free library built on three.js, so it needs no map API key. The backend is Node.js with Express, with routes for members, events, stories, and globe places. [Data is stored in a JSON file / a database: confirm.] The site is deployed on Deployxa. [Only if finished: the story helper calls the Groq API from the server, so the key never reaches the browser.] Design was our main focus. Mycelium has a warm heirloom look: cream paper, forest green and gold, with a serif font for headings. We also designed for different needs: a skip-to-content link, labeled form fields, full keyboard use with a visible focus ring, strong color contrast, large tap targets on phones, a pause button and reduced-motion support for the globe, and a text list of every globe place so the map is not the only way to explore. One of us built the interface, and the other built the server. We wrote down every route and field name first, so the two halves connected cleanly.

Challenges we ran into

Showing a tree with branching relatives in plain CSS, and making the globe usable by keyboard and screen reader users, took the most work. Keeping the frontend and backend in sync while building separately was another challenge, so we agreed on every route and field name before writing code. Connecting the API key to our app.

Accomplishments that we're proud of

• 3D globe with 21 family surnames across five continents, built without any map API key. • One consistent design from the intro page to the tree to the globe. • Accessibility built in from the start, not added at the end. • A frontend and backend built separately by two people that fit together through a written plan.

What we learned

Good design starts with the person using it, and accessibility is easier to build in from the start than to add later. We also learned how a frontend, server, and hosting platform fit together.

What's next for Mycelium

• Sign-in, so each family has its own private tree. • Invite relatives to add their own memories and photos. • Audio recordings of elders telling their stories. • Privacy controls, so families can choose what is shared and can delete their data at any time.