Best of eCommerce — 2024

1
Article
DEV·2y
100+ React E-Commerce Components for Modern Stores
TailGrids offers over 100 eCommerce UI components specifically designed for React and Tailwind CSS, enabling developers to create scalable, high-performance, and user-friendly online stores with ease. These components cover every aspect of an eCommerce platform, from checkout flows to product carousels, and are fully customizable and responsive across all devices. Additionally, TailGrids provides three pre-built eCommerce templates to kickstart your development.
257
8
2
Article
Dev Squad·1y
Quickly Find Resources for Awesome Next.js
Explore a curated list of resources related to Next.js divided into 11 categories. These include starters/boilerplates, AI projects, SaaS templates, tools, blog templates, e-commerce projects, and landing page templates.
202
22
3
Article
Community Picks·2y
Building An E-Commerce Store With NextJS
Learn how to build an e-commerce store with Next.js using tools like Appwrite, Next.js, Novu, React Icons, and Stripe. The tutorial covers building the application interface, adding Appwrite to the application, performing CRUD operations with Appwrite, authenticating users with Appwrite, adding Stripe payment checkout, and sending in-app and email notifications with Novu.
194
7
4
Article
LogRocket·2y
Building Telegram Mini Apps with React
Telegram recently launched Mini Apps integration, allowing developers to build various applications within the Telegram ecosystem. These apps offer a native-like experience, bypassing the lengthy app store approval processes. This tutorial covers the creation of a full-stack ecommerce application using React, Node.js, and Postgres with Stripe integration for payments, all to run as a Mini App on Telegram.
148
2
5
Article
ByteByteGo·2y
How Shopify Manages its Petabyte Scale MySQL Database
Shopify handles its petabyte-scale MySQL database using innovative techniques to ensure zero downtime, maintain read consistency, and implement efficient backup and restore processes. Shard balancing is used to distribute traffic loads efficiently across database instances. Ghostferry, an in-house tool, assists in database migration with minimal disruption. Data replication is managed to minimize lag, ensuring time-sensitive reads are accurate. Finally, Shopify leverages Google Cloud Platform's persistent disk snapshots for fast and reliable database backups and restores.
122
1
6
Video
YouTube·2y
Create Full Stack E-commerce Website Using React JS | MERN Stack eCommerce Project with Stripe
Learn how to build a full stack e-commerce website using the MERN stack (MongoDB, Express.js, React.js, and Node.js). The tutorial covers building a homepage displaying new collections and best sellers, integrating product filters, adding user login and sign-up functionality, implementing a shopping cart and checkout process with payment options like Stripe and Cash on Delivery, and creating an admin panel for order management. The guide provides step-by-step instructions, emphasizing responsive design and usage of context API for state management.
84
7
Video
Community Picks·2y
Atomic Repositories in Clean Architecture and TypeScript
Achieving atomicity in a repository pattern within a clean architecture JavaScript project is crucial for ensuring all database queries are executed or none at all, especially in complex flows like e-commerce checkouts. A process prone to errors, such as availability checks and payment issues, needs to rollback operations if a failure occurs, which can be managed using transactions. This guide demonstrates creating and managing transactions with Drizzle in a Next.js to-do application, ensuring that if any part fails, all operations are reversed to maintain database integrity.
80
2
8
Article
Codrops·2y
UI Interactions & Animations Roundup #45
This post showcases a collection of recent UI interactions and animations, featuring diverse designs such as e-commerce concepts, AI assistant avatars, restaurant branding, and more. Highlighted works include contributions from artists like Serhii Polyvanyi, Gleb Kuznetsov, and Linur, offering inspiration across various design projects.
78
2
9
Article
Netguru·1y
Headless E-Commerce: Explaining the Biggest Trend in E-Commerce
Headless e-commerce separates the frontend presentation from backend operations, offering increased flexibility and customization for online stores. This architecture uses APIs for streamlined communication, enabling real-time data updates and a consistent user experience across multiple platforms. It benefits brands looking to innovate with tailored customer journeys, omnichannel support, and scalable systems. While headless e-commerce provides significant advantages, it requires more development expertise, higher costs, and ongoing maintenance.
73
6
10
Video
Lun Dev Code·2y
Remove Image Backgrounds With One Line Of Code From Master CSS
The post introduces a method to remove image backgrounds using a single line of CSS code, specifically utilizing the mix-blend-mode property. This technique ensures that product images blend seamlessly with the website's design, addressing issues caused by non-transparent backgrounds. The approach is compatible with all major browsers and provides a powerful solution for consistent web design, especially in e-commerce.
73
1
11
Article
Supabase·2y
In-Browser Semantic AI Search with PGlite and Transformers.js
The post introduces a method for building an in-browser semantic search experience using PGlite, pgvector, and Transformers.js. This setup could benefit eCommerce sites by quickly surfacing relevant products without server roundtrips. It includes instructions for setting up the database schema and code examples for a React application, enabling local storage and retrieval of text and embeddings using IndexedDB.
72
1
12
Article
Community Picks·2y
Headless E-Commerce for Laravel
Lunar is an open-source package that adds headless e-commerce functionality to Laravel. It provides flexibility to build custom online stores, an administration hub for managing catalogues and orders, and a RESTful JSON:API for powering JavaScript or mobile store fronts. The installation is straightforward, requiring just two commands to set up. Lunar is built around Laravel Eloquent models, making it familiar for Laravel developers.
64
13
Article
Laravel News·2y
A Lightweight Cart Package for Laravel
The binafy/laravel-cart package integrates shopping cart functionality into Laravel applications, simplifying tasks like storing and managing cart items, supporting multiple payment gateways, and handling recurring payments. It offers robust validation, error handling, and a highly customizable architecture, making it a versatile tool for ecommerce development.
64
5
14
Video
Josh tried coding·2y
My Favorite Open-Source Next.js Project for 2024
A deep dive into an open-source Next.js project that showcases techniques for extreme website speed and performance. The project utilizes partial pre-rendering, aggressive prefetching, and aggressive caching, among other strategies, to achieve nearly instant navigation and image loading. The author explains how these methods can be implemented in other projects, highlighting the trade-offs involved, such as increased infrastructure load and limitations on dynamic content.
62
15
Video
developedbyed·2y
Build Full Stack Apps With This Remix Visual IDE
Codex is a new visual IDE designed for React development that provides a graphical interface for managing components, styling, and contents, similar to Figma. It supports full stack development with Remix, enabling the creation of comprehensive applications like e-commerce sites. Codex offers templates, drag-and-drop functionality, and integration with Wix headless services for managing checkouts and payments.
59
16
Article
Community Picks·2y
21+ Top React Footer Components to Use in 2024
The footer of a website plays a significant role in user experience and SEO. In 2024, React and Tailwind CSS offer customizable footer components for various needs. This post highlights 21+ top React footer components from TailGrids, Flowbite, Material Tailwind, CoreUI, and more, suitable for corporate websites, e-commerce stores, and admin dashboards. These components range from simple designs to feature-rich options, making them ideal for enhancing user engagement and navigation.
55
1
17
Article
LogRocket·2y
Homepage design for ecommerce sites: Tips & best practices
The homepage design of an ecommerce site is crucial, serving as both an entry point and category page, especially for niche markets. Highlight key benefits, use hero sections wisely, and ensure quality visuals to build trust. Employ social proof and FOMO subtly to boost conversions. Always prioritize user experience (UX) and consider SEO impacts for better online performance. A/B testing is essential to tailor the homepage to your specific audience and market needs.
53
1
18
Article
Bootcamp·2y
How I designed a landing page for an Essential oil brand: A Case Study
The post dives into the design process of a landing page for an essential oil brand, aiming to improve user engagement and conversion rates. Key steps include researching competitors, creating an intuitive layout, using a light and clean color scheme, and incorporating educational content and customer testimonials. The author also emphasizes the importance of iteration and time management in the design process.
44
19
Article
Codrops·2y
UI Interactions & Animations Roundup #47
A curated collection of standout UI interactions and animations, featuring contributions from various designers and studios. Highlights include innovative website interactions, motion design, ecommerce hero sections, investment apps, marketing agency landing pages, and unique 404 pages.
35
20
Video
ByteGrad·1y
Next.js BFF With Separate Backend Is My Favorite Architecture
The post discusses the benefits of using a separate backend with a Next.js application, highlighting scenarios where this architecture is advantageous. Examples include using different languages, handling heavy processing, and managing large product catalogs independently. The post includes a detailed example of setting up a decoupled backend using WooCommerce on Cloudways, with the front end hosted separately on Vercel, demonstrating how to fetch and display data from the backend in a Next.js app.
33
21
Article
Machine Learning News·2y
Meet Booth AI: An AI-Powered Solution that Builds No-Code Gen AI Apps
Booth AI is revolutionizing the product photography industry with its no-code generative AI app builder. The platform enables users to create high-quality, professional-grade photos in seconds using simple text prompts and reference images. With an easy-to-use interface and powerful editing tools, Booth AI makes it possible to produce 4K resolution images without the need for traditional photoshoots, saving both time and money.
28
3
22
Article
Tailwind Templates·1y
Grocery store ecommerce tailwindCss html template
Discover a new Tailwind eCommerce HTML template designed for optimal online shopping experiences. It features responsive design, customizable components, and is optimized for speed, ensuring your store stands out.
26
23
Article
Towards AI·2y
Similarity-based Based Recommendation Systems Algorithms
Similarity-based recommendation systems use either user-user or item-item similarities to provide recommendations. User-user similarity systems compare users' preferences, while item-item systems compare items. Amazon popularized item-item similarity due to its stability over time, making it more effective in environments where user preferences change frequently. Overall, item-item approaches are preferred when there are more users than items.
26
1
24
Article
Collections·2y
Building an E-commerce Store in Next.js with Payload CMS and Neon Postgres
This guide details the process of building an e-commerce store with Next.js, Payload CMS, and Neon serverless Postgres. It covers setting up a Neon Postgres database, initializing a Next.js project, creating a Payload CMS application, implementing server actions, and testing the store locally. The setup leverages Neon's scale-to-zero feature to minimize compute costs and ensures secure handling of user inputs.
25
2
25
Article
Community Picks·2y
Understanding front end as a service (FEaaS)
Front End as a Service (FEaaS) greatly simplifies building and maintaining scalable front ends by offering cloud infrastructure and ready-made components. It accelerates development, reduces costs, and allows faster market entry, though it may limit customizability. FEaaS supports a variety of industries like ecommerce and internal tools, catering to both technical and non-technical users with SDKs or drag-and-drop interfaces. Major benefits include reduced development time, lower labor and maintenance costs, and improved performance through built-in optimizations and CDN support. However, drawbacks like platform lock-in and potential downtime due to service interruptions need consideration.
24

See all eCommerce archives