HatchSpace

• 

  other pages

• 

  cover page

Inspiration

HatchSpace is a digital time capsule web app that allows users to write messages or upload memories for themselves or their friends, seal them inside a virtual egg, and choose a future hatch date. When the chosen day arrives, users receive an email which redirects them to our website, and the egg cracks which after clicking, reveals what they saved. It's a fun and meaningful way to reflect, preserve moments, and surprise your future self.

What it does

Hatchspace is where we bring back the hope we hide away, A digital capsule where you write a letter for the future you or someone you love.built for moments we want to hold onto,but dont know how to.whether its a message of love, a reminder, a secret hope, or a reflection you seal it today and let it hatch when time is right. You can use it to remind your future self that you are proud of what you have become, celebrate a friendship or leave someone and encouragement for a hard day ahead, or just document who you are in this moment for later.

How we built it

3 of our team members worked on the design and front-end while 2 worked on the back-end. We made sure we got an idea that resonated with all of us (nostalgic team) before the hackathon had started. We also had to work around the time difference so some would be working and some resting. We assigned roles and then tested how everything worked separately and integrated it together doing integrated testing.Most of us have little to no experience with coding so we used Ai to help us when we had errors and bugs

Challenges we ran into

As beginner developers, we encountered several challenges throughout the project: GitHub Confusion: Setting up and managing GitHub was tricky at first. We struggled with understanding how to push code, manage repositories, and handle errors like 404s or untracked files. Code Integration: Collaborating as a team meant figuring out how to combine different parts of the code smoothly. We faced issues like file overwrites, merge conflicts, and syncing changes across devices. Planning and Structure: We initially dove into coding without a clear roadmap. Later, we realized the importance of wireframing, assigning roles, and planning features early on. Front-End vs Back-End Confusion: Understanding the difference between front-end and back-end tasks and how they connect was a learning curve. We sometimes mixed them up or got stuck trying to implement backend features without proper setup. Despite these hurdles, we problem-solved, asked for help, Googled like crazy, and kept going turning each challenge into a learning moment.

Accomplishments that we're proud of

One of the biggest accomplishments for us was just getting started as beginners. We learned how to use GitHub from scratch which honestly felt like another language at first. But step by step, we figured out how to commit, push, and collaborate as a team using version control. Another thing that felt really exciting was seeing our HTML and CSS changes actually reflect on the screen. It made all the typing feel real, and we started understanding how code turns into design. We’re also really proud of how we worked as a team. We communicated well, helped each other when things broke, and made sure everyone felt involved even when we were all unsure sometimes. And while the final version of our project might not be fully working right now especially because of some integration issues we’re still incredibly proud of what we built, what we learned, and how far we came in just a short time.

What we learned

We learned so much through this project not just technically, but as a team too. One of the biggest takeaways was definitely teamwork and communication. Figuring things out together, dividing tasks, and helping each other when we got stuck made a big difference. We also learned a lot about time management especially when juggling ideas, design, and code within a limited timeframe. On the tech side, we now understand how HTML, CSS, and JavaScript work together to build a real webpage and the kind of code that actually makes that happen. And we explored Figma for the first time! From wireframes to logo design, it helped us visualize everything better before building it. Overall, we’re walking away with new skills, a stronger team, and a lot more confidence to keep going.

What's next for HatchSpace

We plan to continue working on the website; properly integrating the backend and try to make it global! We have big hopes for HatchSpace and they don't end with this hackathon.

Built With

• css
• frontend:-html
• javascript-backend:-node.js-(server-side-logic)-database:-mongodb-(to-store-capsule-data-securely)-design:-figma-hosting:-github-pages(front-end)
• vercel(backend)frontend:-html