Buddify is a web application that has been built from the ground up using Next.js and Supabase as the database. These technologies have been chosen for their robustness and scalability, providing a solid foundation for storing user data, dates, accounts, and other functions

One of the main reasons for choosing Next.js over vanilla React is its server-side rendering capability. By rendering the application on the server-side, it greatly improves performance and search engine optimization, resulting in faster initial page load times and an overall better user experience.

Next.js also simplifies the process of handling routes, making it easy to create dynamic routes that match any URL pattern. Additionally, Next.js offers a range of features such as TypeScript support, image optimization, analytics integration, fast refresh for quicker development, and much more, making it a highly productive and efficient framework for building web applications.

Overall, Buddify's use of Next.js has enabled it to deliver a high-quality user experience with fast load times, while also providing a scalable and efficient backend with Supabase.

This project relies on various libraries and plugins to function properly. While some are geared towards minor visual cues, such as React Icons, others play a more significant role, like npm-check-updates.

To give you an overview of the solution's dependencies, here's a comprehensive list of the libraries and plugins used:

• Framer Motion

  This library is utilized for animating the transitions between pages.

• Toastify

  Toastify provides smoother and better alerts, such as when updating your account or triggering specific events.

• Hamburger React

  Hamburger React is used for the burger menu icon on smaller and medium screens. It comes with built-in functionality and customizable properties to adjust its functionality.

• NPM Check Updates

  This plugin upgrades the package.json dependencies to the latest versions while ignoring specified versions.

• Supabase

  We have integrated Supabase as the external database for this solution. It has been configured for easy implementation into Next.js without any difficulties.

The frontend component of the project was developed using SCSS/SASS, TypeScript, and JavaScript.

Both the frontend and backend were given equal attention during the project's development. The backend is responsible for facilitating proper database connectivity, while the frontend was designed to be as user-friendly as possible. This includes the ability to add, edit, and delete data from the solution directly, without having to modify it in the backend.

To ensure a seamless user experience across all devices and screen sizes, the solution was designed to be fully responsive. Additionally, the mobile user experience was a major focus of the project, with particular attention given to visual appeal, readability, and performance.

Accessibility was also a key consideration in the frontend development. The solution was optimized for screen reader support, including landmarks and labels to indicate elements and visual indicators to help users navigate the interface.

SCSS/SASS, which stands for Syntactically Awesome Style Sheets, was chosen for this project due to its usability features such as variables, nesting, partials, and mixins. Also because of it's developer experience.

TypeScript/TypeScript execute was used for structuring pages and components due to its advanced language features, reference validation, scalability, developer experience, and maintainability benefits.

The core focus of this project is to ensure seamless functionality and connectivity with an external database, specifically Supabase.

All data within the solution, including information about dates, users, accounts, database settings, permissions, shuffles, and more, is closely linked to Supabase.

To promote variety and fairness, the system is designed to shuffle dates every two weeks. The frontend sends a request to the randomizer/shuffling system, which actively generates new dates. These new dates are then stored in the database for future comparison, to ensure that users are not repeatedly paired with each other, and that everyone has an equal chance of being matched with different date members.

We have prioritized accessibility in our frontend development. The solution has been optimized for screen readers, with landmarks and labels clearly identifying different interface elements. Additionally, visual indicators are provided to help users navigate the interface with ease.

Thanks to the seamless integration between Next.js and Supabase, it is possible to make data modifications directly from the frontend. However, we have also implemented strict safety protocols to prevent unauthorized changes that could potentially disrupt the entire application.

The environmental keys required for a fully functional connection to Supabase are securely hidden, to prevent unauthorized access and any major changes that could impact the database and application connectivity.

Are you curious about what the project looks like? If so, head over to the Buddify GitHub repository.

The repository should have a detailed README.md section where you can learn about the project and how to get started with it yourself.

Please note that for security reasons, environmental keys are not included in the repository. If you want to add your Supabase environmental keys, you can do so by adding them to a .env.local file. However, be aware that some files may require changes due to non-existent tables or settings in your Supabase.

Are you interested in joining Buddify and contributing to its development? Whether it's improving the frontend or backend, feel free to message at:

NOTE: To participate in the development of Buddify, you must be a part of AKQA.