Miraé is a beautifully crafted mobile e-commerce application dedicated to beauty and self-care products. Whether you're looking for skincare essentials, haircare products, body care items, or elegant fragrances, Miraé provides a personalized shopping experience that helps you discover your perfect beauty routine.
|
✨ Features
|
- Personalized welcome with user profile
- Beautiful carousel showcasing featured products
- Category-based product browsing (Skincare, Haircare, Bodycare, Fragrance)
- "Self-Care Spotlight" curated product recommendations
- "Glow Up Tips" section with beauty advice
- Product Catalog: Browse through diverse beauty products
- Smart Categories: Organized by skincare, haircare, bodycare, and fragrance
- Wishlist: Save your favorite products for later
- Shopping Cart: Easy add-to-cart functionality with quantity management
- Product Details: Comprehensive product information with ratings
- Authentication: Secure signup and login system
- Profile Management: Personal account settings and preferences
- Onboarding: Beautiful guided introduction to the app
- Responsive Design: Optimized for all screen sizes
- Backend API: Robust Node.js/Express server with TypeScript
- Database: MongoDB with Mongoose ODM for flexible data management
- Real-time Updates: Dynamic product loading and cart synchronization
- Error Handling: Comprehensive error management and user feedback
- React Native - Cross-platform mobile development
- Expo - Development platform and tools
- React Navigation - Navigation and routing
- Expo Vector Icons - Beautiful iconography
- React Native Reanimated - Smooth animations
- Node.js - JavaScript runtime
- Express.js - Web application framework
- TypeScript - Type-safe development
- MongoDB - NoSQL database
- Mongoose - Object Document Mapping
- JWT - Secure authentication
- Bcrypt - Password hashing
- Express Validator - Input validation
🌸 Onboarding Experience |
🏠 Home Page |
🛍️ Product Showcase |
Before you begin, ensure you have the following installed:
- Node.js (v16 or higher)
- npm or yarn
- Expo CLI:
npm install -g @expo/cli - MongoDB (local or cloud instance)
- Git
-
Clone the repository
git clone https://github.com/yourusername/mirae.git cd mirae -
Install frontend dependencies
npm install
-
Setup the backend
cd backend npm install -
Configure environment variables
Create a
.envfile in thebackenddirectory:PORT=8080 NODE_ENV=development MONGODB_URI=mongodb://localhost:27017/mirae JWT_SECRET=your-super-secret-jwt-key-here JWT_EXPIRES_IN=7d CORS_ORIGIN=http://localhost:3000
-
Start the backend server
cd backend npm run dev -
Start the frontend application
# From the root directory npx expo start -
Run on your preferred platform
- iOS Simulator: Press
iin the terminal - Android Emulator: Press
ain the terminal - Web Browser: Press
win the terminal - Mobile Device: Scan the QR code with Expo Go app
- iOS Simulator: Press
Miraé uses a soft, elegant pink color scheme that reflects beauty and femininity:
|
Primary Pink
#FADADDMain background color |
Secondary Pink
#F7C8D0Accent color for buttons |
Text Dark
#2c3e50Primary text color |
- Primary Font: Poppins (various weights)
- Fallback: System fonts for optimal performance
mirae/
├── app/ # Main application screens
│ ├── auth/ # Authentication screens
│ ├── components/ # Reusable UI components
│ ├── context/ # React Context providers
│ ├── onboarding/ # App introduction screens
│ ├── product/ # Product detail screens
│ ├── tabs/ # Bottom tab navigation screens
│ └── utils/ # Utility functions
├── assets/ # Images, fonts, and static assets
├── backend/ # Node.js backend API
│ ├── src/
│ │ ├── config/ # Database configuration
│ │ ├── middleware/ # Custom middleware
│ │ ├── models/ # Database models
│ │ ├── routes/ # API routes
│ │ └── utils/ # Backend utilities
├── components/ # Shared React Native components
├── constants/ # App constants and colors
├── data/ # Static data files
└── hooks/ # Custom React hooks
POST /api/auth/signup- User registrationPOST /api/auth/login- User loginGET /api/auth/me- Get current user profilePUT /api/auth/profile- Update user profile
GET /api/products- Get all productsGET /api/products/:id- Get specific productGET /api/products/category/:category- Get products by category
GET /api/cart- Get user's cart itemsPOST /api/cart/add- Add item to cartPUT /api/cart/update- Update cart item quantityDELETE /api/cart/remove- Remove item from cart
cd backend
npm testnpm testYou can test the API endpoints using:
- Postman
- Insomnia
- Thunder Client (VS Code extension)
npm start # Start Expo development server
npm run android # Run on Android emulator
npm run ios # Run on iOS simulator
npm run web # Run on web browser
npm run lint # Run ESLintnpm run dev # Start development server with nodemon
npm run build # Build TypeScript to JavaScript
npm start # Start production server
npm test # Run tests-
Build the app for production:
npx expo build:android # For Android npx expo build:ios # For iOS npx expo build:web # For Web
-
Deploy to your preferred platform:
- Android: Google Play Store
- iOS: Apple App Store
- Web: Vercel, Netlify, or any static hosting
-
Build the backend:
cd backend npm run build -
Deploy to cloud platforms:
- Heroku
- Railway
- DigitalOcean
- AWS
- Google Cloud
We welcome contributions to make Miraé even more beautiful! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
Created with ❤️ by Ghozlene Arhab
