Cleaner By Design E-Commerce Store

Cleaner By Design is an e-commerce web application designed to provide a seamless online shopping experience. This platform specializes in offering eco-friendly and sustainable home organization products, catering to a niche market of environmentally conscious consumers. Built using Next.js, PostgreSQL, and TypeScript, the project not only highlights technical proficiency but also demonstrates a commitment to modern, scalable web technologies aligned with innovative business practices.

• Sustainable Product Catalog: A detailed catalog showcasing modern eco-friendly home organization solutions that are better for both the consumer and the planet.
• Secure Checkout Process: Integrated secure payment systems ensuring user security during transactions.
• User Profile Management: Allows users to create profiles where they can track orders, save favorite products, and manage payment methods securely.
• Responsive Design: Adjustable UI components optimized for various devices enhancing usability across different platforms.

Demo

✨ Live Site

Technologies Utilized

• HTML5 - is the fifth and current major version of HTML (HyperText Markup Language), the standard coding language used to build and design web pages. Introduced in 2014 by the World Wide Web Consortium (W3C), HTML5 includes new syntactical features that make it more efficient and powerful compared to earlier versions. It supports multimedia, graphical content, and better semantic capabilities, which allow for clearer code and improved accessibility.

• CSS3 - stands for Cascading Style Sheets Level 3. It's the latest evolution of the CSS language which defines styles for web pages, including design, layout and variations in display for different devices and screen sizes. CSS3 introduces a range of new features and capabilities aimed at improving the aesthetics and functionality of web content.

• TypeScript - is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript, adding optional static typing and class-based object-oriented programming to the language.

• ReactJS - commonly known as React, is a powerful and widely-used JavaScript library for building user interfaces, particularly single-page applications where a fast and interactive user experience is essential.

• Next.js - enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

• PostgreSQL - is an advanced, open-source object-relational database system known for its robustness, scalability, and ability to handle large volumes of data. It supports both SQL (relational) and JSON (non-relational) querying.

• TailwindCSS - is a utility-first CSS framework for rapid UI development. Unlike traditional CSS frameworks which provide predefined components, Tailwind allows developers to style their applications with low-level utility classes directly in the HTML, enabling high customizability and faster styling processes.

Problem

Prior to development, the Cleaner By Design store lacked certain dynamic features that could optimize user experience and streamline operations. The goal was to address these shortcomings through integration with a more flexible and scalable e-commerce system.

Challenges

One major challenge was integrating real-time data updates frequently seen in stock levels or prices without performance penalties on user experiences – solved by efficiently structuring database calls through advanced SQL scripts paired effectively within our Redux state management flows implemented via hooks provided by Next.js framework itself.

Solutions

• Platform Migration: Migrated existing product listings and customer data from old systems to leverage Medusa’s headless architecture.
• Customized Shopping Features: Developed interactive UI enhancements using React on top of the headless commerce functionality provided by Medusa.
• Secure Payment Gateway Integration: Ensured secure transactions with integrated payment options optimized for speed and protection against fraud.

Screenshots

Home Page Product Page Cart Page Checkout Page

Prerequisites

• NPM >=8.0.0
• node >=17.0.0

Install

npm install or yarn

rename .env.local.template to .env.local and replace the environment key values with your own. You will need both an emailjs and a cloudinary account and the appropriate public keys.

Usage

Development Mode -

Windows:

npm run dev-windows or yarn dev-windows

Linux/Docker:

npm run dev or yarn dev

Production Mode -

Build:

npm run build or yarn build

Windows:

npm run start-windows or yarn start-windows

Linux/Docker:

npm run start or yarn start

Author

👤 Joshua Lehman

Portfolio

• https://joshlehman.ca

GitHub

• @joshl26

LinkedIn

• @joshrlehman

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 Joshua Lehman.
This project is MIT licensed.

---