MeFit is a React and Firebase-powered application designed to provide users with a wide range of workouts, enabling them to track and customize their exercise routines effortlessly. Users can select exercises, set custom numbers of sets, and stay on top of their fitness goals.
Check out the live application here: MeFit
- Wide Range of Workouts: Browse through an extensive list of exercises.
- Customizable Sets: Personalize the number of sets for each exercise to match your fitness level.
- Workout Tracking: Track your progress and adjust your routine as needed.
- Responsive UI: A seamless experience on all devices.
- Dynamic Animations: Engaging animations to enhance user interaction.
- Frontend: React (using Vite for blazing-fast development)
- Backend: Firebase for database and authentication
- State Management: Redux Toolkit for efficient state management
- Styling: Tailwind CSS and DaisyUI for responsive and customizable UI components
- @emotion/styled: Styled components for creating reusable and maintainable styles.
- @reduxjs/toolkit: Simplified state management with Redux.
- AOS (Animate on Scroll): Smooth scroll animations for an engaging user experience.
- DaisyUI: Tailwind CSS components for rapid UI development.
- Firebase: Backend services, including authentication and real-time database.
- Framer Motion: Stunning animations for user interactions.
- Next Themes: Theme toggling for light/dark mode.
- React Animated Counter: Smoothly animated counters for tracking workout metrics.
- React Hot Toast: Lightweight notifications for better UX.
- React Icons: A rich set of icons for modern UI design.
- React Redux: Official bindings for Redux in React.
- React Router DOM: Routing library for navigating between app pages.
- @vitejs/plugin-react: Vite plugin for React support.
- TailwindCSS: Utility-first CSS framework for rapid styling.
- PostCSS: A tool for transforming CSS with JavaScript.
- ESLint: Code quality and formatting tool.
- Autoprefixer: CSS vendor prefix handling.
npm run dev: Start the development server with Vite.npm run build: Build the project for production.npm run lint: Lint the project using ESLint.npm run preview: Preview the production build.
mefit/
├── public/ # Static assets
├── src/ # Main source code
│ ├── components/ # Reusable components
│ ├── features/ # Redux slices and application features
│ ├── pages/ # Page components
│ ├── styles/ # Global and Tailwind CSS styles
│ ├── App.jsx # Main app component
│ ├── main.jsx # Application entry point
├── package.json # Project metadata and dependencies
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration