← BACK TO PORTFOLIO
MediStore
EcommerceHealth-Care
Tech Stack
Next.jsTypeScriptTailwind CSSFramer MotionTanStack QueryNode.jsExpress.jsPrismaPostgreSQLZodBetter AuthMulterCloudinary
MediStore is a full-stack online medicine e-commerce platform that enables customers to browse, search, and purchase medicines, while providing sellers with inventory management tools and administrators with a comprehensive dashboard for platform oversight.
⚡ Challenges Faced
- ✦Server Components vs. Client Components — This was the biggest game-changer and the most challenging aspect of the entire project. Next.js App Router encourages keeping pages as Server Components by default for better performance and SEO. I made it a priority to keep all main pages as server components and extract any interactive or client-side logic (state, effects, event handlers) into separate client components. This architectural pattern made the application significantly faster — pages load with pre-rendered HTML from the server, and only the interactive parts hydrate on the client. Getting this separation right required careful planning of the component tree and a deep understanding of the React Server Component model.
- ✦Search with TanStack Query — Implementing the real-time medicine search in the navbar was another challenge. I used TanStack React Query with a debounced input to fetch search results and display them in a dropdown. Coordinating the query caching, loading states, and dropdown visibility while keeping the search component as a client island within the server-rendered navbar required thoughtful composition.
- ✦Authentication Across SSR & Client — Synchronizing JWT-based authentication between server-side rendering, middleware route protection, and client-side state was complex. Cookies needed to be forwarded manually during SSR fetches, and the automatic token refresh cycle had to work seamlessly on both sides without causing redirect loops.
- ✦Image Uploads with Cloudinary — Handling formData with multer on the backend and ensuring proper content-type headers were set (or deliberately not set) on the frontend required careful debugging, especially for medicine and profile image uploads.
🚀 Future Implementations
- ✦Medicine Expiry Date Tracking — Add an expiry date field to medicines. The system will automatically monitor expiry dates and send notifications to the admin when a medicine is about to expire or has expired. The admin can then review and remove expired medicines from the platform to ensure customer safety.
- ✦Seller Verification by Admin — Currently sellers can onboard and start listing immediately. In the future, new seller profiles will require admin verification before they can list medicines. Admins will be able to review seller credentials(license number, shop details) and approve or reject seller applications, adding an extra layer of trust and quality control to the platform.
- ✦Payment Gateway Integration — Integrate online payment options(SSLCommerz, Stripe, etc.) alongside the existing Cash on Delivery method.
- ✦Product Reviews & Ratings — Enable customers to leave reviews and ratings on medicines they have purchased, helping other buyers make informed decisions.