A modern, animated quiz application built with React and Tailwind CSS. This project features a smooth, interactive user interface with engaging animations for a delightful user experience.
This project leverages the following technologies:
- React: UI library for building the component-based interface.
- Vite: Next-generation frontend tooling for fast build and development.
- Tailwind CSS: Utility-first CSS framework for rapid and responsive styling.
- Framer Motion: Production-ready motion library for React, used for:
- Page transitions
- Progress bar animations
- Score counting effects
- Interactive button states
- Lucide React: Beautiful and consistent icon set.
- clsx & tailwind-merge: Utilities for constructing and merging dynamic class names.
- Dynamic Quiz Interface:
- Seamlessly cycles through questions defined in the data model.
- Supports single-choice answers with visual feedback.
- Animated Progress Bar:
- Visual indicator of quiz completion using spring physics animations.
- Interactive Elements:
- Hover and tap animations on buttons and options.
- Smooth entry and exit transitions for question cards.
- Score Calculation:
- Automatically calculates results upon completion.
- Displays a "counting up" animation for the final percentage score.
- Responsive Design:
- Fully responsive layout that adapts to different screen sizes using Tailwind's utility classes.
- Polished UI:
- Glassmorphism effects (backdrop blur).
- Custom gradients and shadows.
- Decorative assets (animated GIFs and images).
Follow these instructions to set up the project locally.
Ensure you have Node.js installed on your machine.
-
Clone the repository (or navigate to the project folder):
cd "Weeding company"
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
src/App.jsx: Main application logic containing the Quiz engine,ProgressBar, andResultScreencomponents.src/assets: Contains static assets likepaw.gifandimage_e06c54.png.tailwind.config.js: Configuration for Tailwind CSS theme extensions and content// filepath: c:\Users\Abhijat\Downloads\Weeding company\README.md
A modern, animated quiz application built with React and Tailwind CSS. This project features a smooth, interactive user interface with engaging animations for a delightful user experience.
This project leverages the following technologies:
- React: UI library for building the component-based interface.
- Vite: Next-generation frontend tooling for fast build and development.
- Tailwind CSS: Utility-first CSS framework for rapid and responsive styling.
- Framer Motion: Production-ready motion library for React, used for:
- Page transitions
- Progress bar animations
- Score counting effects
- Interactive button states
- Lucide React: Beautiful and consistent icon set.
- clsx & tailwind-merge: Utilities for constructing and merging dynamic class names.
- Dynamic Quiz Interface:
- Seamlessly cycles through questions defined in the data model.
- Supports single-choice answers with visual feedback.
- Animated Progress Bar:
- Visual indicator of quiz completion using spring physics animations.
- Interactive Elements:
- Hover and tap animations on buttons and options.
- Smooth entry and exit transitions for question cards.
- Score Calculation:
- Automatically calculates results upon completion.
- Displays a "counting up" animation for the final percentage score.
- Responsive Design:
- Fully responsive layout that adapts to different screen sizes using Tailwind's utility classes.
- Polished UI:
- Glassmorphism effects (backdrop blur).
- Custom gradients and shadows.
- Decorative assets (animated GIFs and images).
Follow these instructions to set up the project locally.
Ensure you have Node.js installed on your machine.
-
Clone the repository (or navigate to the project folder):
cd "Weeding company"
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build