This repository serves as my personal boilerplate for React projects utilizing GraphQL and TailwindCSS. It is built on top of the VITE development environment. While currently tailored for JavaScript, there may be plans to create a TypeScript version in the future.
- React: A popular and efficient JavaScript library for building user interfaces.
- GraphQL: A query language for your API, and a server-side runtime for executing those queries by specifying your data as types and fields on those types.
- TailwindCSS: A utility-first CSS framework for rapidly building custom designs.
- VITE: A fast, opinionated build tool that serves as a lightning-fast development environment for your projects.
Follow these steps to get started with this boilerplate:
-
Clone the repository:
git clone https://github.com/Raphael-Soares/React-GraphQL-TailwindCSS
cd React-GraphQL-TailwindCSS
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:5173
to see your application in action.
Here's a brief overview of the project structure:
src/
: This is where your application's source code resides.components/
: Place your React components here.graphql/
: Store your GraphQL queries/mutations here.styles/
: Customize TailwindCSS styles in this directory.pages/
: Define your application's pages/routes here.App.js
: The main entry point of your application.
vite.config.js
: Configuration for the VITE build tool.
Feel free to customize this boilerplate to fit your project's specific needs. You can modify the TailwindCSS styles, add additional components, or integrate TypeScript if desired.
When you're ready to deploy your project, you can use the VITE build command to generate a production-ready build:
npm run build
This will create an optimized build of your application in the dist/
directory that you can then deploy to your hosting provider of choice.
This project is licensed under the MIT License - see the LICENSE.md file for details.
Special thanks to the open-source community for providing the tools and technologies used in this boilerplate.
Happy coding! ๐