Transform your fitness journey with personalized AI workouts and an adorable virtual pet that grows stronger as you do.
Cardi-Oh is a fitness application that combines personalized workout plans with gamification elements. Users can create accounts, complete fitness profiles, and receive tailored workout recommendations.
- User Authentication - Secure login and signup system
- Fitness Profile - Comprehensive onboarding to understand your fitness level and goals
- Personalized Dashboard - Track your progress and view workout recommendations
- Settings Management - Update profile, account settings, and preferences
- Responsive Design - Works seamlessly on desktop and mobile devices
- Dark/Light Theme - Toggle between themes for your preference
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
For development and testing purposes, you can use these test credentials:
Email: test@cardioh.com
Password: test123
- Navigate to the login page (
/login) - Enter the test credentials above
- Click "Log In" to access the dashboard
- Use the settings page to complete your fitness profile
- Home Page (
/) - Landing page with "Get Started" button - Signup (
/signup) - Quick account creation (name, email, password) - Dashboard (
/dashboard) - Main user interface with profile completion prompt - Settings (
/settings) - Profile management, account settings, and preferences - Login (
/login) - User authentication
src/
├── app/
│ ├── (auth)/ # Authentication pages
│ │ ├── login/ # Login page
│ │ └── signup/ # Signup page
│ ├── (dashboard)/ # Protected dashboard pages
│ │ ├── dashboard/ # Main dashboard
│ │ └── settings/ # Settings page
│ └── page.tsx # Home page
├── components/
│ ├── sections/ # Page sections
│ │ ├── hero-section.tsx
│ │ └── onboarding-form.tsx
│ └── ui/ # Reusable UI components
└── lib/
└── auth/ # Authentication context
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.