๐Ÿš€ React TS Tailwind Framer-Motion with Vitest Project - framer-motion-tailwind-playground

Welcome to this feature-rich web application built with React, TypeScript, Tailwind CSS, Framer Motion, and Vitest. This ready-to-use project provides a solid foundation for you to customize and expand upon to suit your specific needs.

The gh-pages for this repository:

https://michalkurzewski.github.io/framer-motion-tailwind-playground/

๐Ÿ“š Table of Contents

โœจ Features

  • React: A powerful JavaScript library for building user interfaces.
  • TypeScript: A strongly-typed superset of JavaScript, providing enhanced developer experience and improved maintainability.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Framer Motion: A production-ready motion library for React, enabling smooth animations and transitions.
  • Vitest: A lightning-fast testing framework designed specifically for Vite projects.

๐Ÿš€ Getting Started

Before you start, make sure you have Node.js and npm installed on your system.

Installation

  1. Clone the repository: https://github.com/MichalKurzewski/framer-motion-tailwind-playground.git
  2. Navigate to the project directory: cd framer-motion-tailwind-playground
  3. Install dependencies: npm install

๐Ÿ–ฅ๏ธ Usage

Development server

Start the development server by running: npm run dev Your app should now be running on http://localhost:3000.

Build for production

To create a production build, run: npm run build The built files will be available in the dist folder.

๐Ÿงช Testing

To run tests using Vitest, execute the following command: npm run test

๐ŸŒ Deployment

To deploy your project, follow the deployment guidelines provided by your preferred hosting platform. For example, you can use gh-pages to easily deploy your React application. Just follow my guidelines: https://medium.com/@michal.kurzewski/react-with-router-vite-github-pages-setup-3cd952bdf29

๐Ÿ“„ License

This project is licensed under the MIT License.