ClickIn

ClickIn — a full-stack instant grocery delivery web application, delivering fresh groceries to your doorstep. Built with a modern web stack focusing on performance, scalability, and seamless user experience.

Built with cutting-edge technologies, Instait focuses on:

• 🛒 Intuitive customer experience
• 🏪 Vendor-friendly platform for inventory and order management
• 🛵 Streamlined operations for delivery partners
• 📦 Real-time inventory management
• 🔒 Secure transactions and data protection

Instait serves three core user roles:

• 👤 Customers: Effortlessly browse, order, and receive groceries.
• 🏪 Vendors: Manage products, prices, and orders seamlessly through a powerful dashboard.
• 🛵 Delivery Partners: Get optimized routes and real-time updates for deliveries.

---

UI/UX Design

Figma design: ClickIn

Presentation: ClickIn PPT

---

Features

• 🛍️ Browse fresh fruits, vegetables, and groceries.
• 🔎 Powerful search and filter system.
• 🛒 Add products to cart and checkout easily.
• 🛵 Real-time order tracking and updates.
• 🛡️ Secure login/signup authentication.
• 🗣️ Multi-language support.
• 📦 Vendor/admin panel for managing orders and inventory.
• 👨‍💻 Delivery partner app integration.

---

Live Site

🌐 Frontend Deployed: ClickIn.com

🔗 Backend Deployed: ClickIn

---

Tech Stack

Category	Technology
Frontend	React.js, CSS3
Backend	Node.js, Express.js
Database	MongoDB, Mongoose
Authentication	JWT, Google OAuth
DevOps	Docker, Vercel, Render
AI/LLM	Gemini API (for Autocomplete)
Realtime	WebSocket (Socket.IO)
Caching	Redis
Payment	Paypal API
Testing	Jest / Mocha

---

Installation

Clone the repository

1. Clone my repository:

   git clone https://github.com/kalviumcommunity/S82_Rahul_Capstone_ClickIn.git
   

2.  cd ClickIn
   

3. Frontend folder

    cd frontend
    npm install
    npm start

4. Backend folder

    cd backend
    npm install
    npm run dev

---

ClickIn Development Roadmap

Days	Goals and Tasks
Day 1-5	- GitHub Repository & Branch Setup - Low-Fidelity Wireframes - High-Fidelity UI Mockups - Initialize React Frontend - Initialize Node.js + Express Backend
Day 6-10	- Design Database Schema - Implement Basic CRUD APIs (GET, POST, PUT) - Perform Database Read/Write Operations - Set Up Database Relationships
Day 11-15	- Implement Authentication (JWT, Google OAuth) - Create React Components (Login, Dashboard, Product Listing) - Implement Frontend CRUD (Update, Delete Entities) - Match Frontend and Backend with Design
Day 16-20	- Complete JWT Authentication Implementation - Set Up Testing Framework (Jest or Mocha) - Add Docker Support - Integrate LLM/AI Features (like Autocomplete)
Day 21-25	- Implement Rate Limiting for APIs - Integrate Redis Caching - Add WebSocket for Real-time Communication - Integrate Payment Gateway (Stripe/PayPal)
Day 26-30	- Deploy Frontend (Vercel) & Backend (Render) - Make 3 Open Source Contributions - Final Code Clean-up & Review - Add Extra Features/Polish UX

---

Screenshots

Home Page

Vendor Dashboard Page

Delivery Partner Dashboard Page

---

🤝 Contributing

Contributions are welcome!
If you find any bugs, have ideas for new features, or improvements, feel free to open an issue or submit a pull request. 🚀

Steps to Contribute:

1. Fork the repository.
2. Clone forked my repository:

    git clone https://github.com/kalviumcommunity/S82_Rahul_Capstone_ClickIn.git
   
   

---

License

This project is licensed under the MIT License.

---

📞 Contact Me

If you liked this project or want to collaborate, feel free to connect with me! 👇

• GitHub: Rahulab14
• LinkedIn: Rahulab14
• Email: [email protected]

---