A boilerplate with Next.js, Style-Components, TanStack Query, Josh Comeau's CSS reset, and Supabase integration. ✨
📦 Built with Next.js - The React framework for production-ready applications.
💅 Styled Components - Utilize the power of CSS-in-JS with styled components to create stylish and maintainable UI components.
🔍 TanStack Query - A powerful asynchronous state management library.
🔄 Josh Comeau's CSS Reset - A solid foundation for consistent cross-browser styling.
🔧 Dotenv Config - Easily manage your environment variables with basic dotenv configuration.
🔗 Supabase Integration - Simplified configuration for Supabase, a robust open-source alternative to Firebase.
Follow these steps to get started with your project:
- Clone the repository:
git clone https://github.com/your-repo.git
- Install dependencies:
npm install
oryarn install
- Set up your environment variables by creating a
.env
file. Refer to the.env.example
file for guidance. - Start the development server:
npm run dev
oryarn dev
- Open your browser and navigate to
http://localhost:3000
to see your app in action!
This boilerplate provides a basic setup for integrating Supabase into your app. Supabase is an open-source alternative to Firebase that provides a scalable and secure backend for your applications.
To use Supabase in your project, follow these steps:
- Open the
src/utils/supabase.ts
file. - This file exports the Supabase client instance, which is configured to use the Supabase environment variables specified in the
.env
file. - You can import and use this client instance in your components and modules to interact with your Supabase backend.
- Refer to the Supabase documentation (https://supabase.io/docs) for more details on how to use the client and perform various operations.
Contributions are welcome! If you encounter any issues or have suggestions for improvements, please create an issue or submit a pull request. Let's make this boilerplate even better together! 🎉
This project is licensed under the MIT License. Feel free to use it for personal or commercial projects.
Special thanks to the creators and maintainers of the technologies and libraries used in this boilerplate. Their hard work and dedication make our development process smoother and more enjoyable.
- Next.js: https://nextjs.org
- Styled Components: https://styled-components.com
- TanStack Query: https://tanstack.com/query
- Josh Comeau's CSS Reset Defaults: https://www.joshwcomeau.com/css/custom-css-reset
- Supabase: https://supabase.io