Nexthasurajwt
This is a NextJS starter template using api routes with a database + permissions.
Overview
The integration of Hasura, NextJS, Apollo, and JWT creates a powerful starter template for building a modern React application. This combination not only simplifies the backend setup with Hasura’s instant GraphQL API and real-time capabilities but also enhances the frontend experience with NextJS’s performance optimizations. By leveraging JWT for authentication, this stack ensures secure and efficient data access, making it an attractive choice for developers looking to streamline their processes.
This starter template is well-structured and addresses critical features such as authentication and permissions management. The inclusion of Google social login supports easy user onboarding, while planned features like email invitations and password resets indicate a focus on user experience and functionality. Whether you're a seasoned developer or new to web development, this template offers a comprehensive and organized approach to building applications with solid security practices.
Features
- Hasura Database Integration: Instantly connect to a Hasura database with Apollo integration for seamless data queries and mutations.
- JWT Authentication: Implement authentication based on best practices, utilizing JWT in memory and refresh tokens to maintain secure sessions.
- Role-based Permissions: Set up organization and member authentication in Hasura to control access to resources efficiently.
- Google Social Login: Simplify user sign-up and login processes with built-in support for Google OAuth integration.
- Environment Configuration: Easy setup with a pre-configured
.envfile, allowing quick environment variable adjustments for local development. - Debugging Support: VSCode settings are included to streamline development workflows; start debugging with a simple press of F5.
- Authenticated Routes: Protect your application’s routes using the
withAuthSyncHigher-Order Component (HOC) for secure navigation. - Extendable Architecture: Future updates planned such as email invitations, password resets, and design framework transitions offer potential for growth and customization.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Apollo
Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Hasura
Hasura is a GraphQL engine that provides instant, realtime GraphQL APIs over your databases. It offers built-in authorization, event triggers, and remote schemas to help developers build scalable GraphQL backends without writing any backend code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.