PandeyMart

Finallllllllyyyyyyyyy!!!! The application is polished enough and is live at https://www.pandeymart.tech. This devlog contains the biggest time in this entire project though; sorry for that.
In this last but not the least update, i tried to build the app and run the build server, but it gave me error on Reflect:Metadata, which was caused due to the passkey from better auth and its deps. I found the culprit after several investigations, and decided to remove passkey altogether. In addition to that, i updated the .env.local conflicts such as process.env vs import. And, also the app url. Also, the nodemailer wasn’t working, which was then fixed by removed tls. Afterwards, the additionalPrice not being in negative was removed and default colors for label were added, also adjusted the tab marker to align properly with the customization button and removed unnecessary logs on client.

I added the reviews and ratings section for the products individual page so that the buyer can get instinct about the quality and features; and experiences of other people as well.

Finally!!! I added the orders page for the users through which they can see and manage their orders. The orders shows the timeline for pending, processing, shipped, and delivered, and cancelled if the order was cancelled. Additionally, i also added the leave a review option when the product is delivered, and even added refund and cancel options. Similar to that, i also made it mobile responsive and the necessary details are shown in the cards.

I had ensure the product order functionality with customizations which was initially a bug and also solved the payment processing issue of automatic status labelling (like; PAID, CANCELLED etc for the payment status). Additionally, i make sure that the product donot show quantity number whenever inStock is false and accordingly changed the UI as well.

In this patch, there are many but small changes made to the application,

• Admin Panel Link in client is only shown to those who have admin email
• Only the required data are stayed on the products modal as well as the page
• Ensured responsiveness of dynamic product page
• Added N/A indicator if rating arenot a valid number

Now, the application’s product page have true featured products, true best selling products and all products listed. Also, the layout had been changed a bit which you might not have noticed, but i dropped some components to make sure the application is clean.

I refactored the datamanagement component to add inline edit mode for all orders, users, and products. The inline edit mode autosaves when voluntarily release the option and also added seller notes option for each orders so that customers can get some details. Also, i removed the concept of category and instead used labels for ease.

I didn’t even realised the time. Finally, i can say that 99.99% of the application’s backend is done!!!
I had ensured that the orders, users, products, stats all are now dynamic and working (especially, users and orders which weren’t initially).
Additionally, i created the payment success and failed page for the application.

Finally, i integrated the esewa payment gateway and it is working fabulously. The app automatically understands difference between successful payment and unsuccessful attempts and also accordingly manages the status of payments and other stuffs.

On previous update, I added the ordering capability of the user into the application which enables them to order the products with the notes and addresses.
In this update, I used the assist of AI since integrating esewa payment gateway with your own research would take an entire day. Here, i extend the scope of payment by adding esewa gateway and payment redirection. In doing so, even the COD didnot worked so i reiterate over the code and found that there were two orders being created and type mismatches. Thus, i changed them and it worked.

I added the functionality for ordering items from the client. It also automatically reduces the count of that product, and maintains the fields integrity. Currently, i need to add validations and online gateway. On top of that i shall also show the user with a success UI after the order placed.

I had added the sticky UI pattern in the tabLists and the theads of the table. Also, added a selected counter for nice UX. Also, i made the view button to work for the products and redirect the admin to its respective page upon click in a target of _blank.

i had integrated product data fetching and also enhance the server functions to be extra safe via try catch blocks.

I updated the server functions to include requireAdminAccess protection so that even if somebody bypasses the frontend route, the server refuses to create or update or manipulate anything in the server in general by non-admin user.
Also, i had added the dynamism in the UI of admin panel by introducing aggregated postgresql query to get the stats shown in admin panel.

Struggling so hard to implement the add and update feature for the products using admin panel and finally it’s here!!!
An extremely important piece of advice would be to ensure try catch block in every async functions as i heard a saying “Database are at another continent”. Anyways, in this patch, i had added functionality for the admins of the platform to be able to manage products primarily create and update products with ease and introduced optimistic updates to atleast save database resource once for every insertion.

I had added the products to the database as a single source of truth and ensured that the application now depends on the data available in the database. The image below is of Prisma Studio (don’t think that i created this UI)

I had implement product loading and error handling in product route. Actually, it’s an addition of bridge between the entire application and a single source of truth.
An important piece of advice would be to never ever use throw new Response() in tanstack start but instead use throw new Error() and errorComponent.

I had implemented the get. create and update product serverfn in the application so that the application is intact to the single source of truth.
I had refactored the models to use more descriptive field names and update related functions and added mappings util to make sure that the product aligns with the perfect type

I created prisma schemas for users, address, products, orders. orderItems, ratings, and so on. Also, i added backend system for sending verification mails to the newly created users. But, for some reason the redirection link isnot working in email (maybe due to gmail thinking it as a harmful link).

I added checkout component (using some help of AI and community components) for the application which looks sick. The checkout page has validations and typesafe environment. Also, it has stages of information, payment and success.

Finally completed the Create New Product section and Edit the existing product section within the application. This component have a flow for adding or editing a product. Additionally, i had optimised the product showcase in the dashboard to add the products from local (created newly) so that unnecessary database calls can be avoid. Talking about database calls, next i am gonna work in creating schema for products, users, and orders so that the application can be really a fullstack.

[I used a bit of help of AI.]

I added selection functionality and UI enhancements to Data Management component.

Instead of adding more and more columns and hitting the width threshold, i tried to use Accordion from shadcn to try to make a UI which will show many information about the orders in a collapsible form, but sadly Accordion of shadcn constantly break the UI and gave me React.Children.only expected to receive a single React element child. error again and again. I tried chatgpt, claude but none of them were able to solve this issue.
Then, i tried a new approach (suggested by AI) to render tr with tds when a button is clicked and woohoo! it worked. But, in return took a lot of my precious time :(

I made the components for Admin page distinct as i realized this page is gonna be heavy. Also, i had made some UI tweaks to make the Admin Dashboard look nicer than the previous one. However, there are a lot of things pending for this admin page such as a full data mode, selections, bulk actions (or even actions in general as there’s no actions currently).

I added Admin component and StatsBar for admin dashboard with stats display.

I added admin route and dashboard component with basic tabs for managing orders, products, and users

I made the Header component to integrate cart management with tanstack-query and created a modular approach of determining the final product before checkout

I made the Header component to integrate Sheet for cart management

I added a robust system for adding the products in favourite list and also made the cart number badge dynamic i.e it changes based on the number of distinct items in the cart

Your Favourite products are live in favourite page.
In this patch, i created the /favourite route and used tanstack-query to fetch the data efficiently. Also, added a serverFn for getting the products based on id (however, i hadn’t yet attached backend for the products)

I have created use cart hook as well as use favourite hook, create their respective context and providers to consume the data and the data to be preserved across entire application. Currently, i had also added the use favourite context into action so that the favourite state is preserved (almost forever).

I also added the offers section + the header component to make the styles of the application further overpowered

I added Why choose us section and the section starter component, and i also made the structure for the components really smooth.

Added the ad section in the website, which will act as a marketing section too.

I added dynamic page for the products, just used the Modal and tweaked it to have some visual design. I will be adding reviews, More like this section and more.

The modal for the wide product overview also has the working dynamic pricing system with all the customizations working.

Finally the math is mathing in the products cards. And, not only this, i had added a robust ecosystem of types for future scalability. I replaced the weight only customization to a full-fledge customizing system which enables to add various customizations within a product.

I had further optimised the dialog appeared when the eye (view) option is chosen. The content was not being able to scrolled but now i had fixed it by introducing data-lenis-prevent. I had added more visual effects, clean unnecessary codes,

I had decently used AI for creating this Products Card, but made it polished from my side (there were bugs in code and i fixed them). The cards donot have pricing logics implemented yet, meaning, i shall need to implement the logic for calculating the price according to quantity. And, there are few tweaks are need for making this really working.

I took three files from a public repo so that i speed up my development process as i am really not making any worthy progress and if continued like this, will take my entire life just completing this project. Hence, i found a decent looking products cards (which i will modify a lot so that it matches the theme) and for i will be modifying that component. I am really sad to do this, but if not done will cause so much time & i have a life too.
But, promise that the products card will be modified by me in such a way that it will make it look completely distinct and really nice compared to the original component.

I added some careful detailing in the header component, creating the counter for the products added to the cart and created a concept for wishlisting the product.

Now, i am working on creating the home/product page. I had implemented the Banner for the products which we wanna advertise.

I had added the DropDownMenu for the user to log out, and have a state in Header component to show Sign up if the user isnot signed up. I also updated the redirection links such as ‘/’ to ‘/product’ and so on. I also added the validation for the products and checkout page. I also optimised the SVG path animation by excluding getTotalLength - 200, and instead rely on the trigger points (set at 5%). I also reduced the opacity of the images in content section which makes the path animation even cooler. I hit and try the different combinations until one works and in doing so it took a lot of time.

I can’t even state that how frustrated i really am due to the fact that i literally wasted 1 hour of my life just to make sure that any logged in user cant visit the /authentication route. Firstly, i didn’t knew how to consume the session context, then i asked AI and it suggest me something else. Then, i saw some YT videos (Jan Marshal) and so on and even read the docs of Tanstack Start, and then i found that i could just use auth.api.getSession. Then, i created getSession as a middleware and thought that using global middleware will be sufficient to be able to consume the session as a context, but i was again wrong.
I then, found (with not less than 10 minutes of docs read) that chaining middleware will work. Now, the thing remaining was to actually implement that protection of the route, and seriously it was so much frustrating that i thought of just going to Next.js instead Tanstack start. But, luckily, i had a idea of turning middleware into serverFn, and calling it on client beforeLoad, and still it didn’t worked.
Then, i mistakenly reload the VS code, and the dev server also got closed. So, i ran npm run dev, and it worked like a magic. 🤣

[TIP: Reload Dev Server if logic intended to work isnot working]

I added logic for resetting password. Sending email is in pending but almost all the logics has been implemented for resetting password atleast in local dev, where i can check via terminal logs.

I created functionality to verify email of any newly formed email (15 minutes ago), and resetting password in case of being forgetten (however, UI for resetting is required, but i will manage it for now). Also, The Header will show the image of a user. I need to implement the verification email sending functionality to work.

Robust Form validation is setup on the application such that it is visually sound and does the job pretty well.

I added basic client side form validation using tanstack start, and have no error states currently. Being the first ever time to use Tanstack Form ecosystem, it took me a lot to see YT tutorials, read tanstack docs (and they donot have great code examples). I stuck a while for the checkbox functionality but eventually i fixed it. Setting validation for Sign Up won’t take much time.

Finally the landing page of the application is implemented properly. What it now has is segregation of TW CSS into globals.css for fewer mismatches. Some SVGs for the application, which made the application look nicer. The SVG path animation is on point.

I implemented Hero Section in the application. IDK what else to write. There are several CSS and tailwind mismatches that i am thinking to either only write CSS or TW for the Landing Page.

I added footer in the application. But it is currently above the SVG so i would need to play with relative and absolute combinations.

I had seen this SVG scroll animation in a YT video and i tried to recreate it but with optimisations like not loading lenis scroll in the landing page (loading it in root layout, which will be applied to entire app). Afterwards, i will be changing the SVG itself so that i can include my own taste for the app. Also, i had written code for this in my style (meaning, there won’t be even 50% similarity in the code).

I spent a decent amount of time reading docs in github about lenis and gsap to implement smooth scroll in the application. Guess what i did it and, now i actually loved tanstack as i could just use useEffect hook in __root.tsx without making the entire application load on client.

Implemented a basic header component in the app. It broke the pages at login so i will fix them later.

Implemented form handling and validation using Tanstack Form. Now, figuring out how to deliver error states and warnings. I donot have groundbreaking UI changes so i attached a screenshot of my app.

Used the tabs for great UX. Managed the signup/login states via URL params for sharability. And, restructure the UI of Login and SignUp page and formed them as a compound component.

I had created a basic UI using shadcn ui components and added the signup and signin functionality into the application. It took me more than i expected as i need to figure out why the login wasnot working & later found that to login, we must have that exact record in our database.

I did a lot of brain work and research to find that neon database files and demo files were causing issue which made the app not working. I removed them and Now finally the app is running. Now, i will work on the core functionality of the application.

It’s my first ever project in Tanstack Start so it took me a lot just to setup the postgresql database and the overall application. However, for some reason, the app isnot running.