1Fi is an innovative fintech platform that enables users to purchase premium smartphones ,laptops and a lot more through flexible EMI plans backed by mutual fund investments. Users can maintain their investments while gaining purchasing power through low-interest credit lines.
- 🛍️ Smart Shopping - Browse premium smartphones and laptops
- 🎨 Multiple Variants - Choose from different colors and storage options
- 💰 Flexible Downpayment - 15% or 30% downpayment options
- 📅 EMI Plans - 3, 6, 9, or 12 months at just 8% p.a.
- 💎 Investment-Backed - Keep your mutual funds growing while you spend
- 🚫 Zero Fees - No processing charges, no hidden costs
- 📱 Responsive Design - Seamless experience across all devices
- React 18 - UI library
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icon library
- React Router - Client-side routing
- Node.js - JavaScript runtime
- Express.js - Web framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- CORS - Cross-origin resource sharing
- dotenv - Environment variable management
Follow these steps to set up the project locally.
- Node.js (v18 or higher)
- npm or yarn
- MongoDB Atlas account or local MongoDB installation
- Git
- Clone the repository
git clone https://github.com/alamrumman0/1fi-emi-platform.git
cd 1fi-emi-platform- Setup Backend
cd Server
npm installCreate .env file in Server directory:
PORT=3000
MONGO_URI=your_mongodb_connection_string
NODE_ENV=development- Setup Frontend
cd ../client
npm installCreate .env.development file in client directory:
VITE_API_URL=http://localhost:3000/api- Seed the Database
cd ../Server
npm run seed-
Run the Application
Terminal 1 - Backend:
cd Server
npm run devTerminal 2 - Frontend:
cd client
npm run dev- Open in Browser
Frontend: http://localhost:5173
Backend API: http://localhost:3000/api
1fi-emi-platform/
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── api/ # API integration
│ │ ├── App.jsx # Main app component
│ │ └── main.jsx # Entry point
│ ├── package.json
│ └── vite.config.js
│
├── Server/ # Backend Node.js application
│ ├── models/ # Mongoose schemas
│ │ └── Product.js
│ ├── routes/ # API routes
│ │ └── productRoutes.js
│ ├── controllers/ # Route controllers
│ │ └── productController.js
│ ├── scripts/ # Database seed scripts
│ │ └── seed.js
│ ├── server.js # Express server
│ └── package.json
│
├── .gitignore
└── README.md
Development: http://localhost:3000/api
Production: https://your-backend-url.onrender.com/api
GET /productsResponse:
{
"success": true,
"count": 9,
"data": [
{
"id": "...",
"name": "Apple iPhone 17 Pro",
"brand": "Apple",
"price": 134900,
"variants": [...],
"emiPlans": [...]
}
]
}GET /products/:idResponse:
{
"success": true,
"data": {
"id": "...",
"name": "Apple iPhone 17 Pro",
"description": "...",
"images": [...],
"variants": [...],
"emiPlans": [...],
"downpaymentOptions": [...]
}
}{
name: String, // Product name
brand: String, // Apple, Samsung, ASUS, etc.
category: String, // Smartphone, Laptop
description: String, // Product description
images: [{
url: String,
alt: String
}],
basePrice: Number, // Starting price
variants: [{
color: String,
colorCode: String, // Hex color code
storage: String, // 256 GB, 512 GB, etc.
price: Number,
stock: Number,
sku: String
}],
emiPlans: [{
tenure: Number, // 3, 6, 9, 12 months
interestRate: Number, // Interest rate percentage
label: String // "10% EMI" badge
}],
downpaymentOptions: [{
percentage: Number, // 15, 30
amount: Number
}],
features: [String],
isActive: Boolean,
isFeatured: Boolean,
slug: String
}/* Primary Colors */
--slate-950: #020617 /* Background */
--slate-900: #0f172a /* Cards */
--slate-800: #1e293b /* Borders */
/* Accent Colors */
--violet-600: #7c3aed /* Primary CTA */
--violet-500: #8b5cf6 /* Hover states */
--violet-400: #a78bfa /* Text highlights */
/* Text Colors */
--white: #ffffff /* Headings */
--gray-300: #d1d5db /* Body text */
--gray-400: #9ca3af /* Secondary text */- Headings: System font stack (optimized for each OS)
- Body: Inter, system-ui, sans-serif
- Monospace: Fira Code, monospace
- Grid layout with responsive design
- Product cards with images and pricing
- EMI badges for quick identification
- Hover effects and smooth transitions
- Multiple image gallery
- Variant selector (color + storage)
- Downpayment calculator
- EMI plan comparison
- Real-time price updates
- Dynamic EMI calculation based on:
- Product price
- Selected variant
- Downpayment amount
- Tenure selection
cd client
vercel login
vercel
vercel --prodEnvironment Variables:
VITE_API_URL=https://your-backend.onrender.com/api
- Connect GitHub repository
- Set root directory to
Server - Build command:
npm install - Start command:
npm start
Environment Variables:
MONGO_URI=your_mongodb_atlas_uri
PORT=3000
NODE_ENV=production
- Free tier: 512MB storage
- Automatic backups
- Global distribution
# Run backend tests
cd Server
npm test
# Run frontend tests
cd client
npm test- Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3.0s
- Bundle Size: < 200KB (gzipped)
npm run dev # Start development server with nodemon
npm start # Start production server
npm run seed # Seed database with sample datanpm run dev # Start Vite dev server
npm run build # Build for production
npm run preview # Preview production buildContributions are welcome! Please follow these steps:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Rumman
- GitHub: @yourusername
- 1Fi - For the design inspiration
- Unsplash - For product images
- Tailwind CSS - For the styling framework
- Lucide - For beautiful icons
For support, email rummanalam.dev@gmail.com or create an issue in this repository.
Made with ❤️ for 1Fi SDE Assignment
⭐ Star this repository if you found it helpful!