Rosette is designed for those who value simplicity and privacy. Unlike mainstream period trackers that often collect and sell sensitive health data, Rosette keeps everything on your device. No accounts, no cloud sync (unless you choose to), and no tracking.
It’s built with a Mobile-First approach and a "Designer Studio" aesthetic — soft tones, elegant typography, and smooth micro-interactions that make tracking your health feel like a moment of self-care.
- 🌸 Seamless Tracking: Log your cycle start and end dates with a single tap.
- 📅 Visual Calendar: View your past cycles and future predictions in a beautiful, intuitive calendar.
- 🔮 Smart Predictions: Automatically calculates your next cycle based on your personal history.
- 🔕 Discreet Reminders: Get gentle push notifications that are privacy-friendly (no one peaking at your screen will know what they're for).
- 🛡️ Privacy First: Your health data is your business. Rosette stores data locally and uses Firebase only for secure push notifications.
- 📱 Mobile-First: Optimized for a seamless experience on smartphones, perfect for on-the-go tracking.
- ✨ Premium UI: A modern, responsive design built with Tailwind CSS 4 and glassmorphism elements.
- Framework: React 19
- Build Tool: Vite 7
- Styling: Tailwind CSS 4 (using the new Vite plugin)
- Icons: Lucide React
- Backend/Notifications: Firebase
- Date Management: date-fns
- Routing: React Router 7
To run Rosette locally, follow these steps:
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/krina2005/Rosette.git cd Rosette -
Install dependencies:
npm install
-
Set up Firebase (Optional for local notifications):
- Create a project in the Firebase Console.
- Add a Web App and copy the configuration.
- Replace the config in
src/firebase.ts.
-
Start the development server:
npm run dev
-
Build for production:
npm run build
Rosette follows a Soft-Minimalist approach. We use:
- Typography: Clean, readable sans-serif fonts.
- Colors: A palette of soft pinks, lilacs, and warm whites to evoke a sense of calm.
- Mobile-First: Designed primarily for mobile devices to ensure the best possible experience where it matters most.
- Interactions: Subtle scale effects and smooth transitions to make the app feel alive.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Krina Parmar