iHateReading — software development blogs

iHateReading is a software development learning platform that breaks programming topics into step-by-step threads, roadmaps, templates, and curated developer resources. The homepage lists practical tutorials for React, Next.js, Node.js, JavaScript, TypeScript, AI tooling, and product engineering. Each thread is a short, structured walkthrough you can skim, bookmark, and reuse while building. Use iHateReading when you need a concrete implementation path rather than a long essay: how to add auth, ship a SaaS starter, submit a product to directories, follow a frontend or backend roadmap, or scan GitHub trending repositories. Start from the article index at /blog, or the machine-readable list at /articles.json. Continue to Explore for curated blogs, the Magazine for a monthly developer digest, Roadmaps for skill paths, Store for website templates, Jobs for developer roles, and SaaS Directories for launch lists. Machine-readable index: https://ihatereading.in/llms.txt. Latest articles JSON: https://ihatereading.in/articles.json. RSS: https://ihatereading.in/rss.xml (also /feed.xml). Topics: https://ihatereading.in/topics (e.g. /topics/react). Search: https://ihatereading.in/search?q={query}. Blog sitemap: https://ihatereading.in/sitemap-blogs.xml. Sitemap index: https://ihatereading.in/sitemap_index.xml. About: https://ihatereading.in/about.

Machine-readable index: https://ihatereading.in/llms.txt. XML sitemap: https://ihatereading.in/sitemap.xml. Agent instructions: https://ihatereading.in/agent-instructions.md.

Show previous threadShow next thread

October 12 letter

One Page E-commerce website

Oct 12, 2025
min

Copy HTML

Copy Markdown

iHateReading letter

Oct 12, 2025
Inspired by this Tweet
I want to make something small but workable, probably like a single React component application
Meaning it should only be one file application, all code should be written using React and other npm modules
If the application is a multi-page then use Modal, Drawers, Sidebars, so overlays
For example, how my e-commerce product will be rendered
  • Account page inside account modal
  • Blog page, subscribe page inside Blog modal
  • legal, privacy, faq inside Help modal
  • Each product's details are inside the drawers/modal. I prefer a modal
  • each blog is again inside a modal (but can't cover SEO)
  • landing page contains tabs, product listing, search feature, footer and company social links
  • account page: user address details, cart and payment
  • login form is also a modal with Google login and email-password login (same can be done for signup)
  • The subscribe form is a newsletter form inside a modal
I've added basic methods and functions, serving images and data from an array (which will be replaced by an API)
This gives me the smallest but workable e-commerce application/website,
This code helps one of our clients to quickly launch and run any e-commerce brand to test the idea ASAP
And soon I will put it live on gettemplate.website

Subscribe

Our once a week newsletter on Programming, Jobs, AI, and Business