Life's a Beach

Life's a Beach: don't get washed away in the sea of terminology.

Comment

💻 Domain Name

lifesabeach.tech (registered with domain.com)

💡 Inspiration

PrideHacks should be all about celebrating and understanding LGBT+ identities. As someone who identifies as LGBT+ (Matt) I understand just how difficult some people can find it to understand LGBT+ identities, no matter how much they'd love to. I think it is incredibly important that good educational content is available to support people in learning about the people they love and those that matter around them.

Why Life's a Beach? Well Adam wanted it to have beaches, so there's beaches. To add to this! Beaches are calm, relaxing places which I have found to be a serene place whenever I feel stressed, unwanted or unloved. I can sit on the sand or walk through the sea and feel at peace. ~ Adam

👷‍♂️ What it does

Life's a Beach is an API and website that educates users on LGBT+ terminology to help people understand different LGBT+ identities. There is currently multiple sections which have both an API and info pages for some of the most common identities you may come across, from different pronouns to sexualities!

The REST API allows for other hackers and developers to also utilise the tools provided to help spread the LGBT+ education across the internet, making it easy to pull accurate data into your site or app with nothing more than a GET request!

The pages within each directory also contain information on how to call the API to allow for the best user experience in a useful and beautiful interface that leaves no opportunity for confusion!

📑 TL;DR

  • API to return data and information regarding each term listed in our data and on the site.
  • Website to guide users on how to call the API and showcase the possibilities of the API for use in your own projects.
  • LGBT+ Education through accurate and high-quality data, information and examples.
  • Terminology definitions to help people from every background better understand LGBT+ identities.
  • Easy to implement into other hacks and projects with the REST API.

❓ How we built it

We built Life's a Beach using NextJS to power both the website and the API. The site is powered purely by React and CSS with NextJS's powerful routing to assist us in building the API and Website all in one!

GitHub was imperative for collaborating and controlling versions as well as making sure our code did not conflict. We opened many issues to fix bugs and discuss different possibilities throughout the hackathon. Codespaces came in handy for reviewing each other's code and what would life be without GitHub Co-pilot! We really did use most of GitHub's offerings this weekend.

We focussed massively on the UI and UX of this hack - our aim was to make it both fun and easy to use. Keeping the site to just a few buttons and no bloated code means it loads fast and is simple and clear. We included the API endpoints and sample data on every page to make it easily comprehendible as to how the API can be accessed and what you can get out of it as a developer. We decided against having access tokens for the API for the sake of user experience to keep the Life's a Beach API simple and accessible with just a few lines of code; In our case we simply used:

export async function getStaticProps({ params }) {
    const sexuality = await axios.get('http://localhost:3000/api/sexualities/' + params.id)
    return {
        props: {
            sexuality: sexuality.data,
            params: params
        }
    }
}

which makes it extremely simple to access. Look, just a get request with axios and there you have it, everything you need!

💾 Technologies:

  • NextJS
  • Git
  • Github

🚀 Use of Sponsor technology

🔗 Domain.com

We used Domain.com to register lifesabeach.tech - the domain name that the project would be hosted on.

🐙 GitHub

We used GitHub to collaborate, control versions, test code in codespaces, assist us via co-pilot, open issues to resolve bugs and questions, and branch our different workspaces.

Throughout PrideHacks we consistently made commits to alternative branches using git and opened pull requests which we were able to manage within GitHub - this not only allowed us to collaborate more efficiently and securely but also to control differing versions of our code.

GitHub codespaces made it easy for us to check, test and approve each other's pull requests and therefore ensure the best quality for our hack and to prevent unexpected bugs due to conflicting code!

GitHub co-pilot definitely made this a fun project to build with the power of artificial intelligence assisting us to develop our hack with great quality and concise code. Co-pilot also helped us to avoid bugs with it's useful suggestions.

We linked up GitHub to Netlify as well, meaning the site would update when we make changes.

⚡ Challenges we ran into

We ran into a few challenges along the way... I mean who'd have know we'd have such different ideas for something as simple as a colour scheme?

Not only did we have the simple issues like that, but at some points I really wanted to just walk away and scream. Yes. JavaScript really can be that frustrating sometimes. Trying to call the API and then pass the props in through dynamic routing, well it may sound confusing, but it's even more confusing than it sounds when under a time constraint! A bit of googling later, some trial and error and a very well deserved lunch and we were back on the road to completion!

Building the API was a first for us as well - this led to quite the journey of problem solving, but we got there in the end! It was initially difficult to use the dynamic API option in Next but we soon worked it out and managed to pull all the necessary data and serve it in an easy, accessible format!

🌈 Accomplishments that we're proud of

  • Adam used NextJS for the first time!
  • Matt built an API for the first time.
  • We worked as a team to achieve our goal of a successful and useful end product!
  • We were able to include genuine, helpful data in our hack that could seriously help people not only to understand themselves better but for their friends and family to also be able to understand more about how they identify.

👨‍🎓 What we learned

We not only learned more about building with NextJS, as this was a first for Adam, but also how to work better as a team. To begin with we had some conflicting ideas - but it wasn't long before we both made compromises and figured out how we could include both of our ideas in fun ways and still make a successful and stylish product.

We learned to be able to build usable APIs with useful purposes and high functionality and then utilise and showcase them within our project; this enabled us to serve our high-quality, accurate data for each term listed on the site. We learned to use NextJS's dynamic page and API routes for this which made for a great result and no need to hard code each route to repeat functionality.

We even dabbled in a little Photoshop at this hackathon, creating graphic assets for the project, such as the pridehaj image used in the bottom right of every page and the thumbnail shown on our project's Devpost submission and accompanying YouTube demo video for Life's a Beach!

📅 What's next for Life's a Beach

We'd love to add more terminology and definitions to Life's a Beach and have a really strong platform to support so many people around the world. We would love to be able to include more about gender and other generic terms.

Life's a Beach could become an incredible tool used by not only thousands of LGBT+ people, but their relatives, and developers who want to include our accurate information and definitions in their sites, apps and tools.

Built With

Share this project:

Updates