React TypeScript Dark Mode Toggle with GSAP Animations

A modern, responsive, and interactive demonstration of a dynamic dark mode toggle, implemented with React, TypeScript, and Vite. It features smooth, visually engaging transitions powered by GSAP animations, showcasing best practices in front-end development.

🚀 Live Demo

click here to view the live demo.

✨ Features

• Dynamic Theme Toggling: Seamlessly switch between light and dark modes with a visually engaging curtain animation.
• Modern Stack: Built with React, TypeScript, and Vite for a fast and efficient development experience.
• Responsive Design: Styled with Tailwind CSS for a utility-first approach, ensuring adaptability across various screen sizes.
• Smooth Animations: Leverages GSAP (GreenSock Animation Platform) for high-performance, fluid UI transitions.
• Robust Testing: Includes a comprehensive unit testing setup with Vitest and React Testing Library to ensure reliability and maintainability.
• Clean Architecture: Organized with clear separation of concerns using custom hooks and a component-based structure.

🛠️ Technologies Used

• React 19: A JavaScript library for building user interfaces.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• Vite: A next-generation frontend tooling that provides an extremely fast development experience.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• GSAP (GreenSock Animation Platform): A powerful JavaScript animation library.
• Vitest: A fast and modern unit test framework powered by Vite.
• React Testing Library: A set of utilities for testing React components in a user-centric way.
• ESLint: For maintaining code quality and consistency.

📦 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have Node.js (which includes npm) installed on your system.

Installation

1. Clone the repository:

   # Clone the repository
   git clone https://github.com/lokiwilded/React-Typescript-dark-mode-toggle-with-GSAP-animations.git
   
   # Rename the folder to your preferred name (e.g., my-project)
   mv React-Typescript-dark-mode-toggle-with-GSAP-animations <your-folder-name>
   
   # Change directory into the new folder
   cd <your-folder-name>

2. Install dependencies:

   npm install

Running the Project

• Development Mode: Starts the development server with Hot Module Replacement (HMR).

  npm run dev

  Open your browser to http://localhost:5173 (or the port indicated in your terminal).

• Build for Production: Compiles the TypeScript code and bundles the application for production. The output will be in the dist/ directory.

  npm run build

• Preview Production Build: Serves the production build locally for testing.

  npm run preview

✅ Running Tests

To execute the unit tests for the project:

npm run test

This will run all tests configured with Vitest and report the results in your terminal.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

---