My first full-stack application exploring React/Node.js patterns. Built to understand e-commerce flows before learning distributed systems.

⚠️ Note: Payment integration uses basic SDK without idempotency or distributed transactions (see [Interview Assistant] for production-grade architecture).

• User Authentication - Secure JWT-based login and registration
• Product Browsing - Browse products by category, brand, and price
• Product Search - Full-text search with filters
• Shopping Cart - Persistent cart management
• Checkout Flow - Seamless checkout with address management
• PayPal Payments - Payment integration demo
• Order Tracking - View order history and status
• Product Reviews - Rate and review purchased products

• Dashboard - Overview of orders and sales
• Product Management - CRUD operations for products with image uploads
• Order Management - View and update order statuses
• Feature Management - Manage homepage featured items
• Cloudinary Integration - Image upload and management

elora/
├── client/                    # React Frontend
│   ├── src/
│   │   ├── components/       # React Components
│   │   │   ├── ui/          # Shadcn UI Components
│   │   │   ├── auth/        # Auth Layout
│   │   │   ├── admin-view/  # Admin Components
│   │   │   ├── shopping-view/# Shopping Components
│   │   │   └── common/      # Shared Components
│   │   ├── pages/           # Route Pages
│   │   │   ├── auth/        # Login, Register
│   │   │   ├── admin-view/  # Dashboard, Products, Orders, Features
│   │   │   └── shopping-view/# Home, Listing, Checkout, Account
│   │   ├── store/           # Redux Slices
│   │   ├── lib/             # Utilities
│   │   ├── hooks/           # Custom Hooks
│   │   └── config/          # Form Configurations
│   └── package.json
├── server/                   # Express Backend
│   ├── models/              # Mongoose Models
│   ├── controllers/         # Route Controllers
│   ├── routes/              # Express Routes
│   ├── middlewares/         # Custom Middleware
│   ├── services/            # Business Logic
│   └── package.json
└── README.md

• Node.js 18.x or higher
• MongoDB instance (local or cloud)
• Cloudinary account (for image uploads)
• PayPal Developer account (optional, for payments)

1. Clone the repository

   git clone <repository-url>
   cd elora

2. Install root dependencies

   npm install

3. Install client dependencies

   cd client && npm install

4. Install server dependencies

   cd ../server && npm install

5. Set up environment variables

   Create a .env file in the server directory:

   PORT=3001
   MONGO_DB=mongodb://localhost:27017/elora
   MONGO_DB_NAME=elora
   
   JWT_SECRET_KEY=your_jwt_secret
   JWT_EXPIRES_IN=1d
   JWT_ALGORITHM=HS256
   
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret
   
   # Payment Mode: "demo" | "sandbox" | "live"
   PAYMENT_MODE=demo
   
   # PayPal (required for sandbox/live modes)
   PAY_PAL_MODE=sandbox
   PAY_PAL_CLIENT_ID=your_paypal_client_id
   PAY_PAL_CLIENT_SECRET=your_paypal_client_secret
   
   NODE_ENV=development

Development Mode:

1. Start the server (from server directory):

   npm run dev

   Server runs at: http://localhost:3001

2. Start the client (from client directory):

   npm run dev

   Client runs at: http://localhost:5173

Production Mode:

1. Build the client:

   cd client && npm run build

2. Start the server:

   cd server && npm start

Elora uses Shadcn/UI components with custom styling:

• Avatar - User avatars
• Badge - Status indicators
• Button - Various button variants
• Card - Content containers
• Checkbox - Form checkboxes
• Dialog - Modal dialogs
• Dropdown Menu - Navigation menus
• Input - Form inputs
• Select - Dropdown selects
• Skeleton - Loading states
• Tabs - Tab navigation
• Toast - Notifications

⚠️ Note: Payment integration uses basic SDK without idempotency or distributed transactions (see Interview Assistant for production-grade architecture).

The application supports three payment modes configured via PAYMENT_MODE:

VITE_API_URL=http://localhost:3001/api

See the .env.example file in the server directory for all required variables.

Client:

cd client
npm run dev       # Start dev server
npm run build     # Build for production
npm run lint      # Run ESLint
npm run preview   # Preview production build

Server:

cd server
npm run dev       # Start with nodemon
npm start         # Start production server

Screenshots temporarily removed - updating with new UI soon

1. Push code to GitHub
2. Connect repository to Vercel
3. Set environment variables
4. Deploy

1. Push code to GitHub
2. Create new Web Service on Render
3. Set environment variables
4. Deploy

1. Create cluster on MongoDB Atlas
2. Configure network access
3. Get connection string
4. Add to environment variables

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow existing TypeScript patterns
• Use the cn() utility for class merging
• Maintain consistent import order
• Write descriptive commit messages

Building Elora taught me:

• Database transactions matter: Race conditions in inventory taught me to use MongoDB sessions
• Payment state machines: The difference between "created" and "captured" requires idempotency keys
• Type safety: Migrating from JavaScript to TypeScript caught bugs I didn't know I had

Built with ❤️ using React, TypeScript, and Node.js