
Admin dashboard, an internal application for managing a hotel or B&B business.
Supabase shines as an open-source alternative to Firebase, offering a comprehensive suite of features like real-time subscriptions, authentication, and auto-generated APIs, therefore chosen as the backend. Its seamless integration with PostgreSQL allows us to leverage the full power of SQL while enjoying the benefits of a modern, serverless environment.
PostgreSQL, on the other hand, is a testament to the power and flexibility of relational databases. Its robustness, ACID compliance, and support for a wide array of data types make it a reliable choice for complex applications. The fact that it's open-source and extensible only adds to its appeal.
Vite, which means “fast” in French, lives up to its name by offering lightning-fast cold server start and hot module replacement (HMR). Unlike traditional bundlers, Vite only compiles code as needed or “on demand”, which significantly speeds up the development process. Overall, Vite's speed, versatility, and ease of use make it an excellent choice for bundling React applications and a great alternative to Webpack.
React Query is an excellent library for managing server state in your React applications. It provides out-of-the-box support for caching, background updates, and stale data fetching, which can significantly improve the performance of your application. React Query's intuitive API makes it easy to fetch, cache, and update data in your React components without having to manage state or write reducers and actions. It also has robust error handling capabilities, making it easier to manage failed or slow network requests. Furthermore, React Query is flexible and works with any JavaScript backend that can send and receive JSON, making it a versatile choice for many projects. Overall, using React Query can help simplify data-fetching logic, making your code cleaner and easier to maintain. It's used here to fetch data from supabase and keep the app state synced, immediately after changing data for cabins and bookings.
React Hook Form is a powerful tool for managing forms in React applications. Its primary advantage is its efficiency and minimalism. By leveraging React Hooks, it allows you to manage form state and validation with less code compared to other form libraries. It uses refs instead of state, which reduces the number of re-renders and improves performance. React Hook Form also integrates well with validation libraries like Yup and can be easily used with various UI libraries. Its API is intuitive, making it straightforward to use. These features make React Hook Form a popular choice for creating efficient, maintainable, and robust forms in React.
Recharts.js is a powerful, composable charting library built specifically for React applications. It offers a range of features that make it an excellent choice for data visualization. Firstly, Recharts.js is built on top of SVG elements with a lightweight dependency on 3D submodules, ensuring reliable performance. Secondly, it allows developers to quickly build charts with decoupled, reusable React components. This means you can customize your chart by tweaking component props and even passing in custom components. Lastly, Recharts.js provides more flexibility in terms of modifying the appearance and layout of the charts, including the ability to create custom chart elements by composing smaller components. These features make Recharts.js a versatile and efficient tool for integrating charts into React applications.
Styled-components is a fantastic library for styling React applications. It leverages the power of JavaScript and CSS to provide a flexible and efficient solution for component-based styles. With styled-components, you can write actual CSS in your JavaScript, allowing for dynamic styling based on props and themes. This eliminates the mapping between components and styles, leading to more readable code. Styled-components also automatically handles vendor prefixing and ensures unique class names, eliminating common CSS issues. Moreover, it encapsulates styles, preventing unwanted side-effects in other components. If you're looking for a scalable, maintainable, and intuitive way to style your React applications, styled-components is definitely worth considering.

A small clone of the popular Reddit App (for learning purposes).
while React is a powerful library for building user interfaces, Next.js provides a more comprehensive framework with built-in features and server-side rendering, which can simplify the development process and enhance the performance of your web applications. Next.js uses server-side rendering, where the user interface is generated on the server, reducing the amount of JavaScript the browser needs to load. This can lead to improved performance and better SEO.
NextAuth.js is a complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless. For authentication using oAuth with github, this package is used.
Prisma is a next-generation ORM that consists tools for auto-generated type safe queries, modeling and migration, and GUI. Foe better and easier usage of SQLite database this ORM handles queries in this project.
Zod is a TypeScript-first schema declaration and validation library. I'm using the term 'schema' to broadly refer to any data type, from a simple string to a complex nested object. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. In order to prevent bugs from happening and be type-safe, TypeScript is a better choice than vanilla JavaScript
NextUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS and React Aria. NextUI's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.
SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine. SQLite supports transactions, ensuring data integrity and consistency. It allows developers to work without a separate database server and eliminates the need for complex configurations.

Fictional Banking site